modify-style-via-cssom.html (1322B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>View transitions: Modify style via CSSOM</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:bokan@chromium.org"> 6 <link rel="match" href="modify-style-via-cssom-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 #box { 10 width: 100px; 11 height: 100px; 12 background: limegreen; 13 } 14 html::view-transition-group(root) { 15 animation-duration: 300s; 16 } 17 html::view-transition-new(root) { 18 animation: none; 19 opacity: 0; 20 } 21 html::view-transition-old(root) { 22 animation: none; 23 opacity: 1; 24 } 25 </style> 26 <div id="box"></div> 27 28 <script> 29 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 30 31 function rAF() { 32 return new Promise(resolve => requestAnimationFrame(resolve)); 33 } 34 35 async function runTest() { 36 await document.startViewTransition().ready; 37 await rAF(); 38 await rAF(); 39 40 // Once the animation is running, ensure modifying style via CSSOM is 41 // effective. 42 const cssSheet = new CSSStyleSheet(); 43 cssSheet.replaceSync(`::view-transition-old(root) { 44 transform: translateY(100px); 45 }`); 46 document.adoptedStyleSheets = [cssSheet]; 47 48 await rAF(); 49 takeScreenshot(); 50 } 51 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 52 </script> 53 </html>