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 456725 b21a590dd598e82f228234c2b5011fa6c5fef5a4
parent 456724 5a41d52b6c385a2dfb4d9d50fb5023561363e824
child 456726 bdb54fd2768ddf50fd17362e775fd034429a25e7
push id111705
push userjames@hoppipolla.co.uk
push dateTue, 05 Feb 2019 18:07:20 +0000
treeherdermozilla-inbound@9592b19c9b09 [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>