third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows.html

   1 <!DOCTYPE html>
   2 <html>
   3 <script src="../../resources/check-layout.js"></script>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .grid {
   7     grid-template-rows: auto auto;
   8     grid-template-columns: auto auto;
   9     width: -webkit-fit-content;
  10 }
  11
  12 .gridItem {
  13     width: 20px;
  14     height: 40px;
  15 }
  16
  17 .marginTop {
  18     margin-top: 20px;
  19 }
  20
  21 .marginBottom {
  22     margin-bottom: 20px;
  23 }
  24
  25 .borderTop {
  26     border-top: 5px solid;
  27 }
  28
  29 .borderBottom {
  30     border-bottom: 5px solid;
  31 }
  32
  33 .paddingTop {
  34     padding-top: 10px;
  35 }
  36
  37 .paddingBottom {
  38     padding-bottom: 10px;
  39 }
  40 </style>
  41 </head>
  42 <body onload="checkLayout('.grid')">
  43
  44 <div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>
  45
  46 <div>
  47     <div class="grid" data-expected-width="40" data-expected-height="120">
  48         <div class="gridItem marginTop firstRowFirstColumn"></div>
  49         <div class="gridItem firstRowSecondColumn"></div>
  50         <div class="gridItem marginBottom secondRowFirstColumn"></div>
  51         <div class="gridItem secondRowSecondColumn"></div>
  52     </div>
  53 </div>
  54
  55 <div>
  56     <div class="grid" data-expected-width="40" data-expected-height="120">
  57         <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
  58         <div class="gridItem firstRowSecondColumn"></div>
  59         <div class="gridItem borderTop borderBottom secondRowFirstColumn"></div>
  60         <div class="gridItem secondRowSecondColumn"></div>
  61     </div>
  62 </div>
  63
  64 <div>
  65     <div class="grid" data-expected-width="40" data-expected-height="120">
  66         <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
  67         <div class="gridItem firstRowSecondColumn"></div>
  68         <div class="gridItem borderTop borderBottom secondRowFirstColumn"></div>
  69         <div class="gridItem secondRowSecondColumn"></div>
  70     </div>
  71 </div>
  72
  73 <div>
  74     <div class="grid" data-expected-width="40" data-expected-height="120">
  75         <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
  76         <div class="gridItem firstRowSecondColumn"></div>
  77         <div class="gridItem paddingBottom secondRowFirstColumn"></div>
  78         <div class="gridItem secondRowSecondColumn"></div>
  79     </div>
  80 </div>
  81
  82 </body>
  83 </html>