| <html> |
| <head> |
| <style> |
| @-webkit-keyframes rotate { |
| 0% { transform: rotate(0deg); } |
| 50% { transform: rotate(180deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| </style> |
| <script src="../../http/tests/inspector/inspector-test.js"></script> |
| <script src="../../http/tests/inspector/layers-test.js"></script> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| if (window.internals) { |
| document.addEventListener('webkitAnimationStart', function() { |
| internals.pauseAnimations(0); |
| }); |
| } |
| |
| function test() |
| { |
| function dumpCompositingReasons(layer, callback) |
| { |
| layer.requestCompositingReasons(function(reasons) |
| { |
| var node = layer.nodeForSelfOrAncestor(); |
| var label = WebInspector.DOMPresentationUtils.fullQualifiedSelector(node, false); |
| InspectorTest.addResult("Compositing reasons for " + label + ": " + reasons.sort().join(",")); |
| if (callback) |
| callback(); |
| }); |
| } |
| |
| var idsToTest = [ |
| "transform3d", |
| "iframe", |
| "backface-visibility", |
| "animation", |
| "transformWithCompositedDescendants", |
| "opacityWithCompositedDescendants", |
| "reflectionWithCompositedDescendants", |
| "perspective", |
| "preserve3d" |
| ]; |
| |
| function onGotLayers() |
| { |
| dumpCompositingReasons(InspectorTest.layerTreeModel().layerTree().contentRoot()); |
| for (var i = 0; i < idsToTest.length - 1; ++i) |
| dumpCompositingReasons(InspectorTest.findLayerByNodeIdAttribute(idsToTest[i])); |
| dumpCompositingReasons(InspectorTest.findLayerByNodeIdAttribute(idsToTest[idsToTest.length - 1]), InspectorTest.completeTest.bind(InspectorTest)); |
| } |
| InspectorTest.requestLayers(onGotLayers); |
| } |
| |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <div id="transform3d" style="transform: translateZ(100px);">translated</div> |
| <iframe id="iframe" src="resources/composited-iframe.html"></iframe> |
| <div id="backface-visibility" style="-webkit-backface-visibility: hidden">backface hidden</div> |
| <div id="animation" style="width: 50px; height: 50px; -webkit-animation-name: rotate; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 5s;">animated</div> |
| <div id="transformWithCompositedDescendants" style="transform: rotate(10deg)"> |
| <div style="transform: translateZ(100px);"> |
| </div> |
| </div> |
| <div id="opacityWithCompositedDescendants" style="opacity: 0.5"> |
| <div style="transform: translateZ(100px);">opacity |
| </div> |
| </div> |
| <div id="reflectionWithCompositedDescendants" style="-webkit-box-reflect: below"> |
| <div style="transform: translateZ(100px);">reflected |
| </div> |
| </div> |
| <div id="perspective" style="-webkit-perspective: 500;"> |
| <div style="transform: translateZ(100px);">perspective |
| </div> |
| </div> |
| <div id="preserve3d" style="-webkit-transform-style: preserve-3d;"> |
| <div style="transform: translateZ(100px);">preserve3d |
| </div> |
| </div> |
| </body> |
| </html> |
