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