OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 | |
3 <html> | |
4 <head> | |
5 <style> | |
6 .container { | |
7 width: 200px; | |
8 height: 200px; | |
9 overflow: scroll; | |
10 margin: 20px; | |
11 border: 1px solid black; | |
12 } | |
13 | |
14 .scrolled { | |
15 width: 180px; | |
16 height: 90px; | |
17 margin: 10px; | |
18 background-color: gray; | |
19 position: relative; | |
20 } | |
21 | |
22 .positioned { | |
23 width: 120px; | |
24 height: 240px; | |
25 position: absolute; | |
26 } | |
27 | |
28 #firstChild { | |
29 z-index: 1; | |
30 } | |
31 | |
32 #secondChild { | |
33 z-index: 2; | |
34 } | |
35 | |
36 #predecessor { | |
37 left: 20px; | |
38 top: 20px; | |
39 z-index: 0; | |
40 background-color: green; | |
41 } | |
42 | |
43 #ancestor { | |
44 background-color: blue; | |
45 } | |
46 | |
47 </style> | |
48 <script src="resources/automatically-opt-into-composited-scrolling.js"></scrip
t> | |
49 <script> | |
50 if (window.testRunner) | |
51 testRunner.dumpAsText(); | |
52 | |
53 if (window.internals) | |
54 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnable
d(true); | |
55 | |
56 function doTest() | |
57 { | |
58 var predecessor = document.getElementById('predecessor'); | |
59 var ancestor = document.getElementById('ancestor'); | |
60 var container = document.getElementById('container'); | |
61 var firstChild = document.getElementById('firstChild'); | |
62 var secondChild = document.getElementById('secondChild'); | |
63 | |
64 // Force a synchronous style recalc and layout. | |
65 document.body.offsetTop; | |
66 | |
67 if (window.internals) { | |
68 window.internals.forceCompositingUpdate(document); | |
69 | |
70 if (didOptIn(container)) | |
71 write('Passed - correctly opted into composited scrolling with a posit
ioned ancestor.') | |
72 else | |
73 write('FAILED - did not opt into composited scrolling with a positione
d ancestor when it would safe.') | |
74 } | |
75 } // function doTest | |
76 | |
77 window.addEventListener('load', doTest, false); | |
78 </script> | |
79 </head> | |
80 | |
81 <body> | |
82 <div class="positioned" id="predecessor"></div> | |
83 <div class="positioned" id="ancestor"> | |
84 <div class="container" id="container"> | |
85 <div class="scrolled" id="firstChild"></div> | |
86 <div class="scrolled" id="secondChild"></div> | |
87 </div> | |
88 </div> | |
89 <pre id="console"></pre> | |
90 </body> | |
91 </html> | |
OLD | NEW |