| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <style> | 2 <style> |
| 3 body { | 3 body { |
| 4 -webkit-transform: translateZ(0); | 4 transform: translateZ(0); |
| 5 } | 5 } |
| 6 #container { | 6 #container { |
| 7 height: 300px; | 7 height: 300px; |
| 8 width: 300px; | 8 width: 300px; |
| 9 background-color: green; | 9 background-color: green; |
| 10 -webkit-transform: translateZ(0); | 10 transform: translateZ(0); |
| 11 } | 11 } |
| 12 | 12 |
| 13 #parent { | 13 #parent { |
| 14 position: absolute; | 14 position: absolute; |
| 15 left: 400px; | 15 left: 400px; |
| 16 width: 300px; | 16 width: 300px; |
| 17 height: 300px; | 17 height: 300px; |
| 18 background-color: green; | 18 background-color: green; |
| 19 -webkit-transform-style: preserve-3d; | 19 -webkit-transform-style: preserve-3d; |
| 20 } | 20 } |
| 21 | 21 |
| 22 #child { | 22 #child { |
| 23 position: absolute; | 23 position: absolute; |
| 24 width: 200px; | 24 width: 200px; |
| 25 height: 200px; | 25 height: 200px; |
| 26 z-index: -2; | 26 z-index: -2; |
| 27 background-color: red; | 27 background-color: red; |
| 28 -webkit-transform: translateZ(0); | 28 transform: translateZ(0); |
| 29 } | 29 } |
| 30 </style> | 30 </style> |
| 31 <body> | 31 <body> |
| 32 <div id="container"> | 32 <div id="container"> |
| 33 <div id="parent"> | 33 <div id="parent"> |
| 34 <div id="child"></div> | 34 <div id="child"></div> |
| 35 </div> | 35 </div> |
| 36 </div> | 36 </div> |
| 37 <script> | 37 <script> |
| 38 if (window.testRunner) | 38 if (window.testRunner) |
| 39 testRunner.waitUntilDone(); | 39 testRunner.waitUntilDone(); |
| 40 | 40 |
| 41 requestAnimationFrame(function() { | 41 requestAnimationFrame(function() { |
| 42 requestAnimationFrame(function() { | 42 requestAnimationFrame(function() { |
| 43 document.getElementById('parent').style.webkitTransformStyle = 'flat'; | 43 document.getElementById('parent').style.webkitTransformStyle = 'flat'; |
| 44 setTimeout(function() { | 44 setTimeout(function() { |
| 45 testRunner.notifyDone(); | 45 testRunner.notifyDone(); |
| 46 }); | 46 }); |
| 47 }); | 47 }); |
| 48 }); | 48 }); |
| 49 </script> | 49 </script> |
| 50 </body> | 50 </body> |
| OLD | NEW |