layout/reftests/image-rect/background-common-usage-floating-point.html

Wed, 31 Dec 2014 07:22:50 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 07:22:50 +0100
branch
TOR_BUG_3246
changeset 4
fc2d59ddac77
permissions
-rw-r--r--

Correct previous dual key logic pending first delivery installment.

     1 <!DOCTYPE html>
     2 <!--
     3     Any copyright is dedicated to the Public Domain.
     4     http://creativecommons.org/licenses/publicdomain/
     6     test1 and test2 test -moz-image-rect() where the image rect is specified by
     7     mixed pixel values and percentage values.
     9     -moz-image-rect() can also take a floating point value for each side, and
    10     each floating point value (after percent to pixel conversion) is rounded to
    11     the nearest integer.  test3 and test4 test if the rounding operation is
    12     working as expected.
    13 -->
    14 <html>
    15   <head>
    16     <title>Testcases: -moz-image-rect() [bug 113577]</title>
    17     <style>
    18       div.wrapper {
    19         width: 32px;
    20         height: 32px;
    21         margin: 10px;
    22         background-color: red;
    23       }
    24       div.wrapper div {
    25         width: 32px;
    26         height: 32px;
    27         background: no-repeat;
    28       }
    29       #test1 {
    30         background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 32, 100%, 0%);
    31       }
    32       #test2 {
    33         background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 0%, 32, 50%, 0);
    34       }
    35       #test3 {
    36         background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0.3, 16.2, 15.5, 0.4);
    37       }
    38       #test4 {
    39         background-color: yellow;
    40         background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 51.2%, 100.4%, 99.2%, 48.9%);
    41       }
    42     </style>
    43   </head>
    44   <body>
    45     <div class="wrapper"><div id="test1"></div></div>
    46     <div class="wrapper"><div id="test2"></div></div>
    47     <div class="wrapper"><div id="test3"></div></div>
    48     <div class="wrapper"><div id="test4"></div></div>
    49   </body>
    50 </html>

mercurial