layout/reftests/image-rect/background-common-usage-floating-point.html@6474c204b198
layout/reftests/image-rect/background-common-usage-floating-point.html
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
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>
