1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/reftests/bugs/456219-1c.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,81 @@
1.4 +<!doctype html>
1.5 +<html><head>
1.6 +<title>background-clip interaction with border-radius</title>
1.7 +<style>
1.8 +/* If you fix bug #466572, you can substantially simplify this test
1.9 + case. */
1.10 +
1.11 +table { table-layout: fixed; width: 550px }
1.12 +td { width: 110px; height: 110px; text-align: center }
1.13 +div.i {
1.14 + z-index: 0;
1.15 + width: 70px;
1.16 + height: 70px;
1.17 + border-style: solid;
1.18 + border-color: green;
1.19 + background-clip: padding-box;
1.20 + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaAQMAAAACZtNBAAAAA1BMVEUAgACc+aWRAAAAEklEQVQYGWNgGAWjYBSMgsECAASSAAFZGYSDAAAAAElFTkSuQmCC");
1.21 +}
1.22 +.rA div.i { border-radius: 10px; }
1.23 +.rB div.i { border-radius: 20px; }
1.24 +.rC div.i { border-radius: 30px; }
1.25 +.rD div.i { border-radius: 40px; }
1.26 +.rE div.i { border-radius: 50px; }
1.27 +
1.28 +.wA div.i { border-width: 10px 10px 10px 10px; }
1.29 +.wB div.i { border-width: 20px 20px 20px 20px; }
1.30 +.wC div.i { border-width: 5px 20px 5px 20px; }
1.31 +.wD div.i { border-width: 20px 20px 5px 5px; }
1.32 +.wE div.i { border-width: 5px 10px 15px 20px; }
1.33 +
1.34 +div.o {
1.35 + display: inline-block;
1.36 + position: relative;
1.37 +}
1.38 +img {
1.39 + position: absolute; top: 0; left: 0;
1.40 + z-index: 1;
1.41 +}
1.42 +
1.43 +</style>
1.44 +</head><body>
1.45 +<table>
1.46 +<tr class="wA">
1.47 + <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wArA.png"></div></td>
1.48 + <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wArB.png"></div></td>
1.49 + <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wArC.png"></div></td>
1.50 + <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wArD.png"></div></td>
1.51 + <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wArE.png"></div></td>
1.52 +</tr>
1.53 +<tr class="wB">
1.54 + <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrA.png"></div></td>
1.55 + <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrB.png"></div></td>
1.56 + <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrC.png"></div></td>
1.57 + <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrD.png"></div></td>
1.58 + <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrE.png"></div></td>
1.59 +</tr>
1.60 +<tr class="wC">
1.61 + <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrA.png"></div></td>
1.62 + <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrB.png"></div></td>
1.63 + <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrC.png"></div></td>
1.64 + <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrD.png"></div></td>
1.65 + <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrE.png"></div></td>
1.66 +</tr>
1.67 +<tr class="wD">
1.68 + <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrA.png"></div></td>
1.69 + <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrB.png"></div></td>
1.70 + <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrC.png"></div></td>
1.71 + <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrD.png"></div></td>
1.72 + <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrE.png"></div></td>
1.73 +</tr>
1.74 +<tr class="wE">
1.75 + <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wErA.png"></div></td>
1.76 + <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wErB.png"></div></td>
1.77 + <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wErC.png"></div></td>
1.78 + <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wErD.png"></div></td>
1.79 + <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wErE.png"></div></td>
1.80 +</tr>
1.81 +</table>
1.82 +
1.83 +<p>Inside each green shape, there should be no white.</p>
1.84 +</body></html>
