layout/reftests/image-rect/background-with-other-properties.html@925c144e1f1f
layout/reftests/image-rect/background-with-other-properties.html
Fri, 16 Jan 2015 18:13:44 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Fri, 16 Jan 2015 18:13:44 +0100
- branch
- TOR_BUG_9701
- changeset 14
- 925c144e1f1f
- permissions
- -rw-r--r--
Integrate suggestion from review to improve consistency with existing code.
1 <!DOCTYPE html>
2 <!--
3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/licenses/publicdomain/
6 Tests if -moz-image-rect() works collaboratively with other background
7 properties as expected.
8 -->
9 <html>
10 <head>
11 <title>Testcases: -moz-image-rect() [bug 113577]</title>
12 <style>
13 div.wrapper {
14 width: 32px;
15 height: 32px;
16 margin: 10px;
17 background-color: red;
18 }
19 div.wrapper div {
20 width: 32px;
21 height: 32px;
22 }
23 /* tests with background-repeat */
24 #test1 {
25 background: repeat -moz-image-rect(url(green-16x16-in-blue-32x32.png), 8, 24, 24, 8);
26 }
27 /* tests with background-position */
28 #test2 {
29 background: no-repeat -8px -8px -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 24, 24, 0);
30 }
31 /* tests with background layers */
32 #test3 {
33 background: no-repeat 0px 0px -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 16, 16, 0),
34 no-repeat 16px 0px -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 32, 16, 16);
35 }
36 /* for comparison with test5 */
37 #test4 {
38 background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 8, 24, 24, 8);
39 background-repeat: no-repeat;
40 }
41 /* tests with background-size */
42 #test5 {
43 background-size: 100% 100%;
44 background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 8, 24, 24, 8);
45 background-repeat: no-repeat;
46 }
47 </style>
48 </head>
49 <body>
50 <div class="wrapper"><div id="test1"></div></div>
51 <div class="wrapper"><div id="test2"></div></div>
52 <div class="wrapper"><div id="test3"></div></div>
53 <div class="wrapper"><div id="test4"></div></div>
54 <div class="wrapper"><div id="test5"></div></div>
55 </body>
56 </html>
