layout/reftests/bugs/456219-1a.html

   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>