auto-name-from-id-shadow.html (1660B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: auto name should not expose shadow-scoped ID</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="match" href="auto-name-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <style> 8 div { 9 width: 100px; 10 height: 100px; 11 } 12 13 main { 14 display: flex; 15 flex-direction: column; 16 } 17 18 .item { 19 view-transition-name: auto; 20 } 21 22 ::part(p2) { 23 view-transition-name: auto; 24 background: yellow; 25 position: relative; 26 left: 100px; 27 width: 100px; 28 height: 100px; 29 } 30 31 main.switch #item1 { 32 order: 2; 33 } 34 35 #item1 { 36 background: green; 37 } 38 39 html::view-transition { 40 background: rebeccapurple; 41 } 42 43 :root { view-transition-name: none; } 44 html::view-transition-group(*) { 45 animation-timing-function: steps(2, start); 46 animation-play-state: paused; 47 } 48 html::view-transition-group(item2) { 49 outline: 10px solid red; 50 } 51 52 html::view-transition-old(*), 53 html::view-transition-new(*) 54 { animation-play-state: paused; } 55 html::view-transition-old(*) { animation: unset; opacity: 0 } 56 html::view-transition-new(*) { animation: unset; opacity: 1 } 57 58 </style> 59 60 <main> 61 <div class="item" id="item1"></div> 62 <div> 63 <template shadowrootmode="open"> 64 <div class="item" id="item2" part="p2"></div> 65 </template> 66 </div> 67 </main> 68 69 <script> 70 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 71 72 function runTest() { 73 document.startViewTransition(() => { 74 document.querySelector("main").classList.toggle("switch"); 75 }).ready.then(takeScreenshot); 76 } 77 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 78 </script> 79 80 </body>