contain-view-transition-name-discovery.html (3192B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <!-- TODO update link --> 6 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-2/"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>Contain and name discovery</title> 9 </head> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <style> 13 #outer { 14 view-transition-name: outer; 15 } 16 17 #inner { 18 view-transition-name: inner; 19 } 20 21 .containment { 22 contain: view-transition; 23 } 24 </style> 25 <body> 26 <div id="outer"> 27 <div id="inner"></div> 28 </div> 29 </body> 30 <script> 31 function capturedNames() { 32 const regexp = /\((?<name>[^\)]+)/; 33 const names = document.getAnimations() 34 .map(a => a.effect.pseudoElement) 35 .map(name => name.match(regexp).groups.name); 36 return [...new Set(names)].sort(); 37 } 38 39 promise_test(async t => { 40 const outer = document.getElementById('outer'); 41 const inner = document.getElementById('inner'); 42 43 let vt = document.startViewTransition(() => {}); 44 await vt.ready; 45 assert_array_equals( 46 capturedNames(), ['inner', 'outer', 'root'], 47 'Retrieve all names in absence of contain style'); 48 vt.skipTransition(); 49 50 document.documentElement.classList.toggle('containment'); 51 vt = document.startViewTransition(() => {}); 52 await vt.ready; 53 assert_array_equals( 54 capturedNames(), ['inner', 'outer', 'root'], 55 'contain on the root element does not affect tag discovery'); 56 vt.skipTransition(); 57 58 outer.classList.toggle('containment'); 59 vt = document.startViewTransition(() => {}); 60 await vt.ready; 61 assert_array_equals( 62 capturedNames(), ['root'], 63 'contain on outer element blocks tag discovery in subtree'); 64 vt.skipTransition(); 65 66 vt = outer.startViewTransition(() => {}); 67 await vt.ready; 68 assert_array_equals( 69 capturedNames(), ['inner', 'outer'], 70 'contain on the scoped element includes self'); 71 vt.skipTransition(); 72 73 vt = inner.startViewTransition(() => {}); 74 await vt.ready; 75 assert_array_equals( 76 capturedNames(), ['inner'], 77 'contain on ancestor of the scoped element does not affect tag ' + 78 'discovery'); 79 vt.skipTransition(); 80 81 outer.classList.toggle('containment'); 82 inner.classList.toggle('containment'); 83 vt = document.startViewTransition(() => {}); 84 await vt.ready; 85 assert_array_equals( 86 capturedNames(), ['outer', 'root'], 87 'contain on inner element still permits tag discovery of ancestor ' + 88 'elements'); 89 vt.skipTransition(); 90 91 vt = outer.startViewTransition(() => {}); 92 await vt.ready; 93 assert_array_equals( 94 capturedNames(), ['outer'], 95 'contain on inner element limits tag discovery on outer element'); 96 vt.skipTransition(); 97 98 vt = inner.startViewTransition(() => {}); 99 await vt.ready; 100 assert_array_equals( 101 capturedNames(), ['inner'], 102 'contain permits tag discovery on scoped element'); 103 vt.skipTransition(); 104 }, 'Contain: view-transition blocks propagation of name discovery.'); 105 </script> 106 </html>