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

   1 <!DOCTYPE html>
   2 <html class="reftest-wait">
   3 <title>
   4 Opacity transition and animation overridden by !important rule creates a
   5 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 Opacity0 {
  16   from, to { opacity: 0; }
  17 }
  18 #test {
  19   width: 100px; height: 100px;
  20   background: blue;
  21   opacity: 0 ! important;
  22   transition: opacity 100s steps(1, start);
  23   animation: Opacity0 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).opacity;
  32
  33   // Change the opacity style to 100%.
  34   target.style.setProperty("opacity", "1", "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 opacity style here should be 100%
  38   // specified by the important rule, but we should create a stacking
  39   // context for it because there are animations.
  40
  41   getComputedStyle(target).opacity;
  42   document.documentElement.classList.remove("reftest-wait");
  43 });
  44 </script>