capture.html (4874B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <!-- TODO update link --> 7 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-2/"> 8 <title>Scope view transition capture</title> 9 </head> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/css/css-view-transitions/support/common.js"></script> 13 <style type="text/css"> 14 .parent { 15 background-color: lightblue; 16 height: 200px; 17 width: 200px; 18 view-transition-name: parent; 19 position: relative; 20 } 21 22 .child { 23 background-color: blue; 24 height: 100px; 25 width: 100px; 26 view-transition-name: child; 27 position: absolute; 28 left: 50px; 29 top: 50px; 30 } 31 32 .sibling { 33 background-color: gray; 34 margin-top: 20px; 35 height: 200px; 36 width: 200px; 37 view-transition-name: sibling; 38 } 39 40 /* view transition pseudos */ 41 ::view-transition-group(*), 42 ::view-transition-image-pair(*) { 43 animation: unset; 44 } 45 46 ::view-transition-old(*) { 47 animation: -ua-view-transition-fade-out 1s paused; 48 } 49 50 ::view-transition-new(*) { 51 animation: -ua-view-transition-fade-in 1s paused; 52 } 53 54 </style> 55 <body> 56 <div id="container"></div> 57 </body> 58 <script> 59 function createDiv(test, id, className) { 60 const element = document.createElement('div'); 61 element.id = id; 62 element.className = className; 63 test.add_cleanup(() => { 64 element.remove(); 65 }); 66 return element; 67 } 68 69 function setupCaptureTest(test) { 70 const container = document.getElementById('container'); 71 container.innerHTML = ''; 72 const target1 = createDiv(test, 'target1', 'parent'); 73 const target2 = createDiv(test, 'target2', 'child'); 74 const target3 = createDiv(test, 'target3', 'sibling'); 75 container.appendChild(target1); 76 target1.appendChild(target2); 77 container.appendChild(target3); 78 test.add_cleanup(() => { 79 document.getAnimations().forEach(a => a.cancel()); 80 }); 81 } 82 83 promise_test(async t => { 84 setupCaptureTest(t); 85 const target = document.querySelector('.parent'); 86 assert_true(!!target.startViewTransition, 87 'Missing scoped view transition support'); 88 89 await target.startViewTransition({}).ready; 90 91 const expected_pseudos = [ 92 '::view-transition-new(child)', 93 '::view-transition-new(parent)', 94 '::view-transition-old(child)', 95 '::view-transition-old(parent)' 96 ]; 97 assert_animation_pseudos(target, expected_pseudos, 98 'animations on target element pseudos'); 99 assert_animation_pseudos(document.documentElement, [], 100 'no animations targeting pseudos on root'); 101 assert_animation_pseudos(document.querySelector('.sibling'), [], 102 'no animations targetting pseudos on sibling'); 103 assert_animation_pseudos(document.querySelector('.child'), [], 104 'no animations targetting pseudos on child'); 105 106 assert_animation_names('::view-transition-old(child)', 107 ['-ua-view-transition-fade-out'], 108 'fade out animation on old child'); 109 assert_animation_names('::view-transition-old(parent)', 110 ['-ua-view-transition-fade-out'], 111 'fade out animation on old parent'); 112 assert_animation_names('::view-transition-new(child)', 113 ['-ua-view-transition-fade-in'], 114 'fade in animation on new child'); 115 assert_animation_names('::view-transition-new(parent)', 116 ['-ua-view-transition-fade-in'], 117 'fade in animation on new parent'); 118 }, 'View-transition pseudo elements created for correct element'); 119 120 promise_test(async t => { 121 setupCaptureTest(t); 122 const parent = document.querySelector('.parent'); 123 const sibling = document.querySelector('.sibling'); 124 assert_true(!!parent.startViewTransition, 125 'Missing scoped view transition support'); 126 127 await parent.startViewTransition({}).ready; 128 await sibling.startViewTransition({}).ready; 129 130 const expected_parent_pseudos = [ 131 '::view-transition-new(child)', 132 '::view-transition-new(parent)', 133 '::view-transition-old(child)', 134 '::view-transition-old(parent)' 135 ]; 136 const expected_sibling_pseudos = [ 137 '::view-transition-new(sibling)', 138 '::view-transition-old(sibling)' 139 ]; 140 assert_animation_pseudos(parent, expected_parent_pseudos, 141 'animations on parent element pseudos'); 142 assert_animation_pseudos(sibling, expected_sibling_pseudos, 143 'animations on sibling element pseudos'); 144 }, 'Capture with concurrent scoped view-transitions'); 145 146 </script> 147 </html>