third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-and-stretch.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <script src="../../resources/check-layout.js"></script>
   6 <style>
   7 body {
   8     margin: 0;
   9 }
  10
  11 .grid {
  12     grid-template-columns: 100px 100px;
  13     grid-template-rows: 200px 200px;
  14     width: -webkit-fit-content;
  15     margin-bottom: 20px;
  16     font: 15px/1 Ahem;
  17 }
  18
  19 .autoMarginsTopBottom {
  20     margin: auto 0px;
  21 }
  22
  23 .autoMarginsRightLeft {
  24     margin: 0px auto;
  25 }
  26
  27 .autoMargins {
  28     margin: auto auto;
  29 }
  30
  31 .onlyWidthSet {
  32     width: 20px;
  33 }
  34
  35 .onlyHeightSet {
  36     height: 40px;
  37 }
  38
  39 .widthAndHeightSet {
  40     width: 20px;
  41     height: 40px;
  42 }
  43 </style>
  44 </head>
  45 <body onload="checkLayout('.grid')">
  46
  47 <p>This test checks that the 'stretch' value is only applied if neither of its margins (in the appropriate axis) are 'auto'.</p>
  48
  49 <div style="position: relative">
  50     <div class="grid" data-expected-width="200" data-expected-height="400">
  51         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">
  52             <div class="widthAndHeightSet"></div>
  53         </div>
  54         <div class="autoMargins firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40">
  55             <div class="widthAndHeightSet"></div>
  56         </div>
  57         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200">
  58             <div class="widthAndHeightSet"></div>
  59         </div>
  60         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40">
  61             <div class="widthAndHeightSet"></div>
  62         </div>
  63     </div>
  64 </div>
  65
  66 <div style="position: relative">
  67     <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
  68         <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100">
  69             <div class="widthAndHeightSet"></div>
  70         </div>
  71         <div class="autoMargins firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40">
  72             <div class="widthAndHeightSet"></div>
  73         </div>
  74         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="100">
  75             <div class="widthAndHeightSet"></div>
  76         </div>
  77         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="40">
  78             <div class="widthAndHeightSet"></div>
  79         </div>
  80     </div>
  81 </div>
  82
  83 <div style="position: relative">
  84     <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
  85         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
  86             <div class="widthAndHeightSet"></div>
  87         </div>
  88         <div class="autoMargins firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40">
  89             <div class="widthAndHeightSet"></div>
  90         </div>
  91         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="100">
  92             <div class="widthAndHeightSet"></div>
  93         </div>
  94         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="40">
  95             <div class="widthAndHeightSet"></div>
  96         </div>
  97     </div>
  98 </div>
  99
 100 <!-- RTL direction -->
 101 <div style="position: relative">
 102     <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
 103         <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200">
 104             <div class="widthAndHeightSet"></div>
 105         </div>
 106         <div class="autoMargins firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40">
 107             <div class="widthAndHeightSet"></div>
 108         </div>
 109         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="200">
 110             <div class="widthAndHeightSet"></div>
 111         </div>
 112         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="40">
 113             <div class="widthAndHeightSet"></div>
 114         </div>
 115     </div>
 116 </div>
 117
 118 <div style="position: relative">
 119     <div class="grid directionRTL verticalRL" data-expected-width="400" data-expected-height="200">
 120         <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100">
 121             <div class="widthAndHeightSet"></div>
 122         </div>
 123         <div class="autoMargins firstRowSecondColumn" data-offset-x="380" data-offset-y="60" data-expected-width="20" data-expected-height="40">
 124             <div class="widthAndHeightSet"></div>
 125         </div>
 126         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="100">
 127             <div class="widthAndHeightSet"></div>
 128         </div>
 129         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="40">
 130             <div class="widthAndHeightSet"></div>
 131         </div>
 132     </div>
 133 </div>
 134
 135 <div style="position: relative">
 136     <div class="grid  directionRTL verticalLR" data-expected-width="400" data-expected-height="200">
 137         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100">
 138             <div class="widthAndHeightSet"></div>
 139         </div>
 140         <div class="autoMargins firstRowSecondColumn" data-offset-x="0" data-offset-y="60" data-expected-width="20" data-expected-height="40">
 141             <div class="widthAndHeightSet"></div>
 142         </div>
 143         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="100">
 144             <div class="widthAndHeightSet"></div>
 145         </div>
 146         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="200" data-offset-y="60" data-expected-width="200" data-expected-height="40">
 147             <div class="widthAndHeightSet"></div>
 148         </div>
 149     </div>
 150 </div>
 151
 152 </body>
 153 </html>