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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html

Issue 14786002: Allow defining named grid lines on the grid element (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: 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/named-grid-line-get-set-expected.txt » ('j') | Source/core/css/CSSComputedStyleDeclaration.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html
diff --git a/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html b/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html
new file mode 100755
index 0000000000000000000000000000000000000000..285318277c1c58c2a3d5aec1e5d0d9ea235e9758
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html
@@ -0,0 +1,154 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<head>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.gridWithFixed {
+ -webkit-grid-columns: "first" 10px;
+ -webkit-grid-rows: "first" 15px;
+}
+.gridWithPercent {
+ -webkit-grid-columns: 53% "last";
+ -webkit-grid-rows: 27% "last";
+}
+.gridWithAuto {
+ -webkit-grid-columns: "first" auto;
+ -webkit-grid-rows: auto "last";
+}
+.gridWithMinMax {
+ -webkit-grid-columns: "first" minmax(10%, 15px);
+ -webkit-grid-rows: minmax(20px, 50%) "last";
+}
+.gridWithFixedMultiple {
+ -webkit-grid-columns: "first" "nav" 10px "last";
+ -webkit-grid-rows: "first" "nav" 15px "last";
+}
+.gridWithPercentageSameStringMultipleTimes {
+ -webkit-grid-columns: "first" "nav" 10% "nav" 15% "last";
+ -webkit-grid-rows: "first" "nav2" 25% "nav2" 75% "last";
+}
+</style>
+<script src="../js/resources/js-test-pre.js"></script>
+</head>
+<body>
+<div class="grid gridWithFixed" id="gridWithFixedElement"></div>
+<div class="grid gridWithPercent" id="gridWithPercentElement"></div>
+<div class="grid gridWithAuto" id="gridWithAutoElement"></div>
+<div class="grid gridWithMinMax" id="gridWithMinMax"></div>
+<div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
+<div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
+<script>
+ description('Test that setting and getting grid-columns and grid-rows works as expected');
+
+ function testCSSValue(gridElementId, _namedGridColumns, _namedGridRows)
esprehn 2013/05/03 21:45:58 What's with the _ ?
Julien - ping for review 2013/05/06 16:22:33 I wanted to differentiate between the argument and
+ {
+ this.gridElement = document.getElementById(gridElementId);
+ this.namedGridColumns = _namedGridColumns;
+ this.namedGridRows = _namedGridRows;
+ shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-columns')", namedGridColumns);
+ shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-rows')", namedGridRows);
+ }
+
+ debug("Test getting -webkit-grid-columns and -webkit-grid-rows set through CSS");
+ testCSSValue("gridWithFixedElement", "'first 10px'", "'first 15px'");
+ testCSSValue("gridWithPercentElement", "'53% last'", "'27% last'");
+ testCSSValue("gridWithAutoElement", "'first auto'", "'auto last'");
+ testCSSValue("gridWithMinMax", "'first minmax(10%, 15px)'", "'minmax(20px, 50%) last'");
+ testCSSValue("gridWithFixedMultiple", "'nav first 10px last'", "'nav first 15px last'");
Julien - ping for review 2013/05/06 16:22:33 I am not super happy with the current output of ge
Julien - ping for review 2013/05/06 16:58:40 It turns out that forcing a quote would require ha
+ testCSSValue("gridWithPercentageSameStringMultipleTimes", "'nav first 10% nav 15% last'", "'first nav2 25% nav2 75% last'");
+
+ debug("");
+ debug("Test getting and setting -webkit-grid-columns and -webkit-grid-rows through JS");
+ var element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.webkitGridColumns = "'first' 18px";
+ element.style.webkitGridRows = "66px 'last'";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'first 18px'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'66px last'");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.webkitGridColumns = "'first' 55%";
+ element.style.webkitGridRows = "40% 'last'";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'first 55%'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'40% last'");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.webkitGridColumns = "'first' auto";
+ element.style.webkitGridRows = "auto 'last'";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'first auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'auto last'");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.webkitGridColumns = "'first' -webkit-min-content";
+ element.style.webkitGridRows = "-webkit-min-content 'last'";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'first -webkit-min-content'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'-webkit-min-content last'");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.webkitGridColumns = "'first' -webkit-max-content";
+ element.style.webkitGridRows = "-webkit-max-content 'last'";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'first -webkit-max-content'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'-webkit-max-content last'");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.webkitGridColumns = "'first' minmax(55%, 45px)";
+ element.style.webkitGridRows = "minmax(30px, 40%) 'last'";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'first minmax(55%, 45px)'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'minmax(30px, 40%) last'");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.font = "10px Ahem";
+ element.style.webkitGridColumns = "'first' minmax(22em, -webkit-max-content)";
+ element.style.webkitGridRows = "minmax(-webkit-max-content, 5em) 'last'";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'first minmax(220px, -webkit-max-content)'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'minmax(-webkit-max-content, 50px) last'");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.font = "10px Ahem";
+ element.style.webkitGridColumns = "'first' minmax(22em, -webkit-max-content)";
+ element.style.webkitGridRows = "minmax(-webkit-max-content, 5em) 'last'";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'first minmax(220px, -webkit-max-content)'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'minmax(-webkit-max-content, 50px) last'");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.webkitGridColumns = "'first' minmax(-webkit-min-content, -webkit-max-content)";
+ element.style.webkitGridRows = "minmax(-webkit-max-content, -webkit-min-content) 'last'";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'first minmax(-webkit-min-content, -webkit-max-content)'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'minmax(-webkit-max-content, -webkit-min-content) last'");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.webkitGridColumns = "'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'last'";
+ element.style.webkitGridRows = "'first' 'nav' minmax(-webkit-max-content, -webkit-min-content) 'last'";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'nav first minmax(-webkit-min-content, -webkit-max-content) last'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'nav first minmax(-webkit-max-content, -webkit-min-content) last'");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.webkitGridColumns = "'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'nav' auto 'last'";
+ element.style.webkitGridRows = "'first' 'nav2' minmax(-webkit-max-content, -webkit-min-content) 'nav2' minmax(10px, 15px) 'last'";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'nav first minmax(-webkit-min-content, -webkit-max-content) nav auto last'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'first nav2 minmax(-webkit-max-content, -webkit-min-content) nav2 minmax(10px, 15px) last'");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.webkitGridColumns = "'foo' 'bar' auto 'foo' auto 'bar'";
+ element.style.webkitGridRows = "'foo' 'bar' auto 'foo' auto 'bar'";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'foo bar auto foo auto bar'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'foo bar auto foo auto bar'");
+</script>
+<script src="../js/resources/js-test-post.js"></script>
+</body>
+</html>
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt » ('j') | Source/core/css/CSSComputedStyleDeclaration.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698