4 @-webkit-keyframes rotate {
5 0% { -webkit-transform: rotate(0deg); }
6 50% { -webkit-transform: rotate(180deg); }
7 100% { -webkit-transform: rotate(360deg); }
11 <script src="../http/tests/inspector/inspector-test.js"></script>
12 <script src="../http/tests/inspector/layers-test.js"></script>
14 if (window.internals) {
15 document.addEventListener('webkitAnimationStart', function() {
16 internals.pauseAnimations(0);
22 function dumpCompositingReasons(layer, callback)
24 layer.requestCompositingReasons(function(reasons)
26 var node = WebInspector.domAgent.nodeForId(layer.nodeIdForSelfOrAncestor());
27 var label = WebInspector.DOMPresentationUtils.fullQualifiedSelector(node, false);
28 InspectorTest.addResult("Compositing reasons for " + label + ": " + reasons.sort().join(","));
37 "backface-visibility",
39 "transformWithCompositedDescendants",
40 "opacityWithCompositedDescendants",
41 "reflectionWithCompositedDescendants",
46 function onGotLayers()
48 dumpCompositingReasons(InspectorTest._layerTreeModel.contentRoot());
49 for (var i = 0; i < idsToTest.length - 1; ++i)
50 dumpCompositingReasons(InspectorTest.findLayerByNodeIdAttribute(idsToTest[i]));
51 dumpCompositingReasons(InspectorTest.findLayerByNodeIdAttribute(idsToTest[idsToTest.length - 1]), InspectorTest.completeTest.bind(InspectorTest));
53 InspectorTest.requestLayers(onGotLayers);
58 <body onload="runTest()">
59 <div id="transform3d" style="-webkit-transform: translateZ(100px);">translated</div>
60 <iframe id="iframe" src="resources/composited-iframe.html"></iframe>
61 <div id="backface-visibility" style="-webkit-backface-visibility: hidden">backface hidden</div>
62 <div id="animation" style="width: 50px; height: 50px; -webkit-animation-name: rotate; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 5s;">animated</div>
63 <div id="transformWithCompositedDescendants" style="-webkit-transform: rotate(10deg)">
64 <div style="-webkit-transform: translateZ(100px);">
67 <div id="opacityWithCompositedDescendants" style="opacity: 0.5">
68 <div style="-webkit-transform: translateZ(100px);">opacity
71 <div id="reflectionWithCompositedDescendants" style="-webkit-box-reflect: below">
72 <div style="-webkit-transform: translateZ(100px);">reflected
75 <div id="perspective" style="-webkit-perspective: 500;">
76 <div style="-webkit-transform: translateZ(100px);">perspective
79 <div id="preserve3d" style="-webkit-transform-style: preserve-3d;">
80 <div style="-webkit-transform: translateZ(100px);">preserve3d