Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(401)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html

Issue 13992003: Add support for parsing <grid-line> that includes a 'span' (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Fixed the change to match the specification Created 7 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html b/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html
index 6b8ef0e5d3a0994ff26f046e12fca740ee174144..7ab53d7cef736595f929a7ec474db50c88533aba 100755
--- a/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html
+++ b/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html
@@ -26,6 +26,18 @@ if (window.testRunner)
-webkit-grid-column: 10 / -10;
-webkit-grid-row: -8 / 5;
}
+.gridItemWithBeforeSpan {
+ -webkit-grid-column: span 2 / 4;
+ -webkit-grid-row: 3 / span 5;
+}
+.gridItemWithAfterSpan {
+ -webkit-grid-column: 2 span / 4;
+ -webkit-grid-row: 3 / 5 span;
+}
+.gridItemWith2OnlySpan {
+ -webkit-grid-column: span / span;
+ -webkit-grid-row: span / span;
+}
.gridItemWith2Auto {
-webkit-grid-column: auto / auto;
-webkit-grid-row: auto / auto;
@@ -50,6 +62,9 @@ if (window.testRunner)
<div class="gridItemWith2Integer" id="gridItemWith2IntegerElement"></div>
<div class="gridItemWithNegativePositiveInteger" id="gridItemWithNegativePositiveIntegerElement"></div>
<div class="gridItemWith2Auto" id="gridItemWith2AutoElement"></div>
+<div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpanElement"></div>
+<div class="gridItemWithAfterSpan" id="gridItemWithAfterSpanElement"></div>
+<div class="gridItemWith2OnlySpan" id="gridItemWith2OnlySpanElement"></div>
<div class="gridItemWithNegativePositiveInteger gridItemWithBothLongHand" id="gridItemWithBothShortLongHandElement"></div>
<div class="gridItemWithNoSpace" id="gridItemWithNoSpaceElement"></div>
<script>
@@ -104,6 +119,30 @@ if (window.testRunner)
shouldBe("getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').getPropertyValue('-webkit-grid-before')", "'-8'");
shouldBe("getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').getPropertyValue('-webkit-grid-after')", "'5'");
+ var gridItemWithBeforeSpanElement = document.getElementById("gridItemWithBeforeSpanElement");
+ shouldBe("getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('-webkit-grid-column')", "'span 2 / 4'");
+ shouldBe("getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('-webkit-grid-start')", "'span 2'");
+ shouldBe("getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('-webkit-grid-end')", "'4'");
+ shouldBe("getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('-webkit-grid-row')", "'3 / span 5'");
+ shouldBe("getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('-webkit-grid-before')", "'3'");
+ shouldBe("getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('-webkit-grid-after')", "'span 5'");
+
+ var gridItemWithAfterSpanElement = document.getElementById("gridItemWithAfterSpanElement");
+ shouldBe("getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('-webkit-grid-column')", "'span 2 / 4'");
+ shouldBe("getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('-webkit-grid-start')", "'span 2'");
+ shouldBe("getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('-webkit-grid-end')", "'4'");
+ shouldBe("getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('-webkit-grid-row')", "'3 / span 5'");
+ shouldBe("getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('-webkit-grid-before')", "'3'");
+ shouldBe("getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('-webkit-grid-after')", "'span 5'");
+
+ var gridItemWith2OnlySpanElement = document.getElementById("gridItemWith2OnlySpanElement");
+ shouldBe("getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
+ shouldBe("getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('-webkit-grid-start')", "'auto'");
+ shouldBe("getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('-webkit-grid-end')", "'auto'");
+ shouldBe("getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
+ shouldBe("getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('-webkit-grid-before')", "'auto'");
+ shouldBe("getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('-webkit-grid-after')", "'auto'");
+
var gridItemWith2AutoElement = document.getElementById("gridItemWith2AutoElement");
shouldBe("getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
shouldBe("getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-webkit-grid-start')", "'auto'");
@@ -185,6 +224,17 @@ if (window.testRunner)
element = document.createElement("div");
document.body.appendChild(element);
+ element.style.webkitGridColumn = "span 5 / 5";
+ element.style.webkitGridRow = "4 / span 4";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'span 5 / 5'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start')", "'span 5'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')", "'5'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'4 / span 4'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-before')", "'4'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after')", "'span 4'");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
element.style.webkitGridColumn = "-5 / 5";
element.style.webkitGridRow = "4 / -4";
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'-5 / 5'");
@@ -216,6 +266,17 @@ if (window.testRunner)
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-before')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after')", "'8'");
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.webkitGridColumn = "span / 3";
+ element.style.webkitGridRow = "5 / span";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'span 1 / 3'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start')", "'span 1'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')", "'3'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'5 / span 1'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-before')", "'5'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after')", "'span 1'");
+
debug("");
debug("Test setting grid-column and grid-row back to 'auto' through JS");
element.style.webkitGridColumn = "18 / 19";
@@ -326,6 +387,51 @@ if (window.testRunner)
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-before')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after')", "'auto'");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.webkitGridColumn = "span span / span span";
+ element.style.webkitGridRow = "span span / span span";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-before')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after')", "'auto'");
+
+ // Negative integer or 0 are invalid.
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.webkitGridColumn = "span -1 / -2 span";
+ element.style.webkitGridRow = "-3 span / span -4";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-before')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after')", "'auto'");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.webkitGridColumn = "0 span / span 0";
+ element.style.webkitGridRow = "span 0 / 0 span";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-before')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after')", "'auto'");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.webkitGridColumn = "5 span / span 2";
+ element.style.webkitGridRow = "span 4 / 3 span";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-before')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after')", "'auto'");
</script>
<script src="../js/resources/js-test-post.js"></script>
</body>
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698