set-universal-specificity.html (1371B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: universal specificity</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 <link rel="match" href="set-universal-specificity-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 #shared { 10 contain: paint; 11 width: 100px; 12 height: 100px; 13 background: blue; 14 view-transition-name: shared; 15 } 16 17 /* We're verifying what we capture, so just display the old contents for 5 minutes. */ 18 html::view-transition { background: pink; } 19 html::view-transition-group(shared) { animation-duration: 300s; } 20 21 html::view-transition-old(shared) { 22 animation: unset; 23 opacity: 1; 24 border: 10px solid black; 25 } 26 html::view-transition-old(*) { 27 border: 10px solid red; 28 } 29 30 html::view-transition-new(shared) { animation: unset; opacity: 0; } 31 32 html::view-transition-old(root) { animation: unset; opacity: 0; } 33 html::view-transition-new(root) { animation: unset; opacity: 0 } 34 </style> 35 <div id=shared></div> 36 <script> 37 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 38 39 async function runTest() { 40 document.startViewTransition(() => { 41 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 42 }); 43 } 44 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 45 </script>