|
1 <!doctype html> |
|
2 <html><head> |
|
3 <title>background-clip interaction with border-radius</title> |
|
4 <style> |
|
5 /* If you fix bug #466572, you can substantially simplify this test |
|
6 case. */ |
|
7 |
|
8 table { table-layout: fixed; width: 550px } |
|
9 td { width: 110px; height: 110px; text-align: center } |
|
10 div.i { |
|
11 z-index: 0; |
|
12 width: 70px; |
|
13 height: 70px; |
|
14 border-style: solid; |
|
15 border-color: green; |
|
16 background-clip: padding-box; |
|
17 background-color: green; |
|
18 } |
|
19 .rA div.i { border-radius: 10px; } |
|
20 .rB div.i { border-radius: 20px; } |
|
21 .rC div.i { border-radius: 30px; } |
|
22 .rD div.i { border-radius: 40px; } |
|
23 .rE div.i { border-radius: 50px; } |
|
24 |
|
25 .wA div.i { border-width: 10px 10px 10px 10px; } |
|
26 .wB div.i { border-width: 20px 20px 20px 20px; } |
|
27 .wC div.i { border-width: 5px 20px 5px 20px; } |
|
28 .wD div.i { border-width: 20px 20px 5px 5px; } |
|
29 .wE div.i { border-width: 5px 10px 15px 20px; } |
|
30 |
|
31 div.o { |
|
32 display: inline-block; |
|
33 position: relative; |
|
34 } |
|
35 img { |
|
36 position: absolute; top: 0; left: 0; |
|
37 z-index: 1; |
|
38 } |
|
39 </style> |
|
40 </head><body> |
|
41 <table> |
|
42 <tr class="wA"> |
|
43 <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wArA.png"></div></td> |
|
44 <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wArB.png"></div></td> |
|
45 <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wArC.png"></div></td> |
|
46 <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wArD.png"></div></td> |
|
47 <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wArE.png"></div></td> |
|
48 </tr> |
|
49 <tr class="wB"> |
|
50 <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrA.png"></div></td> |
|
51 <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrB.png"></div></td> |
|
52 <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrC.png"></div></td> |
|
53 <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrD.png"></div></td> |
|
54 <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrE.png"></div></td> |
|
55 </tr> |
|
56 <tr class="wC"> |
|
57 <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrA.png"></div></td> |
|
58 <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrB.png"></div></td> |
|
59 <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrC.png"></div></td> |
|
60 <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrD.png"></div></td> |
|
61 <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrE.png"></div></td> |
|
62 </tr> |
|
63 <tr class="wD"> |
|
64 <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrA.png"></div></td> |
|
65 <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrB.png"></div></td> |
|
66 <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrC.png"></div></td> |
|
67 <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrD.png"></div></td> |
|
68 <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrE.png"></div></td> |
|
69 </tr> |
|
70 <tr class="wE"> |
|
71 <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wErA.png"></div></td> |
|
72 <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wErB.png"></div></td> |
|
73 <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wErC.png"></div></td> |
|
74 <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wErD.png"></div></td> |
|
75 <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wErE.png"></div></td> |
|
76 </tr> |
|
77 </table> |
|
78 |
|
79 <p>Inside each green shape, there should be no white.</p> |
|
80 |
|
81 </body></html> |