Bug 1514117 [wpt PR 14515] - [css-grid] computed values of grid properties, a=testonly
authorEric Willigers <ewilligers@users.noreply.github.com>
Thu, 31 Jan 2019 12:12:39 +0000
changeset 457748 1c526e778f8c771acfa63261df043bf7534ec0d1
parent 457747 6f5b6857d05659dddc0fa555824569fa4f5f52b5
child 457749 8c3bdd3b19d07a7f5e29994d80f96329d4ffe248
push id35518
push useropoprus@mozilla.com
push dateFri, 08 Feb 2019 09:55:14 +0000
treeherdermozilla-central@3a3e393396f4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1514117, 14515
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1514117 [wpt PR 14515] - [css-grid] computed values of grid properties, a=testonly Automatic update from web-platform-tests [css-grid] computed values of grid properties (#14515) The computed values are as specified, with lengths made absolute. We omit implicit 1 in grid-row-start, grid-row -- wpt-commits: 38c37851c8f82b4c909851aef02a71d8301d7922 wpt-pr: 14515
testing/web-platform/tests/css/css-grid/parsing/grid-area-computed.html
testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-computed.html
testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-computed.html
testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-computed.html
testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-computed.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-area-computed.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedValue().gridArea</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#placement">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+// auto
+test_computed_value("grid-area", "auto / auto / auto / auto");
+test_computed_value("grid-row", "auto / auto");
+test_computed_value("grid-column-end", "auto");
+
+// <custom-ident>
+test_computed_value("grid-row", "-zπ", "-zπ / -zπ");
+test_computed_value("grid-row-start", "AZ");
+test_computed_value("grid-column-start", "-_π");
+test_computed_value("grid-row-end", "_9");
+
+
+// <integer> && <custom-ident>?
+test_computed_value("grid-area", "1 / 90 -a- / auto / auto");
+test_computed_value("grid-row", "2 az / auto");
+test_computed_value("grid-column", "9 / -19 zA");
+test_computed_value("grid-row-start", "-19");
+test_computed_value("grid-row-start", "9 -Z_");
+test_computed_value("grid-column-start", "-44 Z");
+test_computed_value("grid-row-end", "1 -πA");
+test_computed_value("grid-column-end", "5 π_");
+
+// span && [ <integer> || <custom-ident> ]
+test_computed_value("grid-area", "span 2 i / auto / auto / auto");
+test_computed_value("grid-row", "span 2 / auto");
+test_computed_value("grid-column-start", "span 1 i");
+test_computed_value("grid-row-end", "span 2 i");
+test_computed_value("grid-column-end", "span 2");
+
+// https://github.com/w3c/csswg-drafts/issues/3448
+test_computed_value("grid-row-start", "span i");
+test_computed_value("grid-row", "span i / auto");
+
+// <grid-line> [ / <grid-line> ]{0,3}
+test_computed_value("grid-area", "auto / i / auto / i");
+test_computed_value("grid-area", "auto / i / 2 j", "auto / i / 2 j / i");
+test_computed_value("grid-area", "auto / i / 2 j / span 3 k");
+test_computed_value("grid-row", "auto / i");
+test_computed_value("grid-column", "2 j / span 3 k");
+
+
+// https://github.com/w3c/csswg-drafts/issues/2858
+test_computed_value("grid-column-end",  "\\31st", "\\31 st");
+test_computed_value("grid-column-end",  "\\31 st", "\\31 st");
+
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-computed.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedValue().gridAutoColumns</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+<script>
+// <track-breadth>
+// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_computed_value("grid-auto-columns", "1px");
+test_computed_value("grid-auto-columns", "calc(10px + 0.5em)", "30px");
+test_computed_value("grid-auto-columns", "calc(10px - 0.5em)", "0px");
+test_computed_value("grid-auto-columns", "4%");
+test_computed_value("grid-auto-columns", "5fr");
+test_computed_value("grid-auto-columns", "min-content");
+test_computed_value("grid-auto-columns", "max-content");
+test_computed_value("grid-auto-columns", "auto");
+
+// minmax( <inflexible-breadth> , <track-breadth> )
+// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto
+test_computed_value("grid-auto-columns", "minmax(1px, 5fr)");
+test_computed_value("grid-auto-columns", "minmax(calc(10px + 0.5em), max-content)", "minmax(30px, max-content)");
+test_computed_value("grid-auto-columns", "minmax(calc(10px - 0.5em), max-content)", "minmax(0px, max-content)");
+test_computed_value("grid-auto-columns", "minmax(4%, auto)");
+test_computed_value("grid-auto-columns", "minmax(min-content, calc(10px + 0.5em))", "minmax(min-content, 30px)");
+test_computed_value("grid-auto-columns", "minmax(auto, 4%)");
+
+// fit-content( <length-percentage> )
+test_computed_value("grid-auto-columns", "fit-content(1px)");
+test_computed_value("grid-auto-columns", "fit-content(calc(10px + 0.5em))", "fit-content(30px)");
+test_computed_value("grid-auto-columns", "fit-content(calc(10px - 0.5em))", "fit-content(0px)");
+test_computed_value("grid-auto-columns", "fit-content(4%)");
+
+// 0
+test_computed_value("grid-auto-columns", "0px");
+test_computed_value("grid-auto-columns", "0%");
+test_computed_value("grid-auto-columns", "0fr");
+test_computed_value("grid-auto-columns", "minmax(auto, 0%)");
+test_computed_value("grid-auto-columns", "fit-content(0px)");
+
+// <track-size>+
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1339672
+test_computed_value("grid-auto-columns", "1px 2px 3px 0px");
+test_computed_value("grid-auto-columns", "fit-content(1px) minmax(2px, 3px) 4px");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-computed.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedValue().gridAutoFlow</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-flow">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("grid-auto-flow", "row");
+test_computed_value("grid-auto-flow", "column");
+test_computed_value("grid-auto-flow", "row dense");
+test_computed_value("grid-auto-flow", "column dense");
+
+test_computed_value("grid-auto-flow", "dense row", "row dense");
+test_computed_value("grid-auto-flow", "dense column", "column dense");
+
+test_computed_value("grid-auto-flow", "dense", "row dense");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-computed.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedValue().gridAutoRows</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+<script>
+// <track-breadth>
+// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_computed_value("grid-auto-rows", "1px");
+test_computed_value("grid-auto-rows", "calc(10px + 0.5em)", "30px");
+test_computed_value("grid-auto-rows", "calc(10px - 0.5em)", "0px");
+test_computed_value("grid-auto-rows", "4%");
+test_computed_value("grid-auto-rows", "5fr");
+test_computed_value("grid-auto-rows", "min-content");
+test_computed_value("grid-auto-rows", "max-content");
+test_computed_value("grid-auto-rows", "auto");
+
+// minmax( <inflexible-breadth> , <track-breadth> )
+// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto
+test_computed_value("grid-auto-rows", "minmax(1px, 5fr)");
+test_computed_value("grid-auto-rows", "minmax(calc(10px + 0.5em), max-content)", "minmax(30px, max-content)");
+test_computed_value("grid-auto-rows", "minmax(calc(10px - 0.5em), max-content)", "minmax(0px, max-content)");
+test_computed_value("grid-auto-rows", "minmax(4%, auto)");
+test_computed_value("grid-auto-rows", "minmax(min-content, calc(10px + 0.5em))", "minmax(min-content, 30px)");
+test_computed_value("grid-auto-rows", "minmax(auto, 4%)");
+
+// fit-content( <length-percentage> )
+test_computed_value("grid-auto-rows", "fit-content(1px)");
+test_computed_value("grid-auto-rows", "fit-content(calc(10px + 0.5em))", "fit-content(30px)");
+test_computed_value("grid-auto-rows", "fit-content(calc(10px - 0.5em))", "fit-content(0px)");
+test_computed_value("grid-auto-rows", "fit-content(4%)");
+
+// 0
+test_computed_value("grid-auto-rows", "0px");
+test_computed_value("grid-auto-rows", "0%");
+test_computed_value("grid-auto-rows", "0fr");
+test_computed_value("grid-auto-rows", "minmax(auto, 0%)");
+test_computed_value("grid-auto-rows", "fit-content(0px)");
+
+// <track-size>+
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1339672
+test_computed_value("grid-auto-rows", "1px 2px 3px 0px");
+test_computed_value("grid-auto-rows", "fit-content(1px) minmax(2px, 3px) 4px");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-computed.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedValue().gridTemplateAreas</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("grid-template-areas", "none");
+test_computed_value("grid-template-areas", '"first"');
+test_computed_value("grid-template-areas", '"first second"');
+test_computed_value("grid-template-areas", '"1st 2nd 3rd"');
+test_computed_value("grid-template-areas", '"first second" "third fourth"');
+test_computed_value("grid-template-areas", '"first second" "third ." "1st 2nd" "3rd 4th"');
+
+// https://github.com/w3c/csswg-drafts/issues/3261
+test_computed_value("grid-template-areas", '"  a  \t  b  "', '"a b"');
+test_computed_value("grid-template-areas", '"c\td"', '"c d"');
+test_computed_value("grid-template-areas", '"first ..."', '"first ."');
+</script>
+</body>
+</html>