mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +01:00
Update web-platform-tests to revision 60220357131c65146444da1f54624d5b54d0975d
This commit is contained in:
WPT Sync Bot
Tom Servo
parent
c45192614c
commit
775b784f79
2144 changed files with 58115 additions and 29658 deletions
|
|
@ -1,3 +1,4 @@
|
|||
spec: https://drafts.css-houdini.org/css-properties-values-api/
|
||||
suggested_reviewers:
|
||||
- tabatkins
|
||||
- astearns
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Anders Hartvoll Ruud" href="andruud@chromium.org">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#the-registerproperty-function" />
|
||||
<meta name="assert" content="Verifies that registering a propety does not affect the cascade" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
#outer { color: rgb(1, 1, 1); }
|
||||
#inner {
|
||||
--my-color: rgb(2, 2, 2);
|
||||
--my-color: url(not-a-color);
|
||||
color: var(--my-color);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id=outer>
|
||||
<div id=inner></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
test(function(){
|
||||
// Because var(--my-color) is invalid, our color declaration should behave
|
||||
// like color:unset, i.e. it should compute to the inherited color.
|
||||
assert_equals(inner.computedStyleMap().get('color').toString(), 'rgb(1, 1, 1)');
|
||||
|
||||
CSS.registerProperty({
|
||||
name: '--my-color',
|
||||
syntax: '<color>',
|
||||
initialValue: 'rgb(3, 3, 3)',
|
||||
inherits: false
|
||||
});
|
||||
|
||||
// After registering, var(--my-color) is still invalid. The important thing
|
||||
// here is that the computed value of color is the initialValue of
|
||||
// --my-color, and not rgb(2, 2, 2).
|
||||
assert_equals(inner.computedStyleMap().get('color').toString(), 'rgb(3, 3, 3)');
|
||||
}, 'Registering a property does not affect cascade');
|
||||
|
||||
test(function(){
|
||||
CSS.registerProperty({
|
||||
name: '--my-color-2',
|
||||
syntax: '<color>',
|
||||
initialValue: 'rgb(4, 4, 4)',
|
||||
inherits: false
|
||||
});
|
||||
|
||||
let element = document.createElement('div');
|
||||
element.style = `
|
||||
--my-color-2: rgb(2, 2, 2);
|
||||
--my-color-2: url(not-a-color);
|
||||
color: var(--my-color-2);
|
||||
`;
|
||||
|
||||
outer.appendChild(element);
|
||||
|
||||
assert_equals(element.computedStyleMap().get('color').toString(), 'rgb(4, 4, 4)');
|
||||
}, 'Registering a property does not affect parsing');
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -10,7 +10,7 @@ function assert_valid(syntax, initialValue) {
|
|||
// No actual assertions, this just shouldn't throw
|
||||
test(function() {
|
||||
var name = '--syntax-test-' + (test_count++);
|
||||
CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue});
|
||||
CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false});
|
||||
}, "syntax:'" + syntax + "', initialValue:'" + initialValue + "' is valid");
|
||||
}
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ function assert_invalid(syntax, initialValue) {
|
|||
test(function(){
|
||||
var name = '--syntax-test-' + (test_count++);
|
||||
assert_throws(new SyntaxError(),
|
||||
() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue}));
|
||||
() => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false}));
|
||||
}, "syntax:'" + syntax + "', initialValue:'" + initialValue + "' is invalid");
|
||||
}
|
||||
|
||||
|
|
@ -64,6 +64,10 @@ assert_valid("<time>", "calc(2s - 9ms)");
|
|||
assert_valid("<resolution>", "10dpi");
|
||||
assert_valid("<resolution>", "3dPpX");
|
||||
assert_valid("<resolution>", "-5.3dpcm");
|
||||
assert_valid("<transform-function>", "translateX(2px)");
|
||||
assert_valid("<transform-function>|<integer>", "5");
|
||||
assert_valid("<transform-function>|<integer>", "scale(2)");
|
||||
assert_valid("<transform-function>+", "translateX(2px) rotate(42deg)");
|
||||
assert_valid("<transform-list>", "scale(2)");
|
||||
assert_valid("<transform-list>", "translateX(2px) rotate(20deg)");
|
||||
|
||||
|
|
@ -155,6 +159,7 @@ assert_invalid("<angle>", "0");
|
|||
assert_invalid("<angle>", "10%");
|
||||
assert_invalid("<time>", "2px");
|
||||
assert_invalid("<resolution>", "10");
|
||||
assert_invalid("<transform-function>", "scale()");
|
||||
assert_invalid("<transform-list>", "scale()");
|
||||
assert_invalid("<transform-list>+", "translateX(2px) rotate(20deg)");
|
||||
assert_invalid("<color>", "fancy-looking");
|
||||
|
|
|
|||
|
|
@ -16,27 +16,33 @@ test(function() {
|
|||
|
||||
test(function() {
|
||||
// Valid property names, shouldn't throw
|
||||
CSS.registerProperty({name: '--name1'});
|
||||
CSS.registerProperty({name: '--name2, no need for escapes'});
|
||||
CSS.registerProperty({name: ['--name', 3]});
|
||||
CSS.registerProperty({name: '--name1', inherits: false});
|
||||
CSS.registerProperty({name: '--name2, no need for escapes', inherits: false});
|
||||
CSS.registerProperty({name: ['--name', 3], inherits: false});
|
||||
|
||||
// Invalid property names
|
||||
assert_throws(new TypeError(), () => CSS.registerProperty({}));
|
||||
assert_throws(new SyntaxError(), () => CSS.registerProperty({name: 'no-leading-dash'}));
|
||||
assert_throws(new SyntaxError(), () => CSS.registerProperty({name: ''}));
|
||||
assert_throws(new SyntaxError(), () => CSS.registerProperty({name: '\\--name'}));
|
||||
assert_throws(new SyntaxError(), () => CSS.registerProperty({name: 'no-leading-dash', inherits: false}));
|
||||
assert_throws(new SyntaxError(), () => CSS.registerProperty({name: '', inherits: false}));
|
||||
assert_throws(new SyntaxError(), () => CSS.registerProperty({name: '\\--name', inherits: false}));
|
||||
}, "registerProperty requires a name matching <custom-property-name>");
|
||||
|
||||
test(function() {
|
||||
CSS.registerProperty({name: '--syntax-test-1', syntax: '*'});
|
||||
CSS.registerProperty({name: '--syntax-test-2', syntax: ' * '});
|
||||
CSS.registerProperty({name: '--syntax-test-1', syntax: '*', inherits: false});
|
||||
CSS.registerProperty({name: '--syntax-test-2', syntax: ' * ', inherits: false});
|
||||
assert_throws(new SyntaxError(),
|
||||
() => CSS.registerProperty({name: '--syntax-test-3', syntax: 'length'}));
|
||||
}, "registerProperty only allows omitting initialValue is syntax is '*'");
|
||||
() => CSS.registerProperty({name: '--syntax-test-3', syntax: 'length', inherits: false}));
|
||||
}, "registerProperty only allows omitting initialValue if syntax is '*'");
|
||||
|
||||
test(function() {
|
||||
CSS.registerProperty({name: '--re-register', syntax: '<length>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--re-register', syntax: '<length>', initialValue: '0px', inherits: false});
|
||||
assert_throws({name: 'InvalidModificationError'},
|
||||
() => CSS.registerProperty({name: '--re-register', syntax: '<percentage>', initialValue: '0%'}));
|
||||
() => CSS.registerProperty({name: '--re-register', syntax: '<percentage>', initialValue: '0%', inherits: false}));
|
||||
}, "registerProperty fails for an already registered property");
|
||||
|
||||
test(function(){
|
||||
CSS.registerProperty({name: '--inherit-test-1', syntax: '<length>', initialValue: '0px', inherits: true});
|
||||
CSS.registerProperty({name: '--inherit-test-2', syntax: '<length>', initialValue: '0px', inherits: false});
|
||||
assert_throws(new TypeError(), () => CSS.registerProperty({name: '--inherit-test-3', syntax: '<length>', initialValue: '0px'}));
|
||||
}, "registerProperty requires inherits");
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@ test(function() {
|
|||
CSS.registerProperty({name: '--inherited-length-1', syntax: '<length>', initialValue: '1px', inherits: true});
|
||||
CSS.registerProperty({name: '--inherited-length-2', syntax: '<length>', initialValue: '2px', inherits: true});
|
||||
CSS.registerProperty({name: '--inherited-length-3', syntax: '<length>', initialValue: '3px', inherits: true});
|
||||
CSS.registerProperty({name: '--non-inherited-length-1', syntax: '<length>', initialValue: '4px'});
|
||||
CSS.registerProperty({name: '--non-inherited-length-2', syntax: '<length>', initialValue: '5px'});
|
||||
CSS.registerProperty({name: '--non-inherited-length-3', syntax: '<length>', initialValue: '6px'});
|
||||
CSS.registerProperty({name: '--non-inherited-length-1', syntax: '<length>', initialValue: '4px', inherits: false});
|
||||
CSS.registerProperty({name: '--non-inherited-length-2', syntax: '<length>', initialValue: '5px', inherits: false});
|
||||
CSS.registerProperty({name: '--non-inherited-length-3', syntax: '<length>', initialValue: '6px', inherits: false});
|
||||
|
||||
outerComputedStyle = getComputedStyle(outer);
|
||||
assert_equals(outerComputedStyle.getPropertyValue('--inherited-length-1'), '10px');
|
||||
|
|
|
|||
|
|
@ -17,39 +17,53 @@
|
|||
--length-percentage-1: 17em;
|
||||
--length-percentage-2: 18%;
|
||||
--length-percentage-3: calc(19em - 2%);
|
||||
--csv-1: 10px, 3em;
|
||||
--csv-2: 4em ,9px;
|
||||
--csv-3: 8em;
|
||||
--csv-4: 3% , 10vmax , 22px;
|
||||
--csv-5: calc(50% + 1em), 4px;
|
||||
--csv-6: calc(13% + 37px);
|
||||
--list-1: 10px 3em;
|
||||
--list-2: 4em 9px;
|
||||
--list-3: 3% 10vmax 22px;
|
||||
--list-4: calc(50% + 1em) 4px;
|
||||
}
|
||||
#fontSizeCycle {
|
||||
--font-size: 2em;
|
||||
font-size: var(--font-size);
|
||||
--transform-function-1: translateX(2px);
|
||||
--transform-function-2: translateX(10em);
|
||||
--transform-function-3: translateX(calc(11em + 10%));
|
||||
--transform-function-4: translateX(10%) scale(2);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id=divWithFontSizeSet></div>
|
||||
<div id=parentDiv>
|
||||
<div id=divWithFontSizeInherited></div>
|
||||
<div id=fontSizeCycle></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(() => {
|
||||
CSS.registerProperty({name: '--length-1', syntax: '<length>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--length-2', syntax: '<length>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--length-3', syntax: '<length>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--length-4', syntax: '<length>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--length-5', syntax: '<length>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--length-6', syntax: '<length>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--length-percentage-1', syntax: '<length-percentage>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--length-percentage-2', syntax: '<length-percentage>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--length-percentage-3', syntax: '<length-percentage>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--list-1', syntax: '<length>+', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--list-2', syntax: '<length>+', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--list-3', syntax: '<length-percentage>+', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--list-4', syntax: '<length-percentage>+', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--font-size', syntax: '<length>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--length-1', syntax: '<length>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--length-2', syntax: '<length>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--length-3', syntax: '<length>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--length-4', syntax: '<length>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--length-5', syntax: '<length>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--length-6', syntax: '<length>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--length-percentage-1', syntax: '<length-percentage>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--length-percentage-2', syntax: '<length-percentage>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--length-percentage-3', syntax: '<length-percentage>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--csv-1', syntax: '<length>#', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--csv-2', syntax: '<length>#', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--csv-3', syntax: '<length>#', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--csv-4', syntax: '<length-percentage>#', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--csv-5', syntax: '<length-percentage>#', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--csv-6', syntax: '<length-percentage>#', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--list-1', syntax: '<length>+', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--list-2', syntax: '<length>+', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--list-3', syntax: '<length-percentage>+', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--list-4', syntax: '<length-percentage>+', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--transform-function-1', syntax: '<transform-function>', initialValue: 'translateX(0px)', inherits: false});
|
||||
CSS.registerProperty({name: '--transform-function-2', syntax: '<transform-function>', initialValue: 'translateX(0px)', inherits: false});
|
||||
CSS.registerProperty({name: '--transform-function-3', syntax: '<transform-function>', initialValue: 'translateX(0px)', inherits: false});
|
||||
CSS.registerProperty({name: '--transform-function-4', syntax: '<transform-function>+', initialValue: 'translateX(0px)', inherits: false});
|
||||
}, "CSS.registerProperty");
|
||||
|
||||
for (var element of [divWithFontSizeSet, divWithFontSizeInherited]) {
|
||||
|
|
@ -71,6 +85,18 @@ for (var element of [divWithFontSizeSet, divWithFontSizeInherited]) {
|
|||
assert_equals(computedStyle.getPropertyValue('--length-percentage-3'), 'calc(190px + -2%)');
|
||||
}, "<length-percentage> values are computed correctly for " + id);
|
||||
|
||||
test(function() {
|
||||
assert_equals(computedStyle.getPropertyValue('--csv-1'), '10px, 30px');
|
||||
assert_equals(computedStyle.getPropertyValue('--csv-2'), '40px, 9px');
|
||||
assert_equals(computedStyle.getPropertyValue('--csv-3'), '80px');
|
||||
}, "<length># values are computed correctly for " + id);
|
||||
|
||||
test(function() {
|
||||
assert_equals(computedStyle.getPropertyValue('--csv-4'), '3%, 80px, 22px');
|
||||
assert_equals(computedStyle.getPropertyValue('--csv-5'), 'calc(10px + 50%), 4px');
|
||||
assert_equals(computedStyle.getPropertyValue('--csv-6'), 'calc(37px + 13%)');
|
||||
}, "<length-percentage># values are computed correctly for " + id);
|
||||
|
||||
test(function() {
|
||||
assert_equals(computedStyle.getPropertyValue('--list-1'), '10px 30px');
|
||||
assert_equals(computedStyle.getPropertyValue('--list-2'), '40px 9px');
|
||||
|
|
@ -80,11 +106,12 @@ for (var element of [divWithFontSizeSet, divWithFontSizeInherited]) {
|
|||
assert_equals(computedStyle.getPropertyValue('--list-3'), '3% 80px 22px');
|
||||
assert_equals(computedStyle.getPropertyValue('--list-4'), 'calc(10px + 50%) 4px');
|
||||
}, "<length-percentage>+ values are computed correctly for " + id);
|
||||
}
|
||||
|
||||
test(function() {
|
||||
var computedStyle = getComputedStyle(fontSizeCycle);
|
||||
assert_equals(computedStyle.fontSize, '20px');
|
||||
assert_equals(computedStyle.getPropertyValue('--font-size'), '40px');
|
||||
}, "font-size with a var() reference to a registered property using ems works as expected");
|
||||
test(function() {
|
||||
assert_equals(computedStyle.getPropertyValue('--transform-function-1'), 'translateX(2px)');
|
||||
assert_equals(computedStyle.getPropertyValue('--transform-function-2'), 'translateX(100px)');
|
||||
assert_equals(computedStyle.getPropertyValue('--transform-function-3'), 'translateX(calc(110px + 10%))');
|
||||
assert_equals(computedStyle.getPropertyValue('--transform-function-4'), 'translateX(10%) scale(2)');
|
||||
}, "<transform-function> values are computed correctly for " + id);
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ test(function() {
|
|||
}, "CSSOM setters function as expected for unregistered properties");
|
||||
|
||||
test(function() {
|
||||
CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--color', syntax: '<color>', initialValue: 'white', inherits: true});
|
||||
}, "CSS.registerProperty");
|
||||
|
||||
|
|
|
|||
|
|
@ -12,18 +12,20 @@
|
|||
<div id=target></div>
|
||||
<script>
|
||||
test(function() {
|
||||
CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: 'calc(10px + 15px)'});
|
||||
CSS.registerProperty({name: '--length-percentage', syntax: '<length-percentage>', initialValue: 'calc(1in + 10% + 4px)'});
|
||||
CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: 'calc(10px + 15px)', inherits: false});
|
||||
CSS.registerProperty({name: '--length-percentage', syntax: '<length-percentage>', initialValue: 'calc(1in + 10% + 4px)', inherits: false});
|
||||
CSS.registerProperty({name: '--inherited-color', syntax: '<color>', initialValue: 'pink', inherits: true});
|
||||
CSS.registerProperty({name: '--non-inherited-color', syntax: '<color>', initialValue: 'purple'});
|
||||
CSS.registerProperty({name: '--single-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 2))'});
|
||||
CSS.registerProperty({name: '--multiple-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 1)) translateX(calc(3px + 1px))'});
|
||||
CSS.registerProperty({name: '--non-inherited-color', syntax: '<color>', initialValue: 'purple', inherits: false});
|
||||
CSS.registerProperty({name: '--transform-function', syntax: '<transform-function>', initialValue: 'rotate(42deg)', inherits: false});
|
||||
CSS.registerProperty({name: '--single-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 2))', inherits: false});
|
||||
CSS.registerProperty({name: '--multiple-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 1)) translateX(calc(3px + 1px))', inherits: false});
|
||||
|
||||
computedStyle = getComputedStyle(target);
|
||||
assert_equals(computedStyle.getPropertyValue('--length'), '25px');
|
||||
assert_equals(computedStyle.getPropertyValue('--length-percentage'), 'calc(100px + 10%)');
|
||||
assert_equals(computedStyle.getPropertyValue('--inherited-color'), 'pink');
|
||||
assert_equals(computedStyle.getPropertyValue('--non-inherited-color'), 'purple');
|
||||
assert_equals(computedStyle.getPropertyValue('--transform-function'), 'rotate(42deg)');
|
||||
assert_equals(computedStyle.getPropertyValue('--single-transform-list'), 'scale(4)');
|
||||
assert_equals(computedStyle.getPropertyValue('--multiple-transform-list'), 'scale(3) translateX(4px)');
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,167 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Anders Hartvoll Ruud" href="andruud@chromium.org">
|
||||
<!-- TODO(andruud): Add Typed OM details to spec and link to it here. -->
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#supported-syntax-strings" />
|
||||
<meta name="assert" content="Verifies that registered custom properties interact correctly with CSS Typed OM" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<div id=target></div>
|
||||
|
||||
<script>
|
||||
|
||||
// Properties are generated on demand, as `--prop-${g_counter}`.
|
||||
let g_counter = 1;
|
||||
|
||||
// Generate a property and return its name.
|
||||
function gen_prop(syntax, initialValue) {
|
||||
let name = `--prop-${g_counter}`;
|
||||
CSS.registerProperty({
|
||||
name: name,
|
||||
syntax: syntax,
|
||||
initialValue: initialValue,
|
||||
inherits: false
|
||||
});
|
||||
g_counter++;
|
||||
return name;
|
||||
}
|
||||
|
||||
// On the target element, verify that computed value of 'name' is an instance
|
||||
// of 'expected' and not an instance of CSSUnparsedValue.
|
||||
//
|
||||
// If 'value' is non-null, that value is first set on the attributeStyleMap
|
||||
// of the target.
|
||||
function assert_computed_type(name, value, expected) {
|
||||
if (expected == CSSUnparsedValue) {
|
||||
throw 'CSSUnparsedValue may not be used as expected type';
|
||||
}
|
||||
|
||||
if (value != null) {
|
||||
target.attributeStyleMap.set(name, value);
|
||||
}
|
||||
|
||||
let computedValue = target.computedStyleMap().get(name);
|
||||
|
||||
assert_false(computedValue instanceof CSSUnparsedValue);
|
||||
assert_true(computedValue instanceof expected);
|
||||
|
||||
if (value != null) {
|
||||
target.attributeStyleMap.delete(name);
|
||||
}
|
||||
}
|
||||
|
||||
test(function(){
|
||||
let name = gen_prop('*', 'if(){}');
|
||||
assert_true(target.computedStyleMap().get(name) instanceof CSSUnparsedValue);
|
||||
|
||||
target.attributeStyleMap.set(name, 'as{}df');
|
||||
assert_true(target.computedStyleMap().get(name) instanceof CSSUnparsedValue);
|
||||
target.attributeStyleMap.delete(name);
|
||||
}, 'Computed * is reified as CSSUnparsedValue');
|
||||
|
||||
test(function(){
|
||||
assert_computed_type(gen_prop('<angle>', '42deg'), null, CSSUnitValue);
|
||||
assert_computed_type(gen_prop('<angle> | fail', 'fail'), '42deg', CSSUnitValue);
|
||||
}, 'Computed <angle> is reified as CSSUnitValue');
|
||||
|
||||
test(function(){
|
||||
assert_computed_type(gen_prop('<color>', '#fefefe'), null, CSSStyleValue);
|
||||
assert_computed_type(gen_prop('<color> | fail', 'fail'), null, CSSStyleValue);
|
||||
}, 'Computed <color> is reified as CSSStyleValue');
|
||||
|
||||
test(function(){
|
||||
assert_computed_type(gen_prop('<custom-ident>', 'none'), null, CSSKeywordValue);
|
||||
assert_computed_type(gen_prop('<custom-ident> | <length>', '10px'), 'none', CSSKeywordValue);
|
||||
}, 'Computed <custom-ident> is reified as CSSKeywordValue');
|
||||
|
||||
test(function(){
|
||||
assert_computed_type(gen_prop('<image>', 'url(thing.png)'), null, CSSImageValue);
|
||||
assert_computed_type(gen_prop('<image> | fail', 'fail'), 'url(thing.png)', CSSImageValue);
|
||||
}, 'Computed <image> [url] is reified as CSSImageValue');
|
||||
|
||||
test(function(){
|
||||
assert_computed_type(gen_prop('<integer>', '100'), null, CSSUnitValue);
|
||||
assert_computed_type(gen_prop('<integer> | fail', 'fail'), '100', CSSUnitValue);
|
||||
}, 'Computed <integer> is reified as CSSUnitValue');
|
||||
|
||||
test(function(){
|
||||
assert_computed_type(gen_prop('<length-percentage>', '10%'), null, CSSUnitValue);
|
||||
assert_computed_type(gen_prop('<length-percentage> | fail', 'fail'), '10%', CSSUnitValue);
|
||||
}, 'Computed <length-percentage> [%] is reified as CSSUnitValue');
|
||||
|
||||
test(function(){
|
||||
assert_computed_type(gen_prop('<length-percentage>', '10px'), null, CSSUnitValue);
|
||||
assert_computed_type(gen_prop('<length-percentage> | fail', 'fail'), '10px', CSSUnitValue);
|
||||
}, 'Computed <length-percentage> [px] is reified as CSSUnitValue');
|
||||
|
||||
test(function(){
|
||||
assert_computed_type(gen_prop('<length-percentage>', 'calc(10px + 10%)'), null, CSSMathSum);
|
||||
assert_computed_type(gen_prop('<length-percentage> | fail', 'fail'), 'calc(10px + 10%)', CSSMathSum);
|
||||
}, 'Computed <length-percentage> [px + %] is reified as CSSMathSum');
|
||||
|
||||
test(function(){
|
||||
assert_computed_type(gen_prop('<length>', '10px'), null, CSSUnitValue);
|
||||
assert_computed_type(gen_prop('<length> | fail', 'fail'), '10px', CSSUnitValue);
|
||||
}, 'Computed <length> is reified as CSSUnitValue');
|
||||
|
||||
test(function(){
|
||||
assert_computed_type(gen_prop('<number>', '42'), null, CSSUnitValue);
|
||||
assert_computed_type(gen_prop('<number> | fail', 'fail'), '42', CSSUnitValue);
|
||||
}, 'Computed <number> is reified as CSSUnitValue');
|
||||
|
||||
test(function(){
|
||||
assert_computed_type(gen_prop('<percentage>', '10%'), null, CSSUnitValue);
|
||||
assert_computed_type(gen_prop('<percentage> | fail', 'fail'), '10%', CSSUnitValue);
|
||||
}, 'Computed <percentage> is reified as CSSUnitValue');
|
||||
|
||||
test(function(){
|
||||
assert_computed_type(gen_prop('<resolution>', '300dpi'), null, CSSUnitValue);
|
||||
assert_computed_type(gen_prop('<resolution> | fail', 'fail'), '300dpi', CSSUnitValue);
|
||||
}, 'Computed <resolution> is reified as CSSUnitValue');
|
||||
|
||||
test(function(){
|
||||
assert_computed_type(gen_prop('<time>', '42s'), null, CSSUnitValue);
|
||||
assert_computed_type(gen_prop('<time> | fail', 'fail'), '42s', CSSUnitValue);
|
||||
}, 'Computed <time> is reified as CSSUnitValue');
|
||||
|
||||
test(function(){
|
||||
assert_computed_type(gen_prop('<url>', 'url(a)'), null, CSSStyleValue);
|
||||
assert_computed_type(gen_prop('<url> | fail', 'fail'), 'url(a)', CSSStyleValue);
|
||||
}, 'Computed <url> is reified as CSSStyleValue');
|
||||
|
||||
test(function(){
|
||||
assert_computed_type(gen_prop('thing1 | THING2', 'thing1'), null, CSSKeywordValue);
|
||||
assert_computed_type(gen_prop('thing1 | THING2 | <url>', 'url(fail)'), 'THING2', CSSKeywordValue);
|
||||
}, 'Computed ident is reified as CSSKeywordValue');
|
||||
|
||||
test(function(){
|
||||
assert_computed_type(gen_prop('<length>+', '10px 20px'), null, CSSUnitValue);
|
||||
assert_computed_type(gen_prop('<length>+', '0px 0px'), '10px 20px', CSSUnitValue);
|
||||
}, 'First computed value correctly reified in space-separated list');
|
||||
|
||||
test(function(){
|
||||
assert_computed_type(gen_prop('<length>#', '10px, 20px'), null, CSSUnitValue);
|
||||
assert_computed_type(gen_prop('<length>#', '0px, 0px'), '10px, 20px', CSSUnitValue);
|
||||
}, 'First computed value correctly reified in comma-separated list');
|
||||
|
||||
test(function(){
|
||||
let name = gen_prop('<length>+', '10px 20px');
|
||||
assert_equals(target.computedStyleMap().getAll(name).length, 2);
|
||||
assert_true(target.computedStyleMap().getAll(name).every(x => x instanceof CSSUnitValue));
|
||||
|
||||
target.attributeStyleMap.set(name, '10px 20px 30px');
|
||||
assert_equals(target.computedStyleMap().getAll(name).length, 3);
|
||||
assert_true(target.computedStyleMap().getAll(name).every(x => x instanceof CSSUnitValue));
|
||||
}, 'All computed values correctly reified in space-separated list');
|
||||
|
||||
test(function(){
|
||||
let name = gen_prop('<length>#', '10px, 20px');
|
||||
assert_equals(target.computedStyleMap().getAll(name).length, 2);
|
||||
assert_true(target.computedStyleMap().getAll(name).every(x => x instanceof CSSUnitValue));
|
||||
|
||||
target.attributeStyleMap.set(name, '10px, 20px, 30px');
|
||||
assert_equals(target.computedStyleMap().getAll(name).length, 3);
|
||||
assert_true(target.computedStyleMap().getAll(name).every(x => x instanceof CSSUnitValue));
|
||||
}, 'All computed values correctly reified in comma-separated list');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Anders Hartvoll Ruud" href="andruud@chromium.org">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#dependency-cycles-via-relative-units" />
|
||||
<meta name="assert" content="This test verifies that reference cycles via units are detected" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
function register_length(name) {
|
||||
CSS.registerProperty({
|
||||
name: name,
|
||||
syntax: '<length>',
|
||||
initialValue: '0px',
|
||||
inherits: false
|
||||
});
|
||||
}
|
||||
|
||||
register_length('--font-size-em');
|
||||
register_length('--font-size-rem');
|
||||
register_length('--font-size-ex');
|
||||
register_length('--font-size-ch');
|
||||
register_length('--font-size-px');
|
||||
</script>
|
||||
<style>
|
||||
:root, #target {
|
||||
--font-size-em: 2em;
|
||||
--font-size-rem: 2rem;
|
||||
--font-size-ex: 2ex;
|
||||
--font-size-ch: 2ch;
|
||||
--font-size-px: 42px;
|
||||
}
|
||||
|
||||
#target {
|
||||
font-size: 11px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id=target></div>
|
||||
<div id=ref></div>
|
||||
|
||||
<script>
|
||||
|
||||
// Compute a dimension (e.g. 1em) given a certain fontSize.
|
||||
function compute_dimension(dimension, fontSize, element = ref) {
|
||||
element.style = `font-size: ${fontSize}; margin-bottom: ${dimension};`;
|
||||
return getComputedStyle(element).marginBottom;
|
||||
}
|
||||
|
||||
function assert_property_equals(name, value, element = target) {
|
||||
var computedStyle = getComputedStyle(element);
|
||||
assert_equals(computedStyle.getPropertyValue(name), value);
|
||||
}
|
||||
|
||||
let unsetFontSize = compute_dimension('1em', 'unset');
|
||||
|
||||
test(function() {
|
||||
target.style = 'font-size: var(--font-size-px);';
|
||||
assert_property_equals('font-size', '42px');
|
||||
assert_property_equals('--font-size-px', '42px');
|
||||
}, 'Non-font-dependent variables can be used in font-size');
|
||||
|
||||
test(function() {
|
||||
target.style = 'font-size: var(--font-size-em);';
|
||||
assert_property_equals('font-size', unsetFontSize);
|
||||
assert_property_equals('--font-size-em', compute_dimension('2em', 'unset'));
|
||||
}, 'Lengths with em units may not be referenced from font-size');
|
||||
|
||||
test(function() {
|
||||
target.style = 'font-size: var(--font-size-ex);';
|
||||
assert_property_equals('font-size', unsetFontSize);
|
||||
assert_property_equals('--font-size-ex', compute_dimension('2ex', 'unset'));
|
||||
}, 'Lengths with ex units may not be referenced from font-size');
|
||||
|
||||
test(function() {
|
||||
target.style = 'font-size: var(--font-size-ch);';
|
||||
assert_property_equals('font-size', unsetFontSize);
|
||||
assert_property_equals('--font-size-ch', compute_dimension('2ch', 'unset'));
|
||||
}, 'Lengths with ch units may not be referenced from font-size');
|
||||
|
||||
test(function() {
|
||||
target.style = 'font-size: var(--font-size-rem);';
|
||||
let expected = compute_dimension('2rem', 'unset', document.documentElement);
|
||||
assert_property_equals('--font-size-rem', expected);
|
||||
assert_property_equals('font-size', expected);
|
||||
}, 'Lengths with rem units may be referenced from font-size on non-root element');
|
||||
|
||||
test(function() {
|
||||
let root = document.documentElement;
|
||||
root.style = 'font-size: var(--font-size-rem);';
|
||||
let expected1rem = compute_dimension('1rem', 'unset', root);
|
||||
let expected2rem = compute_dimension('2rem', 'unset', root);
|
||||
root.style = 'font-size: unset;';
|
||||
assert_property_equals('font-size', expected1rem, root);
|
||||
assert_property_equals('--font-size-rem', expected2rem, root);
|
||||
}, 'Lengths with rem units may not be referenced from font-size on root element');
|
||||
|
||||
test(function() {
|
||||
target.style = 'font-size: var(--noexist, var(--font-size-em));';
|
||||
assert_property_equals('font-size', unsetFontSize);
|
||||
}, 'Fallback may not use font-relative units');
|
||||
|
||||
test(function() {
|
||||
target.style = 'font-size: var(--font-size-em, 42px);';
|
||||
assert_property_equals('font-size', '42px');
|
||||
}, 'Fallback triggered when em unit cycle is detected');
|
||||
|
||||
test(function() {
|
||||
target.style = 'font-size: var(--font-size-ex, 42px);';
|
||||
assert_property_equals('font-size', '42px');
|
||||
}, 'Fallback triggered when ex unit cycle is detected');
|
||||
|
||||
test(function() {
|
||||
target.style = 'font-size: var(--font-size-ch, 42px);';
|
||||
assert_property_equals('font-size', '42px');
|
||||
}, 'Fallback triggered when ch unit cycle is detected');
|
||||
|
||||
test(function() {
|
||||
let root = document.documentElement;
|
||||
root.style = 'font-size: var(--font-size-rem, 42px);';
|
||||
assert_property_equals('font-size', '42px', root);
|
||||
root.style = 'font-size: unset;';
|
||||
}, 'Fallback triggered when rem unit cycle is detected on root element');
|
||||
|
||||
</script>
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Anders Hartvoll Ruud" href="andruud@chromium.org">
|
||||
<!-- TODO(andruud): Replace help link when spec is updated. -->
|
||||
<link rel="help" href="https://github.com/w3c/css-houdini-drafts/issues/393#issuecomment-294706386" />
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#relative-urls" />
|
||||
<meta name="assert" content="This test verifies that relative URLs in registered properties resolve correctly" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
|
@ -19,10 +19,10 @@
|
|||
<div id=test1></div>
|
||||
<script>
|
||||
test(function() {
|
||||
CSS.registerProperty({name: '--registered-1-a', syntax: '<length>', initialValue: '1px'});
|
||||
CSS.registerProperty({name: '--registered-1-b', syntax: '<length>', initialValue: '2px'});
|
||||
CSS.registerProperty({name: '--registered-1-c', syntax: '<length>', initialValue: '3px'});
|
||||
CSS.registerProperty({name: '--registered-1-d', syntax: '<length>', initialValue: '4px'});
|
||||
CSS.registerProperty({name: '--registered-1-a', syntax: '<length>', initialValue: '1px', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-1-b', syntax: '<length>', initialValue: '2px', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-1-c', syntax: '<length>', initialValue: '3px', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-1-d', syntax: '<length>', initialValue: '4px', inherits: false});
|
||||
|
||||
computedStyle = getComputedStyle(test1);
|
||||
assert_equals(computedStyle.getPropertyValue('--registered-1-a'), '1px');
|
||||
|
|
@ -56,11 +56,11 @@ test(function() {
|
|||
<div id=test2></div>
|
||||
<script>
|
||||
test(function() {
|
||||
CSS.registerProperty({name: '--registered-2-a', syntax: '<length>', initialValue: '1px'});
|
||||
CSS.registerProperty({name: '--registered-2-b', syntax: '<length>', initialValue: '2px'});
|
||||
CSS.registerProperty({name: '--registered-2-c', syntax: '<length>', initialValue: '3px'});
|
||||
CSS.registerProperty({name: '--registered-2-d', syntax: '<length>', initialValue: '4px'});
|
||||
CSS.registerProperty({name: '--registered-2-e', syntax: '<length>', initialValue: '5px'});
|
||||
CSS.registerProperty({name: '--registered-2-a', syntax: '<length>', initialValue: '1px', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-2-b', syntax: '<length>', initialValue: '2px', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-2-c', syntax: '<length>', initialValue: '3px', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-2-d', syntax: '<length>', initialValue: '4px', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-2-e', syntax: '<length>', initialValue: '5px', inherits: false});
|
||||
|
||||
computedStyle = getComputedStyle(test2);
|
||||
assert_equals(computedStyle.getPropertyValue('--registered-2-a'), '1px');
|
||||
|
|
@ -95,10 +95,10 @@ test(function() {
|
|||
<div id=test3></div>
|
||||
<script>
|
||||
test(function() {
|
||||
CSS.registerProperty({name: '--registered-3-a', syntax: '<length>', initialValue: '1px'});
|
||||
CSS.registerProperty({name: '--registered-3-b', syntax: '<length>', initialValue: '2px'});
|
||||
CSS.registerProperty({name: '--registered-3-c', syntax: '<length>', initialValue: '3px'});
|
||||
CSS.registerProperty({name: '--registered-3-d', syntax: '<length>', initialValue: '4px'});
|
||||
CSS.registerProperty({name: '--registered-3-a', syntax: '<length>', initialValue: '1px', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-3-b', syntax: '<length>', initialValue: '2px', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-3-c', syntax: '<length>', initialValue: '3px', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-3-d', syntax: '<length>', initialValue: '4px', inherits: false});
|
||||
|
||||
computedStyle = getComputedStyle(test3);
|
||||
assert_equals(computedStyle.getPropertyValue('--unregistered-3-a'), '');
|
||||
|
|
@ -128,9 +128,9 @@ test(function() {
|
|||
<div id=test4></div>
|
||||
<script>
|
||||
test(function() {
|
||||
CSS.registerProperty({name: '--registered-4-a', syntax: '*'});
|
||||
CSS.registerProperty({name: '--registered-4-b', syntax: '*', initialValue: 'moo'});
|
||||
CSS.registerProperty({name: '--registered-4-c', syntax: '*', initialValue: 'circle'});
|
||||
CSS.registerProperty({name: '--registered-4-a', syntax: '*', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-4-b', syntax: '*', initialValue: 'moo', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-4-c', syntax: '*', initialValue: 'circle', inherits: false});
|
||||
|
||||
computedStyle = getComputedStyle(test4);
|
||||
assert_equals(computedStyle.getPropertyValue('--registered-4-a'), '');
|
||||
|
|
|
|||
|
|
@ -27,19 +27,19 @@ div {
|
|||
<div id=element></div>
|
||||
<script>
|
||||
test(function() {
|
||||
CSS.registerProperty({name: '--123px', syntax: '<length>', initialValue: '123px'});
|
||||
CSS.registerProperty({name: '--123px', syntax: '<length>', initialValue: '123px', inherits: false});
|
||||
|
||||
CSS.registerProperty({name: '--registered-length-1', syntax: '<length>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--registered-length-2', syntax: '<length>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--registered-length-3', syntax: '<length>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--registered-length-4', syntax: '<length>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--registered-length-5', syntax: '<length>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--registered-length-6', syntax: '<length>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--registered-length-7', syntax: '<length>', initialValue: '0px'});
|
||||
CSS.registerProperty({name: '--registered-length-invalid', syntax: '<length>', initialValue: '15px'});
|
||||
CSS.registerProperty({name: '--registered-length-1', syntax: '<length>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-length-2', syntax: '<length>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-length-3', syntax: '<length>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-length-4', syntax: '<length>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-length-5', syntax: '<length>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-length-6', syntax: '<length>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-length-7', syntax: '<length>', initialValue: '0px', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-length-invalid', syntax: '<length>', initialValue: '15px', inherits: false});
|
||||
|
||||
CSS.registerProperty({name: '--registered-token-stream-1', syntax: '*'});
|
||||
CSS.registerProperty({name: '--registered-token-stream-2', syntax: '*'});
|
||||
CSS.registerProperty({name: '--registered-token-stream-1', syntax: '*', inherits: false});
|
||||
CSS.registerProperty({name: '--registered-token-stream-2', syntax: '*', inherits: false});
|
||||
|
||||
computedStyle = getComputedStyle(element);
|
||||
assert_equals(computedStyle.getPropertyValue('--registered-length-1'), '10px');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue