clip-path-inline-010.html (906B)
1 <!DOCTYPE html> 2 <title>clip-path on inline with padding-box and border-radius</title> 3 <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-padding-box"> 4 <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#typedef-shape-box"> 5 <link rel="match" href="clip-path-inline-010-ref.html"> 6 <meta name="fuzzy" content="maxDifference=0-43; totalPixels=0-319"> 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 margin-left: -8px; 16 border-radius: 58px; 17 clip-path: padding-box; 18 color: green; 19 /* This border draws outside the padding box and should be clipped. */ 20 border: 8px solid red; 21 } 22 </style> 23 <p>Test passes if there is a filled green circle with radius 50px. 24 <div class="container"> 25 <span>X</span> 26 </div>