OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <html> |
| 3 <body> |
| 4 <p>This test verifies that nested divs with intersecting clip-paths apply co
rrectly to canvas elements</p> |
| 5 <p>Below there should be two identical green squares with a yellow border to
the top and left, and a blue border to the bottom and right.</p> |
| 6 <div style="background-color:blue; width:100px; height:100px;"> |
| 7 <div style="background-color:yellow; -webkit-clip-path: rectangle(0px, 0
px, 80px, 80px); width:100px; height:100px;"> |
| 8 <div style="background-color:red; -webkit-clip-path: rectangle(20px,
20px, 80px, 80px); width:100px; height:100px;"> |
| 9 <canvas id="c1" width="100" height="100"></canvas> |
| 10 </div> |
| 11 </div> |
| 12 </div> |
| 13 <br> |
| 14 <div style="background-color:blue; width:100px; height:100px;"> |
| 15 <div style="background-color:yellow; -webkit-clip-path: rectangle(0px, 0
px, 80px, 80px); width:100px; height:100px; -webkit-transform: translateZ(0);"> |
| 16 <div style="background-color:red; -webkit-clip-path: rectangle(20px,
20px, 80px, 80px); width:100px; height:100px; -webkit-transform: translateZ(0);
"> |
| 17 <canvas id="c2" width="100" height="100"></canvas> |
| 18 </div> |
| 19 </div> |
| 20 </div> |
| 21 <script> |
| 22 var ctx1 = document.getElementById("c1").getContext("2d"); |
| 23 ctx1.fillStyle = 'green'; |
| 24 ctx1.fillRect(0,0, 100, 100); |
| 25 var ctx2 = document.getElementById("c2").getContext("2d"); |
| 26 ctx2.fillStyle = 'green'; |
| 27 ctx2.fillRect(0,0, 100, 100); |
| 28 </script> |
| 29 </body> |
| 30 </html> |
OLD | NEW |