pseudo-element-overflow-clip-with-border-radius.html (1716B)
1 <!-- Test is a derivative of pseudo-element-overflow-hidden.html by mattwoodrow@apple.com --> 2 <!-- Verifies that the border-radius applies after accounting for overflow-clip-margin. --> 3 <!DOCTYPE html> 4 <html class="reftest-wait"> 5 <title>View transitions: overflow:clip with border-radius is respected on pseudo elements</title> 6 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 7 <link rel="author" href="mailto:sukil@mozilla.com"> 8 <link rel="match" href="pseudo-element-overflow-clip-with-border-radius-ref.html"> 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 body { 12 margin: 0px; 13 } 14 div { 15 width: 200px; 16 height: 200px; 17 } 18 #target { 19 width: 200px; 20 height: 200px; 21 background: green; 22 view-transition-name: target; 23 } 24 #inner { 25 position: relative; 26 left: 100px; 27 top: 100px; 28 background: blue; 29 } 30 31 html::view-transition-group(*) { animation-duration: 300s; } 32 html::view-transition-new(*) { animation: unset; opacity: 1; } 33 html::view-transition-old(*) { animation: unset; opacity: 1; } 34 html::view-transition-group(root) { animation: unset; opacity: 0; } 35 html::view-transition { background: pink; } 36 37 html::view-transition-new(target) { 38 overflow:clip; 39 overflow-clip-margin: 30px; 40 border-radius: 30px; 41 } 42 html::view-transition-old(target) { 43 left: 400px; 44 overflow: clip; 45 overflow-clip-margin: 30px; 46 border-radius: 30px; 47 } 48 </style> 49 50 <div id="target"><div id="inner"></div></div> 51 52 <script> 53 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 54 55 async function runTest() { 56 let t = document.startViewTransition(); 57 t.ready.then(takeScreenshot); 58 } 59 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 60 </script> 61 </html>