third_party/WebKit/LayoutTests/compositing/squashing/animation-repaint-crash.html

   1 <!DOCTYPE html>
   2 <style>
   3 .container {
   4     position: absolute;
   5     z-index: 1;
   6     width: 300px;
   7     height: 300px;
   8 }
   9 .middle {
  10     /* Must be a stacking context */
  11     position: absolute;
  12     z-index: 0;
  13     width: 200px;
  14     height: 200px;
  15     overflow: hidden;
  16 }
  17 .inner {
  18     opacity: 0;
  19     transition: opacity .1s;
  20     background-color: lightblue;
  21     height: 100px;
  22     width: 100px;
  23 }
  24 .sibling {
  25     position: absolute;
  26     top: 0px;
  27     height: 300px;
  28     width: 300px;
  29     opacity: 0;
  30     transition: opacity 0.1s;
  31     transition-delay: 0.2s;
  32     background-color: lightgreen;
  33 }
  34
  35 .loaded .inner {
  36     opacity: 1;
  37 }
  38 .loaded .sibling {
  39     opacity: 1;
  40 }
  41 </style>
  42 <div class="container">
  43   <div class="middle">
  44     <div class="inner"></div>
  45   </div>
  46 </div>
  47 <div class="sibling"></div>
  48 <script>
  49 if (window.testRunner) {
  50     testRunner.dumpAsText();
  51     testRunner.waitUntilDone();
  52 }
  53 getComputedStyle(document.body).color;
  54 document.body.classList.add("loaded")
  55 document.querySelector(".sibling").addEventListener("transitionend", function() {
  56     if (window.testRunner)
  57         testRunner.notifyDone();
  58 });
  59 </script>
  60 This test passes if it doesn't crash.