web-animation-pseudo-incorrect-name.html (1219B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: creating animation for non-existant view transition pseudo</title> 4 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 <script src="/dom/events/scrolling/scroll_support.js"></script> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 11 <style> 12 div { 13 width: 100px; 14 height: 100px; 15 background: blue; 16 view-transition-name: target; 17 contain: paint; 18 } 19 </style> 20 21 <div id=first></div> 22 23 <script> 24 promise_test(async t => { 25 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 26 await waitForCompositorReady(); 27 return new Promise(async (resolve) => { 28 let transition = document.startViewTransition(); 29 await transition.ready; 30 31 let animation = document.documentElement.animate( 32 { transform: ['translate(100px)', 'translate(200px)'] }, 33 {duration: 100, pseudoElement: '::view-transition-group(bad-target)', fill: "forwards"}); 34 assert_true(!!animation, "animation is created"); 35 resolve(); 36 }); 37 }, "animation created with incorrect name"); 38 </script>