third_party/WebKit/LayoutTests/inspector/layers/layer-compositing-reasons.html

   1 <html>
   2 <head>
   3 <style>
   4 @-webkit-keyframes rotate {
   5         0%  { transform: rotate(0deg); }
   6         50%  { transform: rotate(180deg); }
   7         100%  { transform: rotate(360deg); }
   8 }
   9
  10 </style>
  11 <script src="../../http/tests/inspector/inspector-test.js"></script>
  12 <script src="../../http/tests/inspector/layers-test.js"></script>
  13 <script>
  14 if (window.internals) {
  15     document.addEventListener('webkitAnimationStart', function() {
  16         internals.pauseAnimations(0);
  17     });
  18 }
  19
  20 function test()
  21 {
  22     function dumpCompositingReasons(layer, callback)
  23     {
  24         layer.requestCompositingReasons(function(reasons)
  25         {
  26             var node = layer.nodeForSelfOrAncestor();
  27             var label = WebInspector.DOMPresentationUtils.fullQualifiedSelector(node, false);
  28             InspectorTest.addResult("Compositing reasons for " + label + ": " + reasons.sort().join(","));
  29             if (callback)
  30                 callback();
  31         });
  32     }
  33
  34     var idsToTest = [
  35         "transform3d",
  36         "iframe",
  37         "backface-visibility",
  38         "animation",
  39         "transformWithCompositedDescendants",
  40         "opacityWithCompositedDescendants",
  41         "reflectionWithCompositedDescendants",
  42         "perspective",
  43         "preserve3d"
  44     ];
  45
  46     function onGotLayers()
  47     {
  48         dumpCompositingReasons(InspectorTest.layerTreeModel.layerTree().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));
  52     }
  53     InspectorTest.requestLayers(onGotLayers);
  54 }
  55
  56 </script>
  57 </head>
  58 <body onload="runTest()">
  59 <div id="transform3d" style="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="transform: rotate(10deg)">
  64     <div style="transform: translateZ(100px);">
  65     </div>
  66 </div>
  67 <div id="opacityWithCompositedDescendants" style="opacity: 0.5">
  68     <div style="transform: translateZ(100px);">opacity
  69     </div>
  70 </div>
  71 <div id="reflectionWithCompositedDescendants" style="-webkit-box-reflect: below">
  72     <div style="transform: translateZ(100px);">reflected
  73     </div>
  74 </div>
  75 <div id="perspective" style="-webkit-perspective: 500;">
  76     <div style="transform: translateZ(100px);">perspective
  77     </div>
  78 </div>
  79 <div id="preserve3d" style="-webkit-transform-style: preserve-3d;">
  80     <div style="transform: translateZ(100px);">preserve3d
  81     </div>
  82 </div>
  83 </body>
  84 </html>