third_party/WebKit/LayoutTests/compositing/layer-creation/remove-clipping-layer-with-no-children.html

   1 <!DOCTYPE html>
   2 <style>
   3 #parent {
   4   overflow:hidden;
   5   width: 400px;
   6   height: 400px;
   7   background-color: pink;
   8   transform: translateZ(0)
   9 }
  10
  11 #child {
  12   opacity: 0.9;
  13   width: 200px;
  14   height: 200px;
  15   background-color: salmon;
  16   transition: opacity 5ms;
  17 }
  18
  19 .fade #child {
  20   visibility: hidden;
  21   opacity: 0.2;
  22 }
  23 </style>
  24 <div id="parent">
  25     <div id="child"></div>
  26 </div>
  27 <pre></pre>
  28 <script>
  29 if (window.testRunner) {
  30     testRunner.dumpAsText();
  31     testRunner.waitUntilDone();
  32 }
  33
  34 requestAnimationFrame(function() {
  35   requestAnimationFrame(function() {
  36     document.getElementById('parent').classList.add('fade');
  37     document.getElementById('child').addEventListener('transitionend', function() {
  38       if (window.testRunner) {
  39         document.getElementsByTagName('pre')[0].textContent = window.internals.layerTreeAsText(document);
  40         setTimeout(function() {
  41           testRunner.notifyDone();
  42         });
  43       }
  44     });
  45   });
  46 });
  47 </script>