Index: LayoutTests/fast/css-grid-layout/grid-align-justify-stretch.html |
diff --git a/LayoutTests/fast/css-grid-layout/grid-align-justify-stretch.html b/LayoutTests/fast/css-grid-layout/grid-align-justify-stretch.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..05df82ec13323f15bd47d63697f7020e37f2aabc |
--- /dev/null |
+++ b/LayoutTests/fast/css-grid-layout/grid-align-justify-stretch.html |
@@ -0,0 +1,241 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+<link href="resources/grid.css" rel="stylesheet"> |
+<script src="../../resources/check-layout.js"></script> |
+<style> |
+body { |
+ margin: 0; |
+} |
+ |
+.grid { |
+ grid-template-columns: 100px 100px; |
+ grid-template-rows: 200px 200px; |
+ width: -webkit-fit-content; |
+ margin-bottom: 20px; |
+} |
+ |
+.widthAndHeightSet { |
+ width: 20px; |
+ height: 40px; |
+} |
+ |
+.onlyWidthSet { |
+ width: 20px; |
+} |
+ |
+.onlyHeightSet { |
+ height: 40px; |
+} |
+ |
+.maxHeight { |
+ max-height: 160px; |
+} |
+ |
+.maxWidth { |
+ max-width: 90px; |
+} |
+ |
+.alignItemsAuto { |
+ align-items: auto; |
+} |
+ |
+.alignItemsStretch { |
+ align-items: stretch; |
+} |
+ |
+.alignItemsStart { |
+ align-items: start; |
+} |
+ |
+.alignSelfAuto { |
+ align-self: auto; |
+} |
+ |
+.alignSelfStretch { |
+ align-self: stretch; |
+} |
+ |
+.alignSelfStart { |
+ align-self: start; |
+} |
+ |
+.justifyItemsAuto { |
+ justify-items: auto; |
+} |
+ |
+.justifyItemsStretch { |
+ justify-items: stretch; |
+} |
+ |
+.justifyItemsStart { |
+ justify-items: start; |
+} |
+ |
+.justifySelfAuto { |
+ justify-self: auto; |
+} |
+ |
+.justifySelfStretch { |
+ justify-self: stretch; |
+} |
+ |
+.justifySelfStart { |
+ justify-self: start; |
+} |
+</style> |
+</head> |
+<body onload="checkLayout('.grid')"> |
+ |
+<p>This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties.</p> |
+ |
+<div style="position: relative"> |
+ <div class="grid" data-expected-width="200" data-expected-height="400"> |
+ <div class="alignSelfStretch justifySelfStart firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
+ <div class="widthAndHeightSet alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="onlyWidthSet alignSelfStretch justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> |
+ <div class="onlyHeightSet alignSelfStretch justifySelfStart secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid" data-expected-width="200" data-expected-height="400"> |
+ <div class="alignSelfStart justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div> |
+ <div class="widthAndHeightSet alignSelfStart justifySelfStretch firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="onlyWidthSet alignSelfStart justifySelfStretch secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="0"></div> |
+ <div class="onlyHeightSet alignSelfStart justifySelfStretch secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid" data-expected-width="200" data-expected-height="400"> |
+ <div class="maxHeight alignSelfStretch justifySelfStart firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div> |
+ <div class="widthAndHeightSet alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="onlyWidthSet alignSelfStretch justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> |
+ <div class="maxWidth onlyHeightSet alignSelfStretch justifySelfStart secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="90" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid" data-expected-width="200" data-expected-height="400"> |
+ <div class="alignSelfStretch justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
+ <div class="widthAndHeightSet alignSelfStretch justifySelfStretch firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="onlyWidthSet alignSelfStretch justifySelfStretch secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> |
+ <div class="onlyHeightSet alignSelfStretch justifySelfStretch secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid alignItemsStretch justifyItemsStart" data-expected-width="200" data-expected-height="400"> |
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
+ <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> |
+ <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid alignItemsStart justifyItemsStretch" data-expected-width="200" data-expected-height="400"> |
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div> |
+ <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="0"></div> |
+ <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400"> |
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
+ <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> |
+ <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid alignItemsAuto justifyItemsAuto" data-expected-width="200" data-expected-height="400"> |
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
+ <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> |
+ <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid" data-expected-width="200" data-expected-height="400"> |
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
+ <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> |
+ <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid" data-expected-width="200" data-expected-height="400"> |
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
+ <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200"></div> |
+ <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200"></div> |
+ </div> |
+</div> |
+ |
+<!-- RTL direction (it should not affect the block-flow direction). --> |
+<div style="position: relative"> |
+ <div class="grid directionRTL alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400"> |
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
+ <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> |
+ <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<!-- RTL direction (it should not affect the block-flow) with opposite directions grid container vs grid item. --> |
+<div style="position: relative"> |
+ <div class="grid alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400"> |
+ <div class="firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
+ <div class="widthAndHeightSet firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="onlyWidthSet secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> |
+ <div class="onlyHeightSet secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<!-- Vertical RL writing mode. --> |
+<div style="position: relative"> |
+ <div class="grid verticalRL alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200"> |
+ <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> |
+ <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div> |
+ <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid verticalRL" data-expected-width="400" data-expected-height="200"> |
+ <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> |
+ <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div> |
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> |
+ <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div> |
+ </div> |
+</div> |
+ |
+<!-- Vertical LR writing mode. --> |
+<div style="position: relative"> |
+ <div class="grid verticalLR alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200"> |
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> |
+ <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div> |
+ <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid verticalLR" data-expected-width="400" data-expected-height="200"> |
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> |
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div> |
+ <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> |
+ <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div> |
+ </div> |
+</div> |
+ |
+</body> |
+</html> |