| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <!-- TODO update link --> |
| <link rel="help" href="https://www.w3.org/TR/css-view-transitions-2/"> |
| <title>startViewTransition on document.documentElement</title> |
| <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/"> |
| </head> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <style> |
| :root { |
| view-transition-name: none; |
| } |
| #target { |
| width: 100px; |
| height: 100px; |
| background: blue; |
| contain: paint; |
| view-transition-name: target; |
| } |
| #target.update-1 { |
| height: 150px; |
| } |
| #target.update-2 { |
| height: 200px; |
| } |
| </style> |
| |
| <body> |
| <div id="target"></div> |
| </body> |
| <script> |
| function run_view_transtiion_test(scope1, scope2, message) { |
| promise_test(async t => { |
| let rejected_promise_tally = 0; |
| const target = document.getElementById("target"); |
| assert_implements(document.startViewTransition, |
| "Missing document.startViewTransition"); |
| |
| const verifyAbortedTransition = (promise) => { |
| return promise.then( |
| () => { assert_not_reached('transition aborted') }, |
| (reason) => { |
| assert_true(reason instanceof DOMException); |
| assert_equals(reason.code, DOMException.ABORT_ERR); |
| rejected_promise_tally++; |
| }); |
| }; |
| |
| const vt1 = scope1.startViewTransition(() => { |
| target.className = 'update-1'; |
| }); |
| const vt2 = scope2.startViewTransition(() => { |
| assert_equals(target.className, 'update-1'); |
| target.className = 'update-2'; |
| }); |
| |
| assert_equals(vt1.transitionRoot, document.documentElement); |
| assert_equals(vt2.transitionRoot, document.documentElement); |
| |
| await verifyAbortedTransition(vt1.ready); |
| await vt2.ready; |
| |
| assert_equals(rejected_promise_tally, 1, |
| 'first transition is skipped'); |
| const sizeTransformAnimations = document.getAnimations().filter(a => { |
| return 'height' in a.effect.getKeyframes()[0]; |
| }); |
| assert_equals(sizeTransformAnimations.length, 1); |
| const startingHeight = |
| sizeTransformAnimations[0].effect.getKeyframes()[0].height; |
| |
| assert_equals(startingHeight, '150px', |
| 'Height change applied before capture'); |
| }, message); |
| } |
| |
| run_view_transtiion_test( |
| document, document.documentElement, |
| 'Synchronously starting a view transition on document.documentElement ' + |
| 'skips the previously active document view transition.'); |
| |
| run_view_transtiion_test( |
| document.documentElement, document, |
| 'Synchronously starting a view transition on document skips the ' + |
| 'previously active view transition on document.documentElement.'); |
| |
| </script> |
| </html> |
