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