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