OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <html> |
| 3 <body> |
| 4 <p>This test verifies that a clip-path on a div applies correctly to child c
anvases.</p> |
| 5 <p>Below there should be two green squares with yellow borders.</p> |
| 6 <div style="background-color:yellow; width:100px; height:100px;"> |
| 7 <div style="-webkit-clip-path: rectangle(10px, 10px, 80px, 80px); width:
100px; height:100px;"> |
| 8 <canvas id="c1" width="300" height="300"></canvas> |
| 9 </div> |
| 10 </div> |
| 11 <br> |
| 12 <div style="background-color:yellow; width:100px; height:100px;"> |
| 13 <div style="position:relative; left:5px; top:5px; -webkit-clip-path: rec
tangle(5px, 5px, 80px, 80px); width:100px; height:100px;"> |
| 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 </script> |
| 25 </body> |
| 26 </html> |
OLD | NEW |