Index: LayoutTests/fast/css-grid-layout/grid-justify-content.html |
diff --git a/LayoutTests/fast/css-grid-layout/grid-justify-content.html b/LayoutTests/fast/css-grid-layout/grid-justify-content.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..76537aef20ecb01026da768eeb317990746457f6 |
--- /dev/null |
+++ b/LayoutTests/fast/css-grid-layout/grid-justify-content.html |
@@ -0,0 +1,365 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+<link href="resources/grid.css" rel="stylesheet"> |
+<script src="../../resources/check-layout.js"></script> |
+<style> |
+body { |
+ margin: 0; |
+} |
+ |
+.grid { |
+ grid: 50px 50px / 100px 100px; |
+ position: relative; |
+ width: 200px; |
+ height: 300px; |
+} |
+ |
+.verticalGrid { |
+ width: 300px; |
+ height: 200px; |
+} |
+ |
+.cell { |
+ width: 20px; |
+ height: 40px; |
+} |
+ |
+.justifyContentBaseline { |
+ justify-content: baseline; |
+} |
+ |
+.justifyContentLastBaseline { |
+ justify-content: last-baseline; |
+} |
+ |
+.justifyContentStart { |
+ justify-content: start; |
+} |
+ |
+.justifyContentEnd { |
+ justify-content: end; |
+} |
+ |
+.justifyContentCenter { |
+ justify-content: center; |
+} |
+ |
+.justifyContentLeft { |
+ justify-content: left; |
+} |
+ |
+.justifyContentRight { |
+ justify-content: right; |
+} |
+ |
+.justifyContentFlexStart { |
+ justify-content: flex-start; |
+} |
+ |
+.justifyContentFlexEnd { |
+ justify-content: flex-end; |
+} |
+ |
+.justifyContentEndTrue { |
+ justify-content: end true; |
+} |
+ |
+.justifyContentCenterTrue { |
+ justify-content: center true; |
+} |
+ |
+.justifyContentRightSafe { |
+ justify-content: right safe; |
+} |
+ |
+.justifyContentLeftTrue { |
+ justify-content: left true; |
+} |
+ |
+.justifyContentFlexStartTrue { |
+ justify-content: flex-start true; |
+} |
+ |
+.justifyContentFlexEndSafe { |
+ justify-content: flex-end safe; |
+} |
+ |
+.justifyContentSpaceBetween { |
+ justify-content: space-between; |
+} |
+ |
+.justifyContentSpaceAround { |
+ justify-content: space-around; |
+} |
+ |
+.justifyContentSpaceEvenly { |
+ justify-content: space-evenly; |
+} |
+ |
+.justifyContentStretch { |
+ justify-content: stretch; |
+} |
+ |
+.justifyContentSpaceBetweenLeft { |
+ justify-content: space-between left; |
+} |
+ |
+.justifyContentSpaceAroundCenter { |
+ justify-content: space-around center; |
+} |
+ |
+.justifyContentSpaceEvenlyRight { |
+ justify-content: space-evenly right; |
+} |
+ |
+.justifyContentStretchStart { |
+ justify-content: stretch start; |
+} |
+ |
+</style> |
+</head> |
+<body onload="checkLayout('.grid')"> |
+ |
+<p>This test checks that the justify-content property is applied correctly when using content-position values.</p> |
+ |
+<div style="position: relative"> |
+ <div class="grid justifyContentCenter" data-expected-width="200" data-expected-height="300"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid justifyContentLeft" data-expected-width="200" data-expected-height="300"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid justifyContentRight" data-expected-width="200" data-expected-height="300"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid justifyContentStart" data-expected-width="200" data-expected-height="300"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid justifyContentEnd" data-expected-width="200" data-expected-height="300"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid justifyContentFlexStart" data-expected-width="200" data-expected-height="300"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid justifyContentFlexEnd" data-expected-width="200" data-expected-height="300"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<!-- content-distribution values always fallback to content-position. --> |
+<div style="position: relative"> |
+ <div class="grid justifyContentSpaceBetween" data-expected-width="200" data-expected-height="300"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid justifyContentSpaceAround" data-expected-width="200" data-expected-height="300"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid justifyContentSpaceEvenly" data-expected-width="200" data-expected-height="300"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid justifyContentStretch" data-expected-width="200" data-expected-height="300"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid justifyContentSpaceBetweenLeft" data-expected-width="200" data-expected-height="300"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid justifyContentSpaceAroundCenter" data-expected-width="200" data-expected-height="300"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid justifyContentSpaceEvenlyRight" data-expected-width="200" data-expected-height="300"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid justifyContentStretchStart" data-expected-width="200" data-expected-height="300"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<!-- Default alignment and initial values. --> |
+<div style="position: relative"> |
+ <div class="grid" data-expected-width="200" data-expected-height="300"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<!-- Vertical RL writing mode. --> |
+<div style="position: relative"> |
+ <div class="grid verticalGrid verticalRL justifyContentCenter" data-expected-width="300" data-expected-height="200"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid verticalGrid verticalRL justifyContentLeft" data-expected-width="300" data-expected-height="200"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid verticalGrid verticalRL justifyContentRight" data-expected-width="300" data-expected-height="200"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid verticalGrid verticalRL justifyContentStart" data-expected-width="300" data-expected-height="200"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid verticalGrid verticalRL justifyContentEnd" data-expected-width="300" data-expected-height="200"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y="150" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="150" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<!-- Vertical LR writing mode. --> |
+<div style="position: relative"> |
+ <div class="grid verticalGrid verticalLR justifyContentCenter" data-expected-width="300" data-expected-height="200"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid verticalGrid verticalLR justifyContentLeft" data-expected-width="300" data-expected-height="200"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid verticalGrid verticalLR justifyContentRight" data-expected-width="300" data-expected-height="200"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid verticalGrid verticalLR justifyContentStart" data-expected-width="300" data-expected-height="200"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid verticalGrid verticalLR justifyContentEnd" data-expected-width="300" data-expected-height="200"> |
+ <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y="150" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
+ <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="150" data-expected-width="20" data-expected-height="40"></div> |
+ </div> |
+</div> |
+ |
+</body> |
+</html> |