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