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