third_party/WebKit/LayoutTests/fast/css-grid-layout/justify-self-cell.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .grid {
   6     grid-template-columns: 100px 100px;
   7     grid-template-rows: 200px 200px;
   8     width: -webkit-fit-content;
   9 }
  10
  11 .cell {
  12     width: 10px;
  13     height: 20px;
  14 }
  15
  16 .justifySelfAuto {
  17     justify-self: auto;
  18 }
  19
  20 .justifySelfStretch {
  21     justify-self: stretch;
  22 }
  23
  24 .justifySelfStart {
  25     justify-self: start;
  26 }
  27
  28 .justifySelfEnd {
  29     justify-self: end;
  30 }
  31
  32 .justifySelfCenter {
  33     justify-self: center;
  34 }
  35
  36 .justifySelfRight {
  37     justify-self: right;
  38 }
  39
  40 .justifySelfLeft {
  41     justify-self: left;
  42 }
  43
  44 .justifySelfFlexStart {
  45     justify-self: flex-start;
  46 }
  47
  48 .justifySelfFlexEnd {
  49     justify-self: flex-end;
  50 }
  51
  52 .justifySelfSelfStart {
  53     justify-self: self-start;
  54 }
  55
  56 .justifySelfSelfEnd {
  57     justify-self: self-end;
  58 }
  59
  60 .justifyItemsCenter {
  61     justify-items: center;
  62 }
  63 </style>
  64 <script src="../../resources/check-layout.js"></script>
  65 <body onload="checkLayout('.grid')">
  66
  67 <p>This test checks that the justify-self property is applied correctly.</p>
  68
  69 <div style="position: relative" class="constrainedContainer">
  70 <div class="grid" data-expected-width="200" data-expected-height="400">
  71     <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
  72     <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
  73     <div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="190" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
  74     <div class="cell justifySelfCenter secondRowFirstColumn" data-offset-x="45" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
  75     <div class="cell justifySelfRight secondRowSecondColumn" data-offset-x="190" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
  76     <div class="cell justifySelfLeft secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
  77 </div>
  78
  79 <div style="position: relative" class="constrainedContainer">
  80 <div class="grid" data-expected-width="200" data-expected-height="400">
  81     <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
  82     <div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
  83     <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
  84     <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x="190" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
  85 </div>
  86 </div>
  87
  88 <!-- Default justification and initial values. -->
  89 <div style="position: relative">
  90     <div class="grid justifyItemsCenter" data-expected-width="200" data-expected-height="400">
  91         <div class="cell justifySelfAuto firstRowFirstColumn" data-offset-x="45" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
  92         <div class="cell firstRowSecondColumn" data-offset-x="145" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
  93         <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
  94         <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x="190" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
  95     </div>
  96 </div>
  97
  98 <div style="position: relative">
  99     <div class="grid" data-expected-width="200" data-expected-height="400">
 100         <div class="justifySelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
 101         <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
 102         <div class="cell justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
 103         <div class="cell justifySelfEnd secondRowSecondColumn" data-offset-x="190" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
 104     </div>
 105 </div>
 106
 107 <!-- Vertical writing mode. -->
 108 <div style="position: relative" class="constrainedContainer">
 109 <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
 110     <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
 111     <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="390" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div>
 112     <div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="390" data-offset-y="180" data-expected-width="10" data-expected-height="20"></div>
 113     <div class="cell justifySelfCenter secondRowFirstColumn" data-offset-x="190" data-offset-y="40" data-expected-width="10" data-expected-height="20"></div>
 114     <div class="cell justifySelfRight secondRowSecondColumn" data-offset-x="190" data-offset-y="180" data-expected-width="10" data-expected-height="20"></div>
 115     <div class="cell justifySelfLeft secondRowSecondColumn" data-offset-x="190" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div>
 116 </div>
 117
 118 <div style="position: relative" class="constrainedContainer">
 119 <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
 120     <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="10" data-expected-height="20"></div>
 121     <div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div>
 122     <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
 123     <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x="200" data-offset-y="180" data-expected-width="10" data-expected-height="20"></div>
 124 </div>
 125 </div>
 126
 127 <!-- RTL direction. -->
 128 <div style="position: relative" class="constrainedContainer">
 129 <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
 130     <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
 131     <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
 132     <div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
 133     <div class="cell justifySelfCenter secondRowFirstColumn" data-offset-x="145" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
 134     <div class="cell justifySelfRight secondRowSecondColumn" data-offset-x="90" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
 135     <div class="cell justifySelfLeft secondRowSecondColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
 136 </div>
 137
 138 <div style="position: relative" class="constrainedContainer">
 139 <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
 140     <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
 141     <div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
 142     <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="190" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
 143     <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
 144 </div>
 145 </div>
 146
 147 <!-- RTL direction with opposite directions grid container vs grid item. -->
 148 <div style="position: relative" class="constrainedContainer">
 149 <div class="grid" data-expected-width="200" data-expected-height="400">
 150     <div class="justifySelfStretch firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
 151     <div class="cell justifySelfStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
 152     <div class="cell justifySelfEnd firstRowSecondColumn directionRTL" data-offset-x="190" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
 153     <div class="cell justifySelfCenter secondRowFirstColumn directionRTL" data-offset-x="45" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
 154     <div class="cell justifySelfRight secondRowSecondColumn directionRTL" data-offset-x="190" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
 155     <div class="cell justifySelfLeft secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
 156 </div>
 157
 158 <div style="position: relative" class="constrainedContainer">
 159 <div class="grid" data-expected-width="200" data-expected-height="400">
 160     <div class="cell justifySelfFlexEnd firstRowFirstColumn directionRTL" data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
 161     <div class="cell justifySelfFlexStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
 162     <div class="cell justifySelfSelfStart secondRowFirstColumn directionRTL" data-offset-x="90" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
 163     <div class="cell justifySelfSelfEnd secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
 164 </div>
 165 </div>
 166
 167 </body>
 168 </html>