layout/reftests/backgrounds/background-size-zoom-repeat-ref.html@925c144e1f1f
layout/reftests/backgrounds/background-size-zoom-repeat-ref.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 <html>
3 <head>
4 <title>background-size: 64px 40px; repeat, zoom reference</title>
5 <style type="text/css">
6 html
7 {
8 margin: 0;
9 padding: 0;
10 }
11 body
12 {
13 margin: 0;
14 padding: 20px;
15 }
16 #outer
17 {
18 width: 512px;
19 height: 320px;
20 }
21 /*
22 * PRE-ZOOM:
23 * 2x size the image, then tile it 4x4 across the div; sampling artifacts at
24 * 32px horizontal offset, then every 64px for the full height of the div.
25 * POST-ZOOM:
26 * 4x size the image, then tile it 4x4 across the div; sampling artifacts at
27 * 64px horizontal offset, then every 128px for the full height of the div.
28 */
30 /* Aargh, sampling artifacts, we hates them, precioussss. */
31 #outer > div
32 {
33 display: inline-block;
34 width: 56px;
35 height: 320px;
36 }
37 .blue
38 {
39 background: url(blue-16x20.png);
40 border-right: 8px solid black;
41 }
42 .green
43 {
44 background: url(green-16x20.png);
45 border-left: 8px solid black;
46 }
47 </style>
48 </head>
49 <body>
50 <div id="outer"><div
51 class="blue"></div><div
52 class="green"></div><div
53 class="blue"></div><div
54 class="green"></div><div
55 class="blue"></div><div
56 class="green"></div><div
57 class="blue"></div><div
58 class="green"></div></div>
59 </body>
60 </html>
