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..6b40f223ec042eff653caef20a6e405bc5d3fd70 |
--- /dev/null |
+++ b/LayoutTests/fast/css-grid-layout/grid-align-justify-stretch.html |
@@ -0,0 +1,230 @@ |
+<!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; |
+} |
+ |
+.cell { |
Julien - ping for review
2014/10/08 15:21:47
Let's try better names:
cell -> widthAndHeightSet
jfernandez
2014/10/12 22:40:27
Done.
|
+ width: 20px; |
+ height: 40px; |
+} |
+ |
+.cell1 { |
+ width: 20px; |
+} |
+ |
+.cell2 { |
+ height: 40px; |
+} |
+ |
+.item { |
+ width: 8px; |
+ height: 16px; |
+ background: black; |
+} |
+ |
+.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="cell alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell1 alignSelfStretch justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> |
+ <div class="cell2 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="cell alignSelfStart justifySelfStretch firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell1 alignSelfStart justifySelfStretch secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="0"></div> |
+ <div class="cell2 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="alignSelfStretch justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
+ <div class="cell alignSelfStretch justifySelfStretch firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell1 alignSelfStretch justifySelfStretch secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> |
+ <div class="cell2 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="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell1 secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> |
+ <div class="cell2 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="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell1 secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="0"></div> |
+ <div class="cell2 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="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell1 secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> |
+ <div class="cell2 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="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell1 secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> |
+ <div class="cell2 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="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell1 secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> |
+ <div class="cell2 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="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell1 secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> |
+ <div class="cell2 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="cell firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell1 secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> |
+ <div class="cell2 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="cell firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell1 secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div> |
+ <div class="cell2 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="cell firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell1 secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div> |
+ <div class="cell2 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> |