masklayer-1.html 993 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="utf-8">
  4. <title>Moving a layer in a box with a rounded clip shouldn't invalidate.</title>
  5. <style>
  6. #outer {
  7. position: absolute;
  8. top: 50px;
  9. left: 50px;
  10. width: 300px;
  11. height: 200px;
  12. background-color: #DDD;
  13. overflow: hidden;
  14. border-radius: 10px;
  15. }
  16. #animatedLeft {
  17. position: absolute;
  18. top: 50px;
  19. left: 40px;
  20. box-model: border-box;
  21. border: 1px solid lime;
  22. width: 100px;
  23. height: 100px;
  24. }
  25. </style>
  26. <body>
  27. <div id="outer">
  28. <div id="animatedLeft" class="reftest-no-paint"></div>
  29. </div>
  30. <script>
  31. var animatedLeft = document.getElementById("animatedLeft");
  32. function doTest() {
  33. animatedLeft.style.left = "100px";
  34. document.documentElement.removeAttribute("class");
  35. }
  36. // Layerize #animatedLeft
  37. animatedLeft.offsetLeft;
  38. animatedLeft.style.left = "60px";
  39. animatedLeft.offsetLeft;
  40. animatedLeft.style.left = "40px";
  41. animatedLeft.offsetLeft;
  42. document.addEventListener("MozReftestInvalidate", doTest, false);
  43. </script>