Index: LayoutTests/fast/css-grid-layout/grid-align.html |
diff --git a/LayoutTests/fast/css-grid-layout/grid-align.html b/LayoutTests/fast/css-grid-layout/grid-align.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..c9417079da8d43e157494ea8986d7ad83b7ba66f |
--- /dev/null |
+++ b/LayoutTests/fast/css-grid-layout/grid-align.html |
@@ -0,0 +1,151 @@ |
+<!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; |
+} |
+ |
+.cell { |
+ width: 10px; |
+ height: 20px; |
+} |
+ |
+.alignSelfStretch { |
+ align-self: stretch; |
+} |
+ |
+.alignSelfStart { |
+ align-self: start; |
+} |
+ |
+.alignSelfEnd { |
+ align-self: end; |
+} |
+ |
+.alignSelfCenter { |
+ align-self: center; |
+} |
+ |
+.alignSelfRight { |
+ align-self: right; |
+} |
+ |
+.alignSelfLeft { |
+ align-self: left; |
+} |
+ |
+.alignSelfFlexStart { |
+ align-self: flex-start; |
+} |
+ |
+.alignSelfFlexEnd { |
+ align-self: flex-end; |
+} |
+ |
+.alignSelfSelfStart { |
+ align-self: self-start; |
+} |
+ |
+.alignSelfSelfEnd { |
+ align-self: self-end; |
+} |
+ |
+ |
+</style> |
+</head> |
+<body onload="checkLayout('.grid')"> |
+ |
+<p>This test checks that the align-self property is applied correctly.</p> |
+ |
+<div style="position: relative" class="constrainedContainer"> |
+<div class="grid" data-expected-width="200" data-expected-height="400"> |
+ <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div> |
+ <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100" data-offset-y="180" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0" data-offset-y="290" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
+</div> |
+ |
+ |
+<div style="position: relative" class="constrainedContainer"> |
+<div class="grid" data-expected-width="200" data-expected-height="400"> |
+ <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="380" data-expected-width="10" data-expected-height="20"></div> |
+</div> |
+ |
+ |
+<!-- Vertical writing mode. --> |
+<div style="position: relative" class="constrainedContainer"> |
+<div class="grid verticalRL" data-expected-width="400" data-expected-height="200"> |
+ <!-- FIXME: Why is offset-x 400? --> |
+ <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="400" data-offset-y="0" data-expected-width="0" data-expected-height="100"></div> |
+ <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="390" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="95" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="190" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> |
+</div> |
+ |
+<div style="position: relative" class="constrainedContainer"> |
+<div class="grid verticalLR" data-expected-width="400" data-expected-height="200"> |
+ <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="390" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> |
+</div> |
+</div> |
+ |
+<!-- RTL direction. --> |
+<div style="position: relative" class="constrainedContainer"> |
+<div class="grid directionRTL" data-expected-width="200" data-expected-height="400"> |
+ <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div> |
+ <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100" data-offset-y="180" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0" data-offset-y="290" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
+</div> |
+ |
+<div style="position: relative" class="constrainedContainer"> |
+<div class="grid directionRTL" data-expected-width="200" data-expected-height="400"> |
+ <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="380" data-expected-width="10" data-expected-height="20"></div> |
+</div> |
+</div> |
+ |
+<!-- RTL direction with opposite directions grid container vs grid item. --> |
+<div style="position: relative" class="constrainedContainer"> |
+<div class="grid" data-expected-width="200" data-expected-height="400"> |
+ <div class="alignSelfStretch firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div> |
+ <div class="cell alignSelfStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfEnd firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="180" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfCenter secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="290" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfRight secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfLeft secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
+</div> |
+ |
+<div style="position: relative" class="constrainedContainer"> |
+<div class="grid" data-expected-width="200" data-expected-height="400"> |
+ <div class="cell alignSelfFlexEnd firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfFlexStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfSelfStart secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
+ <div class="cell alignSelfSelfEnd secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="380" data-expected-width="10" data-expected-height="20"></div> |
+</div> |
+</div> |
+ |
+</body> |
+</html> |