layout/reftests/bugs/456219-1c.html@141e0f1194b1
layout/reftests/bugs/456219-1c.html
Wed, 31 Dec 2014 07:16:47 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 07:16:47 +0100
- branch
- TOR_BUG_9701
- changeset 3
- 141e0f1194b1
- permissions
- -rw-r--r--
Revert simplistic fix pending revisit of Mozilla integration attempt.
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. */
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-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaAQMAAAACZtNBAAAAA1BMVEUAgACc+aWRAAAAEklEQVQYGWNgGAWjYBSMgsECAASSAAFZGYSDAAAAAElFTkSuQmCC");
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; }
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; }
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 }
40 </style>
41 </head><body>
42 <table>
43 <tr class="wA">
44 <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wArA.png"></div></td>
45 <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wArB.png"></div></td>
46 <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wArC.png"></div></td>
47 <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wArD.png"></div></td>
48 <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wArE.png"></div></td>
49 </tr>
50 <tr class="wB">
51 <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrA.png"></div></td>
52 <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrB.png"></div></td>
53 <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrC.png"></div></td>
54 <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrD.png"></div></td>
55 <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrE.png"></div></td>
56 </tr>
57 <tr class="wC">
58 <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrA.png"></div></td>
59 <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrB.png"></div></td>
60 <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrC.png"></div></td>
61 <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrD.png"></div></td>
62 <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrE.png"></div></td>
63 </tr>
64 <tr class="wD">
65 <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrA.png"></div></td>
66 <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrB.png"></div></td>
67 <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrC.png"></div></td>
68 <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrD.png"></div></td>
69 <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrE.png"></div></td>
70 </tr>
71 <tr class="wE">
72 <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wErA.png"></div></td>
73 <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wErB.png"></div></td>
74 <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wErC.png"></div></td>
75 <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wErD.png"></div></td>
76 <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wErE.png"></div></td>
77 </tr>
78 </table>
80 <p>Inside each green shape, there should be no white.</p>
81 </body></html>
