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 background-color: green; | |
26 position: absolute; | |
27 } | |
28 | |
29 #descendant { | |
30 left: 90px; | |
31 top: 20px; | |
32 background-color: blue; | |
33 z-index: -20; | |
34 } | |
35 </style> | |
36 <script> | |
37 var debugMode = false; | |
38 | |
39 if (window.testRunner) | |
40 testRunner.dumpAsText(); | |
41 | |
42 if (window.internals) { | |
43 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnable
d(true); | |
44 window.internals.settings.setCompositorDrivenAcceleratedScrollingEnabled(f
alse); | |
45 } | |
46 | |
47 function write(str) | |
48 { | |
49 var pre = document.getElementById('console'); | |
50 var text = document.createTextNode(str + '\n'); | |
51 pre.appendChild(text); | |
52 } | |
53 | |
54 var iteration = 0; | |
55 function printResult(expectedResult) | |
56 { | |
57 // Force a style recalc. | |
58 document.body.offsetTop; | |
59 | |
60 if (window.internals) { | |
61 var container = document.getElementById('container'); | |
62 var containerOptedIn = window.internals.needsCompositedScrolling(contain
er); | |
63 | |
64 if (!containerOptedIn == !expectedResult) | |
65 write('Iteration ' + iteration.toString() + ': Passed') | |
66 else | |
67 write('Iteration ' + iteration.toString() + ': FAILED') | |
68 | |
69 if (containerOptedIn) { | |
70 write('Iteration ' + iteration.toString() + ', container opted in'); | |
71 if (debugMode) { | |
72 var layerTree = window.internals.layerTreeAsText(document); | |
73 write(layerTree); | |
74 } | |
75 } else { | |
76 write('Iteration ' + iteration.toString() + ', container did not opt i
n'); | |
77 } | |
78 } | |
79 iteration++; | |
80 } | |
81 | |
82 function doTest() | |
83 { | |
84 var descendant = document.getElementById('descendant'); | |
85 | |
86 // Check that we don't promote if we have an out of flow descendant. | |
87 // We need to hide the predecessor and successor so they don't interfere | |
88 // with this experiment. | |
89 for (i = 0; i < 3; ++i) { | |
90 if (i == 0) { | |
91 descendant.style.visibility = 'hidden'; | |
92 descendant.style.display = ''; | |
93 } else if (i == 1) { | |
94 descendant.style.visibility = ''; | |
95 descendant.style.display = ''; | |
96 } else { | |
97 descendant.style.visibility = ''; | |
98 descendant.style.display = 'none'; | |
99 } | |
100 | |
101 // If the out of flow positioned descendant is visible, we cannot opt | |
102 // into composited scrolling. | |
103 printResult(i != 1); | |
104 } // for i | |
105 | |
106 } // function doTest | |
107 | |
108 window.addEventListener('load', doTest, false); | |
109 </script> | |
110 </head> | |
111 | |
112 <body> | |
113 <div class="container" id="container"> | |
114 <div class="scrolled" id="firstChild"></div> | |
115 <div class="scrolled" id="secondChild"></div> | |
116 <div class="positioned" id="descendant"></div> | |
117 </div> | |
118 <pre id="console"></pre> | |
119 </body> | |
120 </html> | |
121 | |
OLD | NEW |