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