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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     .grid {
   6         display: grid;
   7         grid-template-rows: repeat(5, 300px);
   8         grid-template-columns: repeat(5, 300px);
   9         width: -webkit-fit-content;
  10         background-color: gray;
  11     }
  12
  13     .overflowingHorizontalGridItemBlue {
  14         background-color: blue;
  15         height: 100%;
  16         width: 450px;
  17     }
  18
  19     .overflowingHorizontalGridItemOrange {
  20         background-color: orange;
  21         height: 100%;
  22         width: 450px;
  23     }
  24
  25     .overflowingVerticalGridItemGreen {
  26         background-color: green;
  27         height: 500px;
  28         width: 100%;
  29     }
  30
  31     .overflowingVerticalGridItemYellow {
  32         background-color: yellow;
  33         height: 500px;
  34         width: 100%;
  35     }
  36     .gridItem {
  37         background-color: red;
  38         width: 100%;
  39         height: 100%;
  40     }
  41
  42 </style>
  43 </head>
  44 <body>
  45
  46 <div class="grid">
  47   <div class="overflowingVerticalGridItemGreen" style="grid-column: 3; grid-row: 1; margin-bottom: -200px;"></div>
  48   <div class="overflowingVerticalGridItemYellow" style="grid-column: 3; grid-row: 1; margin-bottom: -200px;"></div>
  49
  50   <div class="overflowingVerticalGridItemYellow" style="grid-column: 3; grid-row: 5; margin-top: -200px;"></div>
  51   <div class="overflowingVerticalGridItemGreen" style="grid-column: 3; grid-row: 5; margin-top: -200px;"></div>
  52
  53   <div class="gridItem" style="grid-column: 3; grid-row: 3;"></div>
  54
  55   <div class="overflowingHorizontalGridItemOrange" style="grid-column: 1; grid-row: 3; margin-right: -150px;"></div>
  56   <div class="overflowingHorizontalGridItemBlue" style="grid-column: 1; grid-row: 3; margin-right: -150px;"></div>
  57
  58   <div class="overflowingHorizontalGridItemBlue" style="grid-column: 5; grid-row: 3; margin-left: -150px;"></div>
  59   <div class="overflowingHorizontalGridItemOrange" style="grid-column: 5; grid-row: 3; margin-left: -150px;"></div>
  60
  61 </div>
  62
  63
  64 </body>
  65 <script>
  66   window.scrollTo(400, 475);
  67 </script>
  68 </html>