OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <script src="resources/text-based-repaint.js" type="text/javascript"></script> | |
3 <script> | |
4 function repaintTest() | |
5 { | |
6 document.getElementById('container').style.height = '550px'; | |
7 } | |
8 window.onload = runRepaintAndPixelTest; | |
9 </script> | |
10 <style> | |
11 #container { | |
12 position: absolute; | |
13 width: 600px; | |
14 height: 500px; | |
15 } | |
16 .test { | |
17 backface-visibility: hidden; | |
18 position: absolute; | |
19 width: 10%; | |
20 height: 8%; | |
21 } | |
22 .image { | |
23 background-image: url(resources/small-apple.jpg); | |
24 top: 0px; | |
25 } | |
26 .generated { | |
27 background-image: linear-gradient(blue, green); | |
28 top: 100px; | |
29 } | |
30 .size-cover { | |
31 background-size: cover; | |
32 left: 50px; | |
33 } | |
34 .size-contain { | |
35 background-size: contain; | |
36 left: 100px; | |
37 } | |
38 .fixed-height { | |
39 background-size: auto 30px; | |
40 left: 150px; | |
41 } | |
42 .percent-height { | |
43 background-size: auto 50%; | |
44 left: 200px; | |
45 } | |
46 .top { | |
47 background-position: left 0px top 10px; | |
48 left: 250px; | |
49 } | |
50 .bottom { | |
51 background-position: left 0px bottom 10px; | |
52 left: 300px; | |
53 } | |
54 .center { | |
55 background-position: center; | |
56 left: 350px; | |
57 } | |
58 .no-repeat { | |
59 background-repeat: no-repeat; | |
60 left: 400px; | |
61 } | |
62 .repeat-space { | |
63 background-repeat: space; | |
64 left: 450px; | |
65 } | |
66 .repeat-round { | |
67 background-repeat: round; | |
68 left: 500px; | |
69 } | |
70 </style> | |
71 <div id="container"> | |
72 <div class="test image"></div> | |
73 <div class="test image size-cover"></div> | |
74 <div class="test image size-contain"></div> | |
75 <div class="test image fixed-height"></div> | |
76 <div class="test image percent-height"></div> | |
77 <div class="test image top"></div> | |
78 <div class="test image bottom"></div> | |
79 <div class="test image center"></div> | |
80 <div class="test image no-repeat"></div> | |
81 <div class="test image repeat-space"></div> | |
82 <div class="test image repeat-round"></div> | |
83 <div class="test generated"></div> | |
84 <div class="test generated cover"></div> | |
85 <div class="test generated contain"></div> | |
86 <div class="test generated fixed-height"></div> | |
87 <div class="test generated percent-height"></div> | |
88 <div class="test generated top"></div> | |
89 <div class="test generated bottom"></div> | |
90 <div class="test generated center"></div> | |
91 <div class="test generated no-repeat"></div> | |
92 <div class="test generated repeat-space"></div> | |
93 <div class="test generated repeat-round"></div> | |
94 </div> | |
OLD | NEW |