third_party/WebKit/LayoutTests/fast/layers/no-clipping-overflow-hidden-added-after-transform.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 green transformed square doesn't split out of the purple square.</p>
  29 <div>
  30     <div id="transformed"></div>
  31 </div>
  32 <script>
  33     if (!window.eventSender)
  34         alert("To manually test, hover over the green div. The overflow should be properly clipped.");
  35
  36     document.body.offsetTop; // Force layout. The mouse is not tracked before first layout.
  37     var transformed = document.getElementById("transformed");
  38     transformed.parentNode.setAttribute("id", "overflowHidden");
  39     eventSender.mouseMoveTo(transformed.offsetLeft + 10, transformed.offsetTop + 10);
  40     document.body.offsetTop; // Update layout for hovered state.
  41 </script>
  42 </body>
  43 </html>