Index: LayoutTests/fast/css-grid-layout/grid-initialize-span-one-items.html |
diff --git a/LayoutTests/fast/css-grid-layout/grid-initialize-span-one-items.html b/LayoutTests/fast/css-grid-layout/grid-initialize-span-one-items.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..c2955c9ae54d760d81587ba9a5af25885e2d87d3 |
--- /dev/null |
+++ b/LayoutTests/fast/css-grid-layout/grid-initialize-span-one-items.html |
@@ -0,0 +1,88 @@ |
+<!DOCTYPE html> |
+<head> |
+<link href="resources/grid.css" rel="stylesheet"/> |
+<style> |
+ .grid { |
+ font: 10px/1 Ahem; |
+ } |
+ .gridAutoAndAuto { |
+ grid-template-columns: auto auto; |
+ } |
+ .gridFixedMinContentFixedMaxContent { |
+ grid-template-columns: minmax(50px, min-content) minmax(40px, max-content); |
+ } |
+ .gridMaxContentAndAuto { |
+ grid-template-columns: max-content auto; |
+ } |
+ .gridMinContentAndAuto { |
+ grid-template-columns: min-content auto; |
+ } |
+</style> |
+<script src="../../resources/js-test.js"></script> |
+</head> |
+<body> |
+<div class="grid gridAutoAndAuto" id="gridAutoAndAuto"> |
+ <div class="firstRowFirstColumn">X</div> |
+ <div class="firstRowBothColumn">XXX XX XXX</div> |
+</div> |
+ |
+<div class="grid gridAutoAndAuto" id="gridAutoAndAutoReversed"> |
+ <div class="firstRowSecondColumn">X</div> |
+ <div class="firstRowBothColumn">XXX XX XXX</div> |
+</div> |
+ |
+<div class="grid gridFixedMinContentFixedMaxContent" id="gridFixedMinContentFixedMaxContent"> |
+ <div class="sizedToGridArea firstRowFirstColumn"></div> |
+ <div class="firstRowBothColumn">XXX XX XXX</div> |
+</div> |
+ |
+<div class="grid gridFixedMinContentFixedMaxContent" id="gridFixedMinContentFixedMaxContentTwoEmptyChildren"> |
+ <div class="sizedToGridArea firstRowFirstColumn"></div> |
+ <div class="sizedToGridArea firstRowSecondColumn"></div> |
+ <div class="firstRowBothColumn">XXX XX XXX</div> |
+</div> |
+ |
+<div class="grid gridFixedMinContentFixedMaxContent" id="gridFixedMinContentFixedMaxContentFixedSizeChild"> |
+ <div class="firstRowFirstColumn">XXXXXX</div> |
+ <div class="firstRowBothColumn">XXX XX XXX</div> |
+</div> |
+ |
+<div class="grid gridMaxContentAndAuto" id="gridMaxContentAndAuto"> |
+ <div class="firstRowFirstColumn">X</div> |
+ <div class="firstRowBothColumn">XXX XX XXX</div> |
+</div> |
+ |
+<div class="grid gridMaxContentAndAuto" id="gridMaxContentAndAutoReversed"> |
+ <div class="firstRowSecondColumn">X</div> |
+ <div class="firstRowBothColumn">XXX XX XXX</div> |
+</div> |
+ |
+<div class="grid gridMinContentAndAuto" id="gridMinContentAndAuto"> |
+ <div class="firstRowFirstColumn">X</div> |
+ <div class="firstRowBothColumn">XXX XX XXX</div> |
+</div> |
+ |
+<div class="grid gridMinContentAndAuto" id="gridMinContentAndAutoReversed"> |
+ <div class="firstRowSecondColumn">X</div> |
+ <div class="firstRowBothColumn">XXX XX XXX</div> |
+</div> |
+ |
+<script> |
+function testGridColumnsValues(id, computedColumnValue) |
+{ |
+ shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-columns')", computedColumnValue); |
+} |
+ |
+description('This test checks that content sized tracks are initialized using non-spanning grid items.'); |
+ |
+testGridColumnsValues("gridAutoAndAuto", "10px 90px"); |
+testGridColumnsValues("gridAutoAndAutoReversed", "90px 10px"); |
+testGridColumnsValues("gridFixedMinContentFixedMaxContent", "50px 50px"); |
+testGridColumnsValues("gridFixedMinContentFixedMaxContentTwoEmptyChildren", "50px 50px"); |
+testGridColumnsValues("gridFixedMinContentFixedMaxContentFixedSizeChild", "60px 40px"); |
+testGridColumnsValues("gridMaxContentAndAuto", "80px 20px"); |
+testGridColumnsValues("gridMaxContentAndAutoReversed", "90px 10px"); |
+testGridColumnsValues("gridMinContentAndAuto", "10px 90px"); |
+testGridColumnsValues("gridMinContentAndAutoReversed", "20px 80px"); |
+</script> |
+</body> |