span-with-overflowing-text-hidden.html (1469B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: span with overflowing text is rendered correctly</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 <link rel="match" href="span-with-overflowing-text-hidden-ref.html"> 7 8 9 <script src="/common/reftest-wait.js"></script> 10 <script src="/common/rendering-utils.js"></script> 11 <style> 12 #target { 13 view-transition-name: target; 14 background: grey; 15 } 16 .hidden { 17 view-transition-name: hidden; 18 } 19 span { 20 text-shadow: red 2px 5px; 21 visibility: hidden; 22 } 23 24 html::view-transition-group(hidden) { animation-duration: 300s; } 25 html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; } 26 html::view-transition-group(root) { visibility: hidden; } 27 28 html::view-transition-group(target) { 29 animation: unset; 30 } 31 32 html::view-transition-old(target) { 33 animation: unset; 34 opacity: 0; 35 } 36 37 html::view-transition-new(target) { 38 animation: unset; 39 opacity: 1; 40 } 41 42 html::view-transition { 43 background: pink; 44 } 45 </style> 46 47 <div id ="target"> 48 <span>This text should render correctly</span> 49 </div> 50 <div class="hidden"></div> 51 52 <script> 53 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 54 55 async function runTest() { 56 let transition = document.startViewTransition(); 57 transition.ready.then(takeScreenshot); 58 } 59 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 60 </script>