layout/reftests/css-transitions/stacking-context-transform-lose-to-animation.html

   1 <!DOCTYPE html>
   2 <html class="reftest-wait">
   3 <title>
   4 Transform transition and animation overridden by !important rule create
   5 a stacking context
   6 </title>
   7 <style>
   8 span {
   9   height: 100px;
  10   width: 100px;
  11   position: fixed;
  12   background: green;
  13   top: 50px;
  14 }
  15 @keyframes Transform100px {
  16   from, to { transform: translateX(100px); }
  17 }
  18 #test {
  19   width: 100px; height: 100px;
  20   background: blue;
  21   transform: translateX(200px) ! important;
  22   transition: transform 100s steps(1, start);
  23   animation: Transform100px 100s;
  24 }
  25 </style>
  26 <span></span>
  27 <div id="test"></div>
  28 <script>
  29 window.addEventListener("load", () => {
  30   var target = document.getElementById("test");
  31   getComputedStyle(target).transform;
  32
  33   // Change the transform style to 'none'.
  34   target.style.setProperty("transform", "none", "important");
  35   // Important style is changed but there is a CSS animation,
  36   // so transition won't be visible and the CSS animation is overridden by
  37   // the !important rule. As a result transform style here should be 'none'
  38   // specified by the important rule, but we should create a stacking
  39   // context for it because there are animations.
  40
  41   getComputedStyle(target).transform;
  42   document.documentElement.classList.remove("reftest-wait");
  43 });
  44 </script>