CSS: Test shorthand expansion
When a longhand value is omitted, the longhand should have the specific
initial value for the shorthand, not 'initial'.
Bug: 501673, 772772
Change-Id: I0986013e6785852861b79926dd0696314c758ff7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1839934
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#703528}
diff --git a/css/css-grid/parsing/grid-shorthand.html b/css/css-grid/parsing/grid-shorthand.html
new file mode 100644
index 0000000..9199560
--- /dev/null
+++ b/css/css-grid/parsing/grid-shorthand.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-shorthand">
+<meta name="assert" content="grid supports the full grammar '<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+// <grid-template>
+test_shorthand_value('grid', 'none', {
+ 'grid-template-rows': 'none',
+ 'grid-template-columns': 'none',
+ 'grid-template-areas': 'none',
+
+ 'grid-auto-rows': 'auto',
+ 'grid-auto-columns': 'auto',
+ 'grid-auto-flow': 'row'
+});
+
+test_shorthand_value('grid', '10px / 20%', {
+ 'grid-template-rows': '10px',
+ 'grid-template-columns': '20%',
+ 'grid-template-areas': 'none',
+
+ 'grid-auto-rows': 'auto',
+ 'grid-auto-columns': 'auto',
+ 'grid-auto-flow': 'row'
+});
+
+test_shorthand_value('grid', 'fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))', {
+ 'grid-template-rows': 'fit-content(calc(-0.5em + 10px))',
+ 'grid-template-columns': 'fit-content(calc(0.5em + 10px))',
+ 'grid-template-areas': 'none',
+
+ 'grid-auto-rows': 'auto',
+ 'grid-auto-columns': 'auto',
+ 'grid-auto-flow': 'row'
+});
+
+test_shorthand_value('grid',
+ '[header-top] "a a a" [header-bottom]' +
+ ' [main-top] "b b b" 1fr [main-bottom]' +
+ ' / auto 1fr auto', {
+ 'grid-template-rows': '[header-top] auto [header-bottom main-top] 1fr [main-bottom]',
+ 'grid-template-columns': 'auto 1fr auto',
+ 'grid-template-areas': '"a a a" "b b b"',
+
+ 'grid-auto-rows': 'auto',
+ 'grid-auto-columns': 'auto',
+ 'grid-auto-flow': 'row'
+});
+
+test_shorthand_value('grid',
+ ' "a a a"' +
+ ' "b b b" 1fr' +
+ '/ auto 1fr auto', {
+ 'grid-template-rows': 'auto 1fr',
+ 'grid-template-columns': 'auto 1fr auto',
+ 'grid-template-areas': '"a a a" "b b b"',
+
+ 'grid-auto-rows': 'auto',
+ 'grid-auto-columns': 'auto',
+ 'grid-auto-flow': 'row'
+});
+
+test_shorthand_value('grid',
+ ' [] "a a a" []' +
+ ' [] "b b b" 1fr []' +
+ ' / [] auto 1fr [] auto []', {
+ 'grid-template-rows': 'auto 1fr',
+ 'grid-template-columns': 'auto 1fr auto',
+ 'grid-template-areas': '"a a a" "b b b"',
+
+ 'grid-auto-rows': 'auto',
+ 'grid-auto-columns': 'auto',
+ 'grid-auto-flow': 'row'
+});
+
+// <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
+test_shorthand_value('grid',
+ '10px' +
+ ' / auto-flow dense' +
+ ' 20px', {
+ 'grid-template-rows': '10px',
+ 'grid-template-columns': 'none',
+ 'grid-template-areas': 'none',
+
+ 'grid-auto-rows': 'auto',
+ 'grid-auto-columns': '20px',
+ 'grid-auto-flow': 'column dense'
+});
+
+// [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
+test_shorthand_value('grid',
+ 'auto-flow dense' +
+ ' 30px /' +
+ ' 40px', {
+ 'grid-template-rows': 'none',
+ 'grid-template-columns': '40px',
+ 'grid-template-areas': 'none',
+
+ 'grid-auto-rows': '30px',
+ 'grid-auto-columns': 'auto',
+ 'grid-auto-flow': 'dense'
+});
+</script>
+</body>
+</html>
diff --git a/css/css-multicol/parsing/column-rule-shorthand.html b/css/css-multicol/parsing/column-rule-shorthand.html
new file mode 100644
index 0000000..68e7582
--- /dev/null
+++ b/css/css-multicol/parsing/column-rule-shorthand.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: column-rule sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule">
+<meta name="assert" content="column-rule supports the full grammar '<column-rule-width> || <column-rule-style> || <column-rule-color>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('column-rule', 'medium dotted green', {
+ 'column-rule-width': 'medium',
+ 'column-rule-style': 'dotted',
+ 'column-rule-color': 'green'
+});
+
+test_shorthand_value('column-rule', '100px', {
+ 'column-rule-width': '100px',
+ 'column-rule-style': 'none',
+ 'column-rule-color': 'currentcolor'
+});
+
+test_shorthand_value('column-rule', 'blue', {
+ 'column-rule-width': 'medium',
+ 'column-rule-style': 'none',
+ 'column-rule-color': 'blue'
+});
+</script>
+</body>
+</html>
diff --git a/css/motion/parsing/offset-shorthand.html b/css/motion/parsing/offset-shorthand.html
new file mode 100644
index 0000000..611a394
--- /dev/null
+++ b/css/motion/parsing/offset-shorthand.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: offset sets longhands</title>
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-shorthand">
+<meta name="assert" content="offset supports the full grammar from the spec.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('offset', 'left bottom ray(0rad closest-side) 10px auto 30deg / right bottom', {
+ 'offset-position': 'left bottom',
+ 'offset-path': 'ray(0rad closest-side)',
+ 'offset-distance': '10px',
+ 'offset-rotate': 'auto 30deg',
+ 'offset-anchor': 'right bottom',
+});
+
+test_shorthand_value('offset', 'top right / top left', {
+ 'offset-position': 'right top',
+ 'offset-path': 'none',
+ 'offset-distance': '0px',
+ 'offset-rotate': 'auto',
+ 'offset-anchor': 'left top',
+});
+
+test_shorthand_value('offset', 'path("M 0 0 H 2") reverse 50%', {
+ 'offset-position': 'auto',
+ 'offset-path': 'path("M 0 0 H 2")',
+ 'offset-distance': '50%',
+ 'offset-rotate': 'reverse',
+ 'offset-anchor': 'auto',
+});
+</script>
+</body>
+</html>
diff --git a/css/support/shorthand-testcommon.js b/css/support/shorthand-testcommon.js
index 3298113..ab1f379 100644
--- a/css/support/shorthand-testcommon.js
+++ b/css/support/shorthand-testcommon.js
@@ -28,6 +28,7 @@
try {
const expectedLength = div.style.length;
div.style[property] = value;
+ assert_true(CSS.supports(property, value));
for (let longhand of Object.keys(longhands).sort()) {
div.style[longhand] = "";
}
