OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 .squashed { | 5 .squashed { |
6 height: 40px; | 6 height: 40px; |
7 width: 40px; | 7 width: 40px; |
8 background-color: lightgreen; | 8 background-color: lightgreen; |
9 position: absolute; | 9 position: absolute; |
10 top: 90px; | 10 top: 90px; |
11 } | 11 } |
12 .composited { | 12 .composited { |
13 position: absolute; | 13 position: absolute; |
14 margin-top: 5px; | 14 margin-top: 5px; |
15 height: 100px; | 15 height: 100px; |
16 width: 100px; | 16 width: 100px; |
17 background-color: lightblue; | 17 background-color: lightblue; |
18 transform: translateZ(1px); | 18 transform: translateZ(1px); |
19 } | 19 } |
20 </style> | 20 </style> |
21 <script> | 21 <script> |
22 onload = function() { | 22 onload = function() { |
23 if (window.testRunner) { | 23 if (window.testRunner) |
24 testRunner.waitUntilDone(); | 24 testRunner.waitUntilDone(); |
25 internals.settings.setLayerSquashingEnabled(true); | |
26 } | |
27 | 25 |
28 var target = document.getElementById('target3'); | 26 var target = document.getElementById('target3'); |
29 requestAnimationFrame(function() { | 27 requestAnimationFrame(function() { |
30 target.style.backgroundColor = 'green'; | 28 target.style.backgroundColor = 'green'; |
31 getComputedStyle(target).backgroundColor; | 29 getComputedStyle(target).backgroundColor; |
32 setTimeout(function() { | 30 setTimeout(function() { |
33 if (window.testRunner) | 31 if (window.testRunner) |
34 testRunner.notifyDone(); | 32 testRunner.notifyDone(); |
35 }); | 33 }); |
36 }); | 34 }); |
37 } | 35 } |
38 </script> | 36 </script> |
39 </head> | 37 </head> |
40 <body> | 38 <body> |
41 <div id="target2" class="second composited"> | 39 <div id="target2" class="second composited"> |
42 </div> | 40 </div> |
43 <div id="target3" class="squashed"></div> | 41 <div id="target3" class="squashed"></div> |
44 </body> | 42 </body> |
45 </html> | 43 </html> |
OLD | NEW |