clip-path-inline-008.html (970B)
1 <!DOCTYPE html> 2 <title>clip-path on inline with margin-box and border-radius</title> 3 <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-margin-box"> 4 <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#typedef-shape-box"> 5 <link rel="match" href="clip-path-inline-008-ref.html"> 6 <meta name="fuzzy" content="maxDifference=0-14; totalPixels=0-240"> 7 <meta content="ahem" name="flags"> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <style> 10 .container { 11 font: 50px/1 Ahem; 12 line-height: 50px; 13 } 14 .container > span { 15 margin: 25px; 16 border-radius: 50px; 17 clip-path: margin-box; 18 color: green; 19 /* This outline draws far outside the margin box and should be partially clipped. */ 20 outline: 200px solid green; 21 /* Disables margin collapsing. */ 22 float: left; 23 } 24 </style> 25 <p>Test passes if there is a filled green circle with radius 50px. 26 <div class="container"> 27 <span>X</span> 28 </div>