third_party/WebKit/LayoutTests/fast/layers/no-clipping-overflow-hidden-added-after-transition.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 div {
   6     width: 100px;
   7     height: 100px;
   8 }
   9
  10 .overflowHidden {
  11     overflow: hidden;
  12     background: purple;
  13 }
  14
  15 .transformed {
  16     transform: rotate(0deg) translate3d(0, 0, 0);
  17     -webkit-transition: -webkit-transform linear 0s;
  18     background: green;
  19 }
  20
  21 .transformed:hover {
  22     transform: rotate(45deg) translate3d(0, 0, 0);
  23 }
  24 </style>
  25 </head>
  26 <body>
  27 <p> Test for bug <a href="https://bugs.webkit.org/show_bug.cgi?id=83954">83954</a>: REGRESSION(110072): Clipping is not applied on layers that are animated using platform code</p>
  28 <p> This passes if the bottom green transformed square doesn't split out of the purple square.</p>
  29 <div class="overflowHidden" style="height: 200px">
  30     <div class="overflowHidden">
  31         <div class="transformed"></div>
  32     </div>
  33     <div class="overflowHidden">
  34         <div class="transformed"></div>
  35     </div>
  36 </div>
  37 <script>
  38     if (!window.eventSender)
  39         alert("To manually test, hover over the purple divs. The overflow should be properly clipped.");
  40
  41     document.body.offsetTop; // Force layout. The mouse is not tracked before first layout.
  42     var transformed = document.getElementsByClassName("transformed");
  43     eventSender.mouseMoveTo(transformed[0].offsetLeft + 10, transformed[0].offsetTop + 10);
  44     eventSender.mouseMoveTo(transformed[1].offsetLeft + 10, transformed[1].offsetTop + 10);
  45     document.body.offsetTop; // Update layout for hovered state.
  46 </script>
  47 </body>
  48 </html>