Index: LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html |
diff --git a/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html b/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..d368973b2198301fbb46831738f841350c85c0fa |
--- /dev/null |
+++ b/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html |
@@ -0,0 +1,135 @@ |
+<!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: 50px 50px; |
+ grid-template-rows: 100px 100px; |
+} |
+ |
+.overflowWidth { |
+ width: 60px; |
+ height: 300px; |
+} |
+ |
+.overflowHeight { |
+ width: 200px; |
+ height: 150px; |
+} |
+ |
+.center { |
+ align-content: center; |
+ justify-content: center; |
+} |
+ |
+.centerSafe { |
+ align-content: center safe; |
+ justify-content: center safe; |
+} |
+ |
+.centerTrue { |
+ align-content: center true; |
+ jusitfy-content: center true; |
+} |
+ |
+.end { |
+ align-content: end; |
+ justify-content: end; |
+} |
+ |
+.endSafe { |
+ align-content: end safe; |
+ justify-content: end safe; |
+} |
+ |
+.endTrue { |
+ align-content: end true; |
+ justify-content: end true; |
+} |
+ |
+</style> |
+</head> |
+<body onload="checkLayout('.grid')"> |
+ |
+<p>This test checks that the 'overflow' keyword is applied correctly for Content Alignment properties.</p> |
+ |
+<div style="position: relative"> |
+ <div class="grid overflowWidth center" data-expected-width="60" data-expected-height="300"> |
+ <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid overflowHeight centerTrue" data-expected-width="200" data-expected-height="150"> |
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid overflowWidth centerSafe" data-expected-width="60" data-expected-height="300"> |
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid overflowHeight centerSafe" data-expected-width="200" data-expected-height="150"> |
+ <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid overflowWidth end" data-expected-width="60" data-expected-height="300"> |
+ <div class="firstRowFirstColumn" data-offset-x="-40" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowFirstColumn" data-offset-x="-40" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="firstRowSecondColumn" data-offset-x="10" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowSecondColumn" data-offset-x="10" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid overflowHeight endTrue" data-expected-width="200" data-expected-height="150"> |
+ <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid overflowWidth endSafe" data-expected-width="60" data-expected-height="300"> |
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> |
+ </div> |
+</div> |
+ |
+<div style="position: relative"> |
+ <div class="grid overflowHeight endSafe" data-expected-width="200" data-expected-height="150"> |
+ <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
+ </div> |
+</div> |
+ |
+</body> |
+</html> |