mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-19 08:15:31 +00:00
Bug 1440140 [wpt PR 9614] - [css-typed-om] Add unsupported tests for color properties., a=testonly
Automatic update from web-platform-tests[css-typed-om] Add unsupported tests for color properties. For color properties, we support 'currentcolor' as a CSSKeywordValue, but any other value (including identifiers like 'red') are not supported and are converted to base CSSStyleValues. We add tests for most color related properties. We are failing the text-emphasis-color one because we haven't unprefixed it yet. We change the code to make this work. Bug: 774887 Change-Id: Ide5463b9f67b63568ff32bd34e977faf16964bc1 Reviewed-on: https://chromium-review.googlesource.com/927943 Commit-Queue: Darren Shen <shend@chromium.org> Reviewed-by: nainar <nainar@chromium.org> Cr-Commit-Position: refs/heads/master@{#538668} wpt-commits: 5496784a17bae2872a9c29a2f7948533218e9d00 wpt-pr: 9614 wpt-commits: 5496784a17bae2872a9c29a2f7948533218e9d00 wpt-pr: 9614
This commit is contained in:
Darren Shen
James Graham
parent
b7f859df35
commit
c210156aa5
@ -315900,12 +315900,24 @@
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/background-color.html": [
|
||||
[
|
||||
"/css/css-typed-om/the-stylepropertymap/properties/background-color.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/background-image.html": [
|
||||
[
|
||||
"/css/css-typed-om/the-stylepropertymap/properties/background-image.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/border-color.html": [
|
||||
[
|
||||
"/css/css-typed-om/the-stylepropertymap/properties/border-color.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/border-style.html": [
|
||||
[
|
||||
"/css/css-typed-om/the-stylepropertymap/properties/border-style.html",
|
||||
@ -315924,6 +315936,24 @@
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/caret-color.html": [
|
||||
[
|
||||
"/css/css-typed-om/the-stylepropertymap/properties/caret-color.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/color.html": [
|
||||
[
|
||||
"/css/css-typed-om/the-stylepropertymap/properties/color.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/column-rule-color.html": [
|
||||
[
|
||||
"/css/css-typed-om/the-stylepropertymap/properties/column-rule-color.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/display.html": [
|
||||
[
|
||||
"/css/css-typed-om/the-stylepropertymap/properties/display.html",
|
||||
@ -315960,6 +315990,12 @@
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/outline-color.html": [
|
||||
[
|
||||
"/css/css-typed-om/the-stylepropertymap/properties/outline-color.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/padding.html": [
|
||||
[
|
||||
"/css/css-typed-om/the-stylepropertymap/properties/padding.html",
|
||||
@ -315984,12 +316020,24 @@
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/text-decoration-color.html": [
|
||||
[
|
||||
"/css/css-typed-om/the-stylepropertymap/properties/text-decoration-color.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/text-decoration-style.html": [
|
||||
[
|
||||
"/css/css-typed-om/the-stylepropertymap/properties/text-decoration-style.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/text-emphasis-color.html": [
|
||||
[
|
||||
"/css/css-typed-om/the-stylepropertymap/properties/text-emphasis-color.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/top.html": [
|
||||
[
|
||||
"/css/css-typed-om/the-stylepropertymap/properties/top.html",
|
||||
@ -519731,10 +519779,18 @@
|
||||
"05e0be2c67fd695d693f2a639acf88ff78d8fd04",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/background-color.html": [
|
||||
"f52a2182afc7107a9f411a27aab81c4c4c90ef1e",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/background-image.html": [
|
||||
"1255fea8e74561e14720ccf422fd841e1d3e32fa",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/border-color.html": [
|
||||
"5b8adde602ac79d8b1ea92bd29f25d8756d72f8a",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/border-style.html": [
|
||||
"5d258827fb6a26d07efbdf5b47a440300f0aa307",
|
||||
"testharness"
|
||||
@ -519747,6 +519803,18 @@
|
||||
"e710943711544b28d07676df15966950c0d76efa",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/caret-color.html": [
|
||||
"d4139aeff755abe89ee1e04fcd34ccfba4efe91c",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/color.html": [
|
||||
"291f8e058d1fa6e342f4316c0760ec4cbdbc403c",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/column-rule-color.html": [
|
||||
"ec00a4b773f2ae421b8f688908925e28d2281614",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/display.html": [
|
||||
"26ba44d8d5146b9d606a1668659ee16876b371c5",
|
||||
"testharness"
|
||||
@ -519771,6 +519839,10 @@
|
||||
"3812b01e648e3b043abbd2fe82c3733309da49ad",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/outline-color.html": [
|
||||
"612e77914108dbba0b271b20eb3e9e80199349b3",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/padding.html": [
|
||||
"70c2e29badef7528469bcf11e1cb7bbc6cd519ea",
|
||||
"testharness"
|
||||
@ -519780,7 +519852,7 @@
|
||||
"testharness"
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js": [
|
||||
"b0978c7b09302ce534bdf9e77d880610edbbe6ef",
|
||||
"a3df35f32209493e429282b89f4fdcc6581abe07",
|
||||
"support"
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/right.html": [
|
||||
@ -519791,10 +519863,18 @@
|
||||
"88a1f5866a767c25dec2ef75728c68c5631d371f",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/text-decoration-color.html": [
|
||||
"fe6d3765ca8fea1c1963a310d0aa35fa68089a9b",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/text-decoration-style.html": [
|
||||
"aa9698c5b4cb896fc43c58794df84ec0bbb0e3e9",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/text-emphasis-color.html": [
|
||||
"9419ab219034d1fb732965ebd3a03934bcaddf5a",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-typed-om/the-stylepropertymap/properties/top.html": [
|
||||
"218b50f6b7d8209514bca8d0a8121263b07ab1e2",
|
||||
"testharness"
|
||||
|
||||
@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>'background-color' property</title>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/testhelper.js"></script>
|
||||
<script src="resources/testsuite.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
runPropertyTests('background-color', [
|
||||
{
|
||||
syntax: 'currentcolor',
|
||||
// computes to a <color>, which is not supported in level 1
|
||||
computed: (_, result) => assert_class_string(result, 'CSSStyleValue')
|
||||
}
|
||||
]);
|
||||
|
||||
// <color>s are not supported in level 1
|
||||
runUnsupportedPropertyTests('background-color', [
|
||||
'red', '#bbff00', 'rgb(255, 255, 128)', 'hsl(50, 33%, 25%)',
|
||||
'transparent'
|
||||
]);
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,33 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>'border-color' properties</title>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/testhelper.js"></script>
|
||||
<script src="resources/testsuite.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
for (const prefix of ['top', 'left', 'right', 'bottom']) {
|
||||
runPropertyTests(`border-${prefix}-color`, [
|
||||
{
|
||||
syntax: 'currentcolor',
|
||||
// computes to a <color>, which is not supported in level 1
|
||||
computed: (_, result) => assert_class_string(result, 'CSSStyleValue')
|
||||
}
|
||||
]);
|
||||
|
||||
// <color>s are not supported in level 1
|
||||
runUnsupportedPropertyTests(`border-${prefix}-color`, [
|
||||
'red', '#bbff00', 'rgb(255, 255, 128)', 'hsl(50, 33%, 25%)',
|
||||
'transparent'
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,35 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>'caret-color' property</title>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/testhelper.js"></script>
|
||||
<script src="resources/testsuite.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
runPropertyTests('caret-color', [
|
||||
{
|
||||
syntax: 'currentcolor',
|
||||
// computes to a <color>, which is not supported in level 1
|
||||
computed: (_, result) => assert_class_string(result, 'CSSStyleValue')
|
||||
},
|
||||
{
|
||||
syntax: 'auto',
|
||||
// computes to a <color>, which is not supported in level 1
|
||||
computed: (_, result) => assert_class_string(result, 'CSSStyleValue')
|
||||
}
|
||||
]);
|
||||
|
||||
// <color>s are not supported in level 1
|
||||
runUnsupportedPropertyTests('caret-color', [
|
||||
'red', '#bbff00', 'rgb(255, 255, 128)', 'hsl(50, 33%, 25%)',
|
||||
'transparent'
|
||||
]);
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>'color' property</title>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/testhelper.js"></script>
|
||||
<script src="resources/testsuite.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
runPropertyTests('color', [
|
||||
{
|
||||
syntax: 'currentcolor',
|
||||
// computes to a <color>, which is not supported in level 1
|
||||
computed: (_, result) => assert_class_string(result, 'CSSStyleValue')
|
||||
}
|
||||
]);
|
||||
|
||||
// <color>s are not supported in level 1
|
||||
runUnsupportedPropertyTests('color', [
|
||||
'red', '#bbff00', 'rgb(255, 255, 128)', 'hsl(50, 33%, 25%)',
|
||||
'transparent'
|
||||
]);
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>'column-rule-color' property</title>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/testhelper.js"></script>
|
||||
<script src="resources/testsuite.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
runPropertyTests('column-rule-color', [
|
||||
{
|
||||
syntax: 'currentcolor',
|
||||
// computes to a <color>, which is not supported in level 1
|
||||
computed: (_, result) => assert_class_string(result, 'CSSStyleValue')
|
||||
}
|
||||
]);
|
||||
|
||||
// <color>s are not supported in level 1
|
||||
runUnsupportedPropertyTests('column-rule-color', [
|
||||
'red', '#bbff00', 'rgb(255, 255, 128)', 'hsl(50, 33%, 25%)',
|
||||
'transparent'
|
||||
]);
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,31 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>'outline-color' property</title>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/testhelper.js"></script>
|
||||
<script src="resources/testsuite.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
runPropertyTests('outline-color', [
|
||||
{
|
||||
syntax: 'currentcolor',
|
||||
// computes to a <color>, which is not supported in level 1
|
||||
computed: (_, result) => assert_class_string(result, 'CSSStyleValue')
|
||||
}
|
||||
// FIXME: browsers may or may not support 'invert' keyword.
|
||||
]);
|
||||
|
||||
// <color>s are not supported in level 1
|
||||
runUnsupportedPropertyTests('outline-color', [
|
||||
'red', '#bbff00', 'rgb(255, 255, 128)', 'hsl(50, 33%, 25%)',
|
||||
'transparent'
|
||||
]);
|
||||
|
||||
</script>
|
||||
@ -228,6 +228,25 @@ function testPropertyInvalid(propertyName, examples, description) {
|
||||
}, `Setting '${propertyName}' to ${description} throws TypeError`);
|
||||
}
|
||||
|
||||
// Test that styleMap.get/.set roundtrips correctly for unsupported values.
|
||||
function testUnsupportedValue(propertyName, cssText) {
|
||||
test(t => {
|
||||
let element1 = createDivWithStyle(t);
|
||||
let element2 = createDivWithStyle(t);
|
||||
|
||||
element1.style[propertyName] = cssText;
|
||||
const result = element1.attributeStyleMap.get(propertyName);
|
||||
assert_not_equals(result, null,
|
||||
'Unsupported value must not be null');
|
||||
assert_class_string(result, 'CSSStyleValue',
|
||||
'Unsupported value must be a CSSStyleValue and not one of its subclasses');
|
||||
|
||||
element2.attributeStyleMap.set(propertyName, result);
|
||||
assert_equals(element2.style[propertyName], element1.style[propertyName],
|
||||
'Unsupported value can be set on different element');
|
||||
}, `'${propertyName}' does not supported '${cssText}'`);
|
||||
}
|
||||
|
||||
function createKeywordExample(keyword) {
|
||||
return {
|
||||
description: `the '${keyword}' keyword`,
|
||||
@ -297,3 +316,13 @@ function runPropertyTests(propertyName, testCases) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Check that |propertyName| doesn't "support" examples in |testExamples|.
|
||||
// |testExamples| is a list of CSS string values. An "unsupported" value
|
||||
// doesn't have a corresponding Typed OM representation. It normalizes as
|
||||
// the base CSSStyleValue.
|
||||
function runUnsupportedPropertyTests(propertyName, testExamples) {
|
||||
for (const cssText of testExamples) {
|
||||
testUnsupportedValue(propertyName, cssText);
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>'text-decoration-color' property</title>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/testhelper.js"></script>
|
||||
<script src="resources/testsuite.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
runPropertyTests('text-decoration-color', [
|
||||
{
|
||||
syntax: 'currentcolor',
|
||||
// computes to a <color>, which is not supported in level 1
|
||||
computed: (_, result) => assert_class_string(result, 'CSSStyleValue')
|
||||
}
|
||||
]);
|
||||
|
||||
// <color>s are not supported in level 1
|
||||
runUnsupportedPropertyTests('text-decoration-color', [
|
||||
'red', '#bbff00', 'rgb(255, 255, 128)', 'hsl(50, 33%, 25%)',
|
||||
'transparent'
|
||||
]);
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>'text-emphasis-color' property</title>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/testhelper.js"></script>
|
||||
<script src="resources/testsuite.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
runPropertyTests('text-emphasis-color', [
|
||||
{
|
||||
syntax: 'currentcolor',
|
||||
// computes to a <color>, which is not supported in level 1
|
||||
computed: (_, result) => assert_class_string(result, 'CSSStyleValue')
|
||||
}
|
||||
]);
|
||||
|
||||
// <color>s are not supported in level 1
|
||||
runUnsupportedPropertyTests('text-emphasis-color', [
|
||||
'red', '#bbff00', 'rgb(255, 255, 128)', 'hsl(50, 33%, 25%)',
|
||||
'transparent'
|
||||
]);
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user