src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-overflow-paint-expected.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     div {
   6         height: 300px;
   7         width: 300px;
   8     }
   9     .horizontallyAligned {
  10         float: left;
  11         width: 150px;
  12     }
  13     .grayBox {
  14         background-color: gray;
  15     }
  16     .redBox {
  17         background-color: red;
  18     }
  19     .blueBox {
  20         background-color: blue;
  21     }
  22     .greenBox {
  23         background-color: green;
  24     }
  25     .yellowBox {
  26         background-color: yellow;
  27     }
  28     .orangeBox {
  29         background-color: orange;
  30     }
  31 </style>
  32 </head>
  33 <body>
  34   <table cellpadding="0" cellspacing="0" border="0">
  35     <tr>
  36       <td><div class="grayBox"></div></td>
  37       <td><div class="grayBox"></div></td>
  38       <td><div class="yellowBox"></div></td>
  39       <td><div class="grayBox"></div></td>
  40       <td><div class="grayBox"></div></td>
  41     </tr>
  42     <tr>
  43       <td><div class="grayBox"></div></td>
  44       <td><div class="grayBox"></div></td>
  45       <td><div class="yellowBox" style="height: 200px"></div><div class="grayBox" style="height: 100px"></div></td>
  46       <td><div class="grayBox"></div></td>
  47       <td><div class="grayBox"></div></td>
  48     </tr>
  49     <tr>
  50       <td><div class="blueBox"></div></td>
  51       <td><div class="blueBox horizontallyAligned"></div><div class="grayBox horizontallyAligned"></div></td>
  52       <td><div class="redBox"></div></td>
  53       <td><div class="grayBox horizontallyAligned"></div><div class="orangeBox horizontallyAligned"></div></td>
  54       <td><div class="orangeBox"></div></td>
  55     </tr>
  56     <tr>
  57       <td><div class="grayBox"></div></td>
  58       <td><div class="grayBox"></div></td>
  59       <td><div class="grayBox" style="height: 100px"></div><div class="greenBox" style="height: 200px"></div></td>
  60       <td><div class="grayBox"></div></td>
  61       <td><div class="grayBox"></div></td>
  62     </tr>
  63     <tr>
  64       <td><div class="grayBox"></div></td>
  65       <td><div class="grayBox"></div></td>
  66       <td><div class="greenBox"></div></td>
  67       <td><div class="grayBox"></div></td>
  68       <td><div class="grayBox"></div></td>
  69     </tr>
  70   </table>
  71
  72 </body>
  73 <script>
  74   window.scrollTo(400, 475);
  75 </script>
  76 </html>