effect-value-opacity-replaced-effect-in-shadow-root.html (961B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset=utf-8> 5 <title>The effect value of consecutive animations targeting 'opacity' in a shadow root</title> 6 <link rel="help" href="https://drafts.csswg.org/web-animations/"> 7 <link rel="match" href="effect-value-opacity-replaced-effect-in-shadow-root-ref.html"> 8 </head> 9 <body> 10 <custom-element></custom-element> 11 <script> 12 'use strict'; 13 14 (async function () { 15 const customElement = document.querySelector('custom-element'); 16 const shadowRoot = customElement.attachShadow({ mode: 'open' }); 17 shadowRoot.innerHTML = `<div style="width: 100px; height: 100px; background-color: green"></div>`; 18 const target = shadowRoot.firstElementChild; 19 20 await target.animate({ opacity: [1, 0] }, { duration: 10, fill: 'both' }).finished; 21 await target.animate({ opacity: [0, 1] }, { duration: 10, fill: 'both' }).finished; 22 document.documentElement.classList.remove("reftest-wait"); 23 })(); 24 </script> 25 </body> 26 </html>