layout/reftests/css-transitions/stacking-context-transform-wins-over-important-style.html

   1 <!DOCTYPE html>
   2 <html class="reftest-wait">
   3 <title>
   4 Transform transition winning over !important rule creates a stacking context
   5 </title>
   6 <style>
   7 span {
   8   height: 100px;
   9   width: 100px;
  10   position: fixed;
  11   background: green;
  12   top: 50px;
  13 }
  14 #test {
  15   width: 100px; height: 100px;
  16   background: blue;
  17   /*
  18    * On the compositor we use a previous vsync time stamp rather than the
  19    * current time stamp, as a result sometimes transition may be still in
  20    * before phase after waiting a frame. To compose the same transform value
  21    * regardless of whether the transition is in before or active phase, we use
  22    * steps(1, end) here.
  23    */
  24   transition: transform 100s steps(1, end);
  25   transform: none ! important;
  26 }
  27 </style>
  28 <span></span>
  29 <div id="test"></div>
  30 <script>
  31 window.addEventListener("load", () => {
  32   var target = document.getElementById("test");
  33   getComputedStyle(target).transform;
  34
  35   target.style.setProperty("transform", "translateX(200px)", "important");
  36   getComputedStyle(target).transform;
  37
  38   document.documentElement.classList.remove("reftest-wait");
  39 });
  40 </script>