intersecting-clipping-1-ref.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 > div { 16 border-radius: 20px / 40px; 17 overflow: hidden; 18 width: 200px; 19 height: 100px; 20 background: lime; 21 } 22 23 #contain > div.spot { 24 position: absolute; 25 height: 1px; 26 width: 1px; 27 } 28 29 </style> 30 <div id="contain"> 31 <div><div></div></div> 32 33 <!-- 34 This is just like the test, except we'll add a bunch of spots in various 35 places that should match the background of what they're on. 36 --> 37 38 <div class="spot" style="top: 1px; left: 15px; background: white"></div> 39 <div class="spot" style="top: 14px; left: 2px; background: white"></div> 40 <div class="spot" style="top: 18px; left: 0px; background: white"></div> 41 <div class="spot" style="top: 82px; left: 198px; background: white"></div> 42 <div class="spot" style="top: 97px; left: 180px; background: white"></div> 43 <div class="spot" style="top: 2px; left: 180px; background: white"></div> 44 <div class="spot" style="top: 17px; left: 198px; background: white"></div> 45 <div class="spot" style="top: 97px; left: 19px; background: white"></div> 46 <div class="spot" style="top: 82px; left: 1px; background: white"></div> 47 48 <div class="spot" style="top: 10px; left: 8px; background: lime"></div> 49 <div class="spot" style="top: 89px; left: 8px; background: lime"></div> 50 <div class="spot" style="top: 10px; left: 191px; background: lime"></div> 51 <div class="spot" style="top: 89px; left: 191px; background: lime"></div> 52 53 </div>