OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 #container { | |
6 width: 200px; | |
7 height: 200px; | |
8 overflow: scroll; | |
9 margin: 20px; | |
10 border: 1px solid black; | |
11 } | |
12 | |
13 #abs-pos-ancestor { | |
14 width: 500px; | |
15 height: 500px; | |
16 position: absolute; | |
17 z-index: 0; | |
18 } | |
19 | |
20 #positioned-ancestor { | |
21 width: 150px; | |
22 height: 300px; | |
23 position: relative; | |
24 } | |
25 | |
26 #descendant { | |
27 left: 10px; | |
28 top: 10px; | |
29 width: 50px; | |
30 height: 50px; | |
31 background-color: blue; | |
32 position: absolute; | |
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 var passed = containerOptedIn === expectedResult; | |
65 if (passed) | |
66 write('Iteration ' + iteration.toString() + ': Passed') | |
67 else | |
68 write('Iteration ' + iteration.toString() + ': FAILED') | |
69 | |
70 if (containerOptedIn) { | |
71 write('Iteration ' + iteration.toString() + ', container is composited
'); | |
72 if (debugMode || !passed) { | |
73 var layerTree = window.internals.layerTreeAsText(document); | |
74 write(layerTree); | |
75 } | |
76 } else | |
77 write('Iteration ' + iteration.toString() + ', container is not compos
ited'); | |
78 } | |
79 iteration++; | |
80 } | |
81 | |
82 function doTest() | |
83 { | |
84 var container = document.getElementById('container'); | |
85 var positionedAncestor = document.getElementById('positioned-ancestor'); | |
86 var descendant = document.getElementById('descendant'); | |
87 | |
88 // Initial configuration should opt in. | |
89 printResult(true); | |
90 | |
91 // If positioned ancestor ceases to be positioned, the containing | |
92 // will become the abs-pos-ancestor. We should opt out. | |
93 positionedAncestor.style.position = 'static'; | |
94 printResult(false); | |
95 | |
96 // If we get rid of the out-of-flow positioned descendant at this point, | |
97 // it should be ok to opt back in. | |
98 descendant.style.display = 'none'; | |
99 printResult(true); | |
100 | |
101 // This should return us to our previous state. | |
102 descendant.style.display = ''; | |
103 printResult(false); | |
104 | |
105 // If the descendant ceases to be out-of-flow-positioned, then we should | |
106 // opt in. | |
107 descendant.style.position = 'static'; | |
108 printResult(true); | |
109 | |
110 // This should return us to our previous state. | |
111 descendant.style.position = ''; | |
112 printResult(false); | |
113 | |
114 // If the positionedAncestor again becomes positioned, it will become the | |
115 // containing block for the descendant and we should opt in. | |
116 positionedAncestor.style.position = 'relative'; | |
117 printResult(true); | |
118 } // function doTest | |
119 | |
120 window.addEventListener('load', doTest, false); | |
121 </script> | |
122 </head> | |
123 | |
124 <body> | |
125 <div id="abs-pos-ancestor"> | |
126 <div id="container"> | |
127 <div id="positioned-ancestor"> | |
128 <div id="descendant"></div> | |
129 </div> | |
130 </div> | |
131 </div> | |
132 <pre id="console"></pre> | |
133 </body> | |
134 </html> | |
135 | |
OLD | NEW |