class-specificity.html (1576B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: class 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="class-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 view-transition-class: sharedclass1 sharedclass2; 16 } 17 18 /* We're verifying what we capture, so just display the old contents for 5 minutes. */ 19 html::view-transition { background: pink; } 20 html::view-transition-group(shared) { animation-duration: 300s; } 21 22 html::view-transition-old(shared) { 23 animation: unset; 24 opacity: 1; 25 border: 10px solid red; 26 } 27 html::view-transition-old(*.sharedclass1.sharedclass2) { 28 border: 10px solid yellow; 29 } 30 31 html::view-transition-old(*.sharedclass1) { 32 border: 10px solid green; 33 } 34 35 html::view-transition-old(*) { 36 border: 10px solid orange; 37 } 38 39 html::view-transition-new(shared) { animation: unset; opacity: 0; } 40 41 html::view-transition-old(root) { animation: unset; opacity: 0; } 42 html::view-transition-new(root) { animation: unset; opacity: 0 } 43 </style> 44 <div id=shared></div> 45 <script> 46 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 47 48 async function runTest() { 49 document.startViewTransition(() => { 50 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 51 }); 52 } 53 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 54 </script>