third_party/WebKit/LayoutTests/compositing/overflow/descendant-with-clip-path.html

   1 <!DOCTYPE HTML>
   2 <style>
   3 #scroller {
   4     overflow: scroll;
   5     height: 300px;
   6     width: 300px;
   7     background-color: red;
   8 }
   9
  10 #inner {
  11     height: 1000px;
  12     width: 250px;
  13     background-color: blue;
  14 }
  15
  16 #fixed {
  17     position: fixed;
  18     height: 100px;
  19     width: 100px;
  20     background-color: green;
  21     top: 400px;
  22     left: 100px;
  23 }
  24 </style>
  25 <div id="scroller">
  26     <div id="inner">
  27         <div id="fixed"></div>
  28     </div>
  29 </div>
  30 <script>
  31 function isUsingCompositedScrolling(layer) {
  32     if (layer.bounds[1] == 1000)
  33         return true;
  34     if (layer.children) {
  35         for (var i = 0; i < layer.children.length; i++) {
  36             if (isUsingCompositedScrolling(layer.children[i]))
  37                 return true;
  38         }
  39     }
  40     return false;
  41 }
  42
  43 if (window.internals)
  44     window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
  45
  46 if (window.testRunner) {
  47     window.testRunner.dumpAsText();
  48     window.testRunner.waitUntilDone();
  49 }
  50
  51 var result = "";
  52
  53 onload = function() {
  54     if (window.internals) {
  55         result += "No clip path descendant (should be using composited scrolling): ";
  56         if (isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document))))
  57             result += "Pass.\n";
  58         else
  59             result += "Fail.\n"
  60     }
  61     document.getElementById("inner").style.webkitClipPath = "polygon(40px 550px,432px 302px,409px 237px,46px 156px)";
  62     requestAnimationFrame(function() {
  63         if (window.internals) {
  64             result += "Has clip path descendant (should not be using composited scrolling): ";
  65             if (!isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document))))
  66                 result += "Pass.\n";
  67             else
  68                 result += "Fail.\n"
  69         }
  70
  71         if (window.testRunner) {
  72             window.testRunner.setCustomTextOutput(result);
  73             window.testRunner.notifyDone();
  74         }
  75     });
  76 };
  77 </script>