pseudo-computed-style-stays-in-sync-with-new-element.html (1399B)
1 <!DOCTYPE html> 2 <html> 3 <title>View transitions: computed style on pseudo-element stays in sync with the DOM element</title> 4 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <style> 11 div { 12 width: 100px; 13 height: 100px; 14 background: blue; 15 view-transition-name: target; 16 contain: paint; 17 } 18 </style> 19 20 <div id=first></div> 21 22 <script> 23 promise_test(async t => { 24 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 25 return new Promise(async (resolve, reject) => { 26 let transition = document.startViewTransition(); 27 await transition.updateCallbackDone; 28 await transition.ready; 29 30 let viewbox = window.getComputedStyle( 31 document.documentElement, "::view-transition-new(target)").objectViewBox; 32 assert_in_array(viewbox, ["none", undefined], "incorrect viewbox " + viewbox); 33 34 first.style.filter = "blur(5px)"; 35 viewbox = window.getComputedStyle( 36 document.documentElement, "::view-transition-new(target)").objectViewBox; 37 assert_in_array(viewbox, ["none", undefined], "incorrect viewbox " + viewbox); 38 39 transition.finished.then(resolve, reject); 40 }); 41 }, "computed style on pseudo-element stays in sync with the DOM element"); 42 </script>