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