| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <html> |
| 3 <body> |
| 4 <p>This test verifies that a canvas element inside a div with overflow clip
and border radii is properly clipped.</p> |
| 5 <p>Below there should be a green square with rounded corners nested in a yel
low square.</p> |
| 6 <div style="background-color:yellow; width:100px; height:100px;"> |
| 7 <div style="border-radius:20px; overflow:hidden; width:100px; height:100
px;"> |
| 8 <canvas id="c1" width="300" height="300"></canvas> |
| 9 </div> |
| 10 </div> |
| 11 <p>Below there should be a green square with rounded corners symmetrically i
nset in a yellow square.</p> |
| 12 <div style="background-color:yellow; width:100px; height:100px;"> |
| 13 <div style="position:relative; top:10px; left:10px; border-radius:20px;
overflow:hidden; width:80px; height:80px;"> |
| 14 <canvas id="c2" width="300" height="300"></canvas> |
| 15 </div> |
| 16 </div> |
| 17 <script> |
| 18 var ctx1 = document.getElementById("c1").getContext("2d"); |
| 19 ctx1.fillStyle = 'green'; |
| 20 ctx1.fillRect(0,0, 300, 300); |
| 21 var ctx2 = document.getElementById("c2").getContext("2d"); |
| 22 ctx2.fillStyle = 'green'; |
| 23 ctx2.fillRect(0,0, 300, 300); |
| 24 if (window.testRunner) { |
| 25 testRunner.dumpAsText(true); |
| 26 } |
| 27 </script> |
| 28 </body> |
| 29 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 59613010:
Fix propagation of clip-path and border-radius clipping to child layers (Closed)
Base URL: svn://svn.chromium.org/blink/trunk