intersecting-clipping-1-refi.html (1610B)
1 <!DOCTYPE HTML> 2 <title>Test for clipping of border-radius</title> 3 <style> 4 #contain { 5 width: 200px; 6 height: 100px; 7 position: relative; 8 } 9 #contain > div { 10 overflow: hidden; 11 width: 200px; 12 height: 100px; 13 border-radius: 50px / 20px; 14 } 15 #contain > div > img { 16 border-radius: 20px / 40px; 17 width: 200px; 18 height: 100px; 19 } 20 21 #contain > div.spot { 22 position: absolute; 23 height: 1px; 24 width: 1px; 25 } 26 27 </style> 28 <div id="contain"> 29 <div><img src="../pixel-rounding/lime-25x25.png" alt=""></div> 30 31 <!-- 32 This is just like the test, except we'll add a bunch of spots in various 33 places that should match the background of what they're on. 34 --> 35 36 <div class="spot" style="top: 1px; left: 15px; background: white"></div> 37 <div class="spot" style="top: 14px; left: 2px; background: white"></div> 38 <div class="spot" style="top: 18px; left: 0px; background: white"></div> 39 <div class="spot" style="top: 82px; left: 198px; background: white"></div> 40 <div class="spot" style="top: 97px; left: 180px; background: white"></div> 41 <div class="spot" style="top: 2px; left: 180px; background: white"></div> 42 <div class="spot" style="top: 17px; left: 198px; background: white"></div> 43 <div class="spot" style="top: 97px; left: 19px; background: white"></div> 44 <div class="spot" style="top: 82px; left: 1px; background: white"></div> 45 46 <div class="spot" style="top: 10px; left: 8px; background: lime"></div> 47 <div class="spot" style="top: 89px; left: 8px; background: lime"></div> 48 <div class="spot" style="top: 10px; left: 191px; background: lime"></div> 49 <div class="spot" style="top: 89px; left: 191px; background: lime"></div> 50 51 </div>