| <!DOCTYPE html> |
| <html id=html class="reftest-wait"> |
| <title>Verifies that 'color' stays the color it's transitioned to on :root</title> |
| <link rel="help" href="https://crbug.com/1087188"> |
| <link rel="match" href="root-color-transition-ref.html"> |
| <script src="support/helper.js"></script> |
| <h1 id=h1>PASS if green</h1> |
| <style> |
| html { |
| color: red; |
| transition: color 1s linear; |
| } |
| html.green { |
| color: green; |
| } |
| </style> |
| <script> |
| getComputedStyle(h1).color; |
| |
| async function run() { |
| let transitionEnd = new Promise((resolve) => { |
| html.addEventListener('transitionend', resolve); |
| }); |
| // Trigger transition: |
| html.classList.toggle('green'); |
| |
| const transition = html.getAnimations()[0]; |
| await transition.ready; |
| await waitForFrame(); |
| |
| // Expedite transition, but let it finish naturally. |
| transition.currentTime = transition.effect.getTiming().duration - 1; |
| await transitionEnd; |
| |
| await waitForFrame(); |
| } |
| |
| run().then(() => html.classList.toggle('reftest-wait')); |
| </script> |
| </html> |