layout/reftests/web-animations/restyle-after-display-none.html

   1 <!doctype html>
   2 <html class="reftest-wait reftest-no-flush">
   3 <head>
   4 <meta charset=utf-8>
   5 <title>Check for animation restyling on an element's initial restyling after leaving a display:none subtree</title>
   6 <style>
   7 #target {
   8   width: 0px;
   9   height: 100px;
  10   background: green;
  11   display: none;
  12 }
  13 </style>
  14 </head>
  15 <body>
  16 <div id="target"></div>
  17 <script>
  18 // Wait for a steady state before beginning so that style flushes from the
  19 // initial restyling don't interfere with the results.
  20 document.addEventListener('MozReftestInvalidate', () => {
  21   requestAnimationFrame(() => {
  22     // Get target element -- computed style should be display: none by now.
  23     const target = document.getElementById('target');
  24
  25     // Update specified style but don't flush
  26     target.style.display = 'block';
  27
  28     // Trigger an animation on the element.
  29     //
  30     // animate() won't flush styles so we are testing that it still correctly
  31     // marks the element as needing an animation restyle even when it doesn't have
  32     // style data.
  33     target.animate(
  34       { width: ['0px', '100px'] },
  35       { duration: 100 * 1000, easing: 'step-start' }
  36     );
  37
  38     document.documentElement.classList.remove('reftest-wait');
  39   });
  40 });
  41 </script>
  42 </body>
  43 </html>