overflow-clip-margin-border-radius.html (1226B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: overflow-clip-margin with border-radius</title> 4 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#overflow-clip-margin"> 6 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#shadow-shape"> 7 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-radius"> 8 <link rel="match" href="overflow-clip-margin-border-radius-ref.html"> 9 <meta name=fuzzy content="maxDifference=0-1;totalPixels=0-7"> 10 <meta name="assert" content=" 11 “The overflow clip edge is shaped in the corners exactly the same way 12 as an outer box-shadow with a spread radius of the same cumulative offset 13 from the box’s border edge.” 14 15 Note that the exact shape is under discussion (*), this test only asserts 16 that the shapes are equal. 17 (*) https://github.com/w3c/csswg-drafts/issues/7103 18 "> 19 <style> 20 #outer { 21 width: 50px; 22 height: 50px; 23 overflow: clip; 24 border-radius: 25px; 25 overflow-clip-margin: 100px; 26 margin: 125px; 27 } 28 #inner { 29 width: 50px; 30 height: 50px; 31 box-shadow: black 0 0 0 100px; 32 background: black; 33 } 34 </style> 35 <div id="outer"> 36 <div id="inner"></div> 37 </div>