Commit 63506355 authored by Eric Willigers's avatar Eric Willigers Committed by Commit Bot

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/+/1839934Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#703528}
parent 96b7f931
This is a testharness.js-based test.
Found 56 tests; 31 PASS, 25 FAIL, 0 TIMEOUT, 0 NOTRUN.
FAIL e.style['grid'] = "none" should set grid-auto-columns assert_equals: grid-auto-columns should be canonical expected "auto" but got "initial"
FAIL e.style['grid'] = "none" should set grid-auto-flow assert_equals: grid-auto-flow should be canonical expected "row" but got "initial"
FAIL e.style['grid'] = "none" should set grid-auto-rows assert_equals: grid-auto-rows should be canonical expected "auto" but got "initial"
PASS e.style['grid'] = "none" should set grid-template-areas
PASS e.style['grid'] = "none" should set grid-template-columns
PASS e.style['grid'] = "none" should set grid-template-rows
PASS e.style['grid'] = "none" should not set unrelated longhands
FAIL e.style['grid'] = "10px / 20%" should set grid-auto-columns assert_equals: grid-auto-columns should be canonical expected "auto" but got "initial"
FAIL e.style['grid'] = "10px / 20%" should set grid-auto-flow assert_equals: grid-auto-flow should be canonical expected "row" but got "initial"
FAIL e.style['grid'] = "10px / 20%" should set grid-auto-rows assert_equals: grid-auto-rows should be canonical expected "auto" but got "initial"
PASS e.style['grid'] = "10px / 20%" should set grid-template-areas
PASS e.style['grid'] = "10px / 20%" should set grid-template-columns
PASS e.style['grid'] = "10px / 20%" should set grid-template-rows
PASS e.style['grid'] = "10px / 20%" should not set unrelated longhands
FAIL e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-auto-columns assert_equals: grid-auto-columns should be canonical expected "auto" but got "initial"
FAIL e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-auto-flow assert_equals: grid-auto-flow should be canonical expected "row" but got "initial"
FAIL e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-auto-rows assert_equals: grid-auto-rows should be canonical expected "auto" but got "initial"
PASS e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-template-areas
PASS e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-template-columns
PASS e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-template-rows
PASS e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should not set unrelated longhands
FAIL e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-auto-columns assert_equals: grid-auto-columns should be canonical expected "auto" but got "initial"
FAIL e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-auto-flow assert_equals: grid-auto-flow should be canonical expected "row" but got "initial"
FAIL e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-auto-rows assert_equals: grid-auto-rows should be canonical expected "auto" but got "initial"
PASS e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-areas
PASS e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-columns
PASS e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-rows
PASS e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should not set unrelated longhands
FAIL e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-auto-columns assert_equals: grid-auto-columns should be canonical expected "auto" but got "initial"
FAIL e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-auto-flow assert_equals: grid-auto-flow should be canonical expected "row" but got "initial"
FAIL e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-auto-rows assert_equals: grid-auto-rows should be canonical expected "auto" but got "initial"
PASS e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-areas
PASS e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-columns
PASS e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-rows
PASS e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should not set unrelated longhands
FAIL e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-auto-columns assert_equals: grid-auto-columns should be canonical expected "auto" but got "initial"
FAIL e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-auto-flow assert_equals: grid-auto-flow should be canonical expected "row" but got "initial"
FAIL e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-auto-rows assert_equals: grid-auto-rows should be canonical expected "auto" but got "initial"
PASS e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-areas
PASS e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-columns
PASS e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-rows
PASS e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should not set unrelated longhands
PASS e.style['grid'] = "10px / auto-flow dense 20px" should set grid-auto-columns
PASS e.style['grid'] = "10px / auto-flow dense 20px" should set grid-auto-flow
FAIL e.style['grid'] = "10px / auto-flow dense 20px" should set grid-auto-rows assert_equals: grid-auto-rows should be canonical expected "auto" but got "initial"
FAIL e.style['grid'] = "10px / auto-flow dense 20px" should set grid-template-areas assert_equals: grid-template-areas should be canonical expected "none" but got "initial"
FAIL e.style['grid'] = "10px / auto-flow dense 20px" should set grid-template-columns assert_equals: grid-template-columns should be canonical expected "none" but got "initial"
PASS e.style['grid'] = "10px / auto-flow dense 20px" should set grid-template-rows
PASS e.style['grid'] = "10px / auto-flow dense 20px" should not set unrelated longhands
FAIL e.style['grid'] = "auto-flow dense 30px / 40px" should set grid-auto-columns assert_equals: grid-auto-columns should be canonical expected "auto" but got "initial"
FAIL e.style['grid'] = "auto-flow dense 30px / 40px" should set grid-auto-flow assert_equals: grid-auto-flow should be canonical expected "dense" but got "row dense"
PASS e.style['grid'] = "auto-flow dense 30px / 40px" should set grid-auto-rows
FAIL e.style['grid'] = "auto-flow dense 30px / 40px" should set grid-template-areas assert_equals: grid-template-areas should be canonical expected "none" but got "initial"
PASS e.style['grid'] = "auto-flow dense 30px / 40px" should set grid-template-columns
FAIL e.style['grid'] = "auto-flow dense 30px / 40px" should set grid-template-rows assert_equals: grid-template-rows should be canonical expected "none" but got "initial"
PASS e.style['grid'] = "auto-flow dense 30px / 40px" should not set unrelated longhands
Harness: the test ran to completion.
<!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>
This is a testharness.js-based test.
PASS e.style['column-rule'] = "medium dotted green" should set column-rule-color
PASS e.style['column-rule'] = "medium dotted green" should set column-rule-style
PASS e.style['column-rule'] = "medium dotted green" should set column-rule-width
PASS e.style['column-rule'] = "medium dotted green" should not set unrelated longhands
FAIL e.style['column-rule'] = "100px" should set column-rule-color assert_equals: column-rule-color should be canonical expected "currentcolor" but got "initial"
FAIL e.style['column-rule'] = "100px" should set column-rule-style assert_equals: column-rule-style should be canonical expected "none" but got "initial"
PASS e.style['column-rule'] = "100px" should set column-rule-width
PASS e.style['column-rule'] = "100px" should not set unrelated longhands
PASS e.style['column-rule'] = "blue" should set column-rule-color
FAIL e.style['column-rule'] = "blue" should set column-rule-style assert_equals: column-rule-style should be canonical expected "none" but got "initial"
FAIL e.style['column-rule'] = "blue" should set column-rule-width assert_equals: column-rule-width should be canonical expected "medium" but got "initial"
PASS e.style['column-rule'] = "blue" should not set unrelated longhands
Harness: the test ran to completion.
<!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>
This is a testharness.js-based test.
PASS e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should set offset-anchor
PASS e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should set offset-distance
PASS e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should set offset-path
PASS e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should set offset-position
PASS e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should set offset-rotate
PASS e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should not set unrelated longhands
PASS e.style['offset'] = "top right / top left" should set offset-anchor
FAIL e.style['offset'] = "top right / top left" should set offset-distance assert_equals: offset-distance should be canonical expected "0px" but got "initial"
FAIL e.style['offset'] = "top right / top left" should set offset-path assert_equals: offset-path should be canonical expected "none" but got "initial"
PASS e.style['offset'] = "top right / top left" should set offset-position
FAIL e.style['offset'] = "top right / top left" should set offset-rotate assert_equals: offset-rotate should be canonical expected "auto" but got "initial"
PASS e.style['offset'] = "top right / top left" should not set unrelated longhands
FAIL e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should set offset-anchor assert_equals: offset-anchor should be canonical expected "auto" but got "initial"
PASS e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should set offset-distance
PASS e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should set offset-path
FAIL e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should set offset-position assert_equals: offset-position should be canonical expected "auto" but got "initial"
PASS e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should set offset-rotate
PASS e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should not set unrelated longhands
Harness: the test ran to completion.
<!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>
...@@ -28,6 +28,7 @@ function test_shorthand_value(property, value, longhands) { ...@@ -28,6 +28,7 @@ function test_shorthand_value(property, value, longhands) {
try { try {
const expectedLength = div.style.length; const expectedLength = div.style.length;
div.style[property] = value; div.style[property] = value;
assert_true(CSS.supports(property, value));
for (let longhand of Object.keys(longhands).sort()) { for (let longhand of Object.keys(longhands).sort()) {
div.style[longhand] = ""; div.style[longhand] = "";
} }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment