escaped-name.html (1273B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: escaped names</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="escaped-name-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 :root { view-transition-name: none; } 10 #first { view-transition-name: first\!; } 11 #second { view-transition-name: secon\'d; } 12 #third { view-transition-name: third\000021; } 13 .box { 14 background: green; 15 width: 100px; 16 height: 100px; 17 position: relative; 18 } 19 ::view-transition-group(*), 20 ::view-transition-new(*), 21 ::view-transition-old(*), 22 ::view-transition-image-pair(*) { 23 animation-play-state: paused; 24 } 25 .box.after { 26 background: red; 27 left: 100px; 28 } 29 </style> 30 31 <div class="box" id="first"></div> 32 <div class="box" id="second"></div> 33 <div class="box" id="third"></div> 34 35 <script> 36 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 37 38 async function runTest() { 39 document.startViewTransition(() => { 40 first.classList.add("after"); 41 second.classList.add("after"); 42 third.classList.add("after"); 43 }).ready.then(takeScreenshot); 44 } 45 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 46 </script>