background-clip-content-box-002.html (697B)
1 <!doctype html> 2 <title>background-clip: content-box with fractional width/position</title> 3 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-clip"> 4 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> 5 <style> 6 .back { 7 background-color: red; 8 width: 100px; 9 display: flex; 10 } 11 12 .left { 13 flex-basis: 50%; 14 border-left: 5px solid green; 15 } 16 17 .right { 18 flex-basis: 50%; 19 border-right: 6px solid green; 20 } 21 22 .left, .right { 23 background-color: green; 24 background-clip: content-box; 25 height: 100px; 26 } 27 </style> 28 <p>Test passes if there is a filled green square.</p> 29 <div class="back"> 30 <div class="left"></div> 31 <div class="right"></div> 32 </div>