OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
esprehn
2014/02/27 20:58:31
We often leave off the <html>, <head> and <body> e
| |
4 <style> | |
5 #container { | |
6 will-change: top; | |
7 position: absolute; | |
8 left: 200px; | |
9 top: 100px; | |
10 width: 100px; | |
11 height: 100px; | |
12 background-color: blue; | |
13 } | |
14 | |
15 .fixed { | |
16 position: fixed; | |
17 left: 50px; | |
18 top: 50px; | |
19 width: 75px; | |
20 height: 75px; | |
21 background-color: green | |
22 } | |
23 </style> | |
24 <script type="text/javascript"> | |
25 if (window.testRunner) { | |
26 testRunner.waitUntilDone(); | |
27 } | |
28 | |
29 function doTest() | |
30 { | |
31 if (window.internals) { | |
32 window.internals.forceCompositingUpdate(document); | |
33 } | |
34 // Adding "will-change: -webkit-transform" to the container div should | |
35 // make this div become the containing block for its fixed position | |
36 // descendant. | |
37 document.getElementById("container").style.willChange = "-webkit-transform "; | |
38 if (window.testRunner) { | |
39 testRunner.notifyDone(); | |
40 } | |
41 } | |
42 | |
43 window.addEventListener('load', doTest, false); | |
44 </script> | |
45 </head> | |
46 | |
47 <body> | |
48 <div id="container"> | |
49 <div class="fixed"></div> | |
50 </div> | |
51 </body> | |
52 | |
53 </html> | |
OLD | NEW |