OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <!-- | 2 <!-- |
3 This tests verifies that filters repaint correctly in composited mode when t
he filter property is changed. | 3 This tests verifies that filters repaint correctly in composited mode when t
he filter property is changed. |
4 You should see 7 green rectangles. First 6 of the rectangles have a blue sha
dow. There should be no red. | 4 You should see 7 green rectangles. First 6 of the rectangles have a blue sha
dow. There should be no red. |
5 --> | 5 --> |
6 <html> | 6 <html> |
7 <head> | 7 <head> |
8 <style> | 8 <style> |
9 .box { | 9 .box { |
10 /* force a composited layer */ | 10 /* force a composited layer */ |
11 -webkit-transform: translate3d(0, 0, 0); | 11 -webkit-transform: translate3d(0, 0, 0); |
12 float: left; | 12 float: left; |
13 height: 50px; | 13 height: 50px; |
14 width: 50px; | 14 width: 50px; |
15 margin: 50px; | 15 margin: 50px; |
16 background-color: green; | 16 background-color: green; |
17 } | 17 } |
18 | 18 |
19 .composited_from_none { | 19 .composited_from_none { |
20 -webkit-filter: drop-shadow(0px 0px 10px blue); | 20 -webkit-filter: drop-shadow(0px 0px 10px blue); |
21 } | 21 } |
22 | 22 |
23 .composited_from_none.before { | 23 .composited_from_none.before { |
24 -webkit-filter: none; | 24 -webkit-filter: none; |
25 } | 25 } |
26 | 26 |
27 .composited_from_composited { | 27 .composited_from_composited { |
28 -webkit-filter: drop-shadow(0px 0px 10px blue); | 28 -webkit-filter: drop-shadow(0px 0px 10px blue); |
29 } | 29 } |
30 | 30 |
31 .composited_from_composited.before { | 31 .composited_from_composited.before { |
32 -webkit-filter: drop-shadow(0px 0px 10px red); | 32 -webkit-filter: drop-shadow(0px 0px 10px red); |
33 } | 33 } |
34 | 34 |
35 .composited_from_composited_zero_radius { | 35 .composited_from_composited_zero_radius { |
36 -webkit-filter: drop-shadow(0px 0px 10px blue); | 36 -webkit-filter: drop-shadow(0px 0px 10px blue); |
37 } | 37 } |
38 | 38 |
39 .composited_from_composited_zero_radius.before { | 39 .composited_from_composited_zero_radius.before { |
40 -webkit-filter: drop-shadow(0px 0px 0px red); | 40 -webkit-filter: drop-shadow(0px 0px 0px red); |
41 } | 41 } |
42 | 42 |
43 .composited_from_composited_offset { | 43 .composited_from_composited_offset { |
44 -webkit-filter: drop-shadow(0px 0px 10px blue); | 44 -webkit-filter: drop-shadow(0px 0px 10px blue); |
45 } | 45 } |
46 | 46 |
47 .composited_from_composited_offset.before { | 47 .composited_from_composited_offset.before { |
48 -webkit-filter: drop-shadow(-100px -100px 10px red); | 48 -webkit-filter: drop-shadow(-100px -100px 10px red); |
49 } | 49 } |
50 | 50 |
51 .composited_from_software { | 51 .composited_from_software { |
52 -webkit-filter: drop-shadow(0px 0px 10px blue); | 52 -webkit-filter: drop-shadow(0px 0px 10px blue); |
53 } | 53 } |
54 | 54 |
55 .composited_from_software.before { | 55 .composited_from_software.before { |
56 -webkit-filter: drop-shadow(0px 0px 10px red) blur(1px); | 56 -webkit-filter: drop-shadow(0px 0px 10px red) blur(1px); |
57 } | 57 } |
58 | 58 |
59 .software_from_composited { | 59 .software_from_composited { |
60 -webkit-filter: drop-shadow(0px 0px 10px blue) blur(2px); | 60 -webkit-filter: drop-shadow(0px 0px 10px blue) blur(2px); |
61 } | 61 } |
62 | 62 |
63 .software_from_composited.before { | 63 .software_from_composited.before { |
64 -webkit-filter: drop-shadow(0px 0px 10px red); | 64 -webkit-filter: drop-shadow(0px 0px 10px red); |
65 } | 65 } |
66 | 66 |
67 .none_from_composited { | 67 .none_from_composited { |
68 -webkit-filter: none; | 68 -webkit-filter: none; |
69 } | 69 } |
70 | 70 |
71 .none_from_composited.before { | 71 .none_from_composited.before { |
72 -webkit-filter: drop-shadow(0px 0px 10px red); | 72 -webkit-filter: drop-shadow(0px 0px 10px red); |
73 } | 73 } |
74 </style> | 74 </style> |
75 | 75 |
76 <script src="../../fast/repaint/resources/repaint.js"></script> | 76 <script src="../../resources/run-after-display.js"></script> |
77 <script> | 77 <script> |
78 if (window.testRunner) | 78 if (window.testRunner) { |
79 testRunner.dumpAsTextWithPixelResults(); | 79 testRunner.dumpAsTextWithPixelResults(); |
| 80 testRunner.waitUntilDone(); |
| 81 } |
80 | 82 |
81 function repaintTest() | 83 function repaintTest() |
82 { | 84 { |
83 var items = document.getElementsByClassName('before'); | 85 runAfterDisplay(function() { |
84 while (items.length) | 86 var items = document.getElementsByClassName('before'); |
85 items[0].classList.remove("before"); | 87 while (items.length) |
| 88 items[0].classList.remove("before"); |
| 89 if (window.testRunner) |
| 90 testRunner.notifyDone(); |
| 91 }); |
86 } | 92 } |
87 </script> | 93 </script> |
88 </head> | 94 </head> |
89 | 95 |
90 <body onload="runRepaintTest()"> | 96 <body onload="repaintTest()"> |
91 <div class="box composited_from_none before"></div> | 97 <div class="box composited_from_none before"></div> |
92 <div class="box composited_from_composited before"></div> | 98 <div class="box composited_from_composited before"></div> |
93 <div class="box composited_from_composited_zero_radius before"></div> | 99 <div class="box composited_from_composited_zero_radius before"></div> |
94 <div class="box composited_from_composited_offset before"></div> | 100 <div class="box composited_from_composited_offset before"></div> |
95 <div class="box composited_from_software before"></div> | 101 <div class="box composited_from_software before"></div> |
96 <div class="box software_from_composited before"></div> | 102 <div class="box software_from_composited before"></div> |
97 <div class="box none_from_composited before"></div> | 103 <div class="box none_from_composited before"></div> |
98 </body> | 104 </body> |
99 </html> | 105 </html> |
OLD | NEW |