layout/reftests/webcomponents/input-transition-1.html

   1 <!DOCTYPE html>
   2 <html class="reftest-wait">
   3   <head>
   4   </head>
   5   <body>
   6     <div id="host"></div>
   7     <script>
   8       var host, root;
   9
  10       host = document.getElementById("host");
  11       root = host.attachShadow({mode: 'open'});
  12       root.innerHTML = '<style>input ~ div { background: red; transition: background 100ms; } input:checked ~ div { background: green; }</style><input id="one" type="checkbox"><div style="height: 50px; width: 50px;"></div>';
  13
  14       function tweak() {
  15         var el = root.getElementById("one");
  16         el.checked = true;
  17         el.nextSibling.addEventListener("transitionend", function() {
  18           setTimeout(()=>{document.documentElement.removeAttribute("class")}, 1000); // wait for the checkbox SVG image to load on Android
  19         });
  20       }
  21
  22       window.addEventListener("MozReftestInvalidate", tweak);
  23     </script>
  24   </body>
  25 </html>