Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'

This commit is contained in:
WPT Sync Bot 2022-11-10 01:22:36 +00:00
parent ace9b32b1c
commit df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions

View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<title>@property: viewport units in initial value (dynamic)</title>
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#initial-value-descriptor" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
iframe {
width: 400px;
height: 200px;
}
</style>
<iframe id=iframe srcdoc="
<style>
@property --10vw { syntax: '<length>'; inherits: true; initial-value: 10vw}
@property --10vh { syntax: '<length>'; inherits: true; initial-value: 10vh}
div {
background: green;
width: var(--10vw);
height: var(--10vh);
}
</style>
<div style='width:10vw'></div>
"></iframe>
<script>
iframe.offsetTop;
function waitForLoad(w) {
return new Promise(resolve => w.addEventListener('load', resolve));
}
promise_test(async (t) => {
await waitForLoad(window);
let element = iframe.contentDocument.querySelector('div');
assert_equals(getComputedStyle(element).getPropertyValue('--10vw'), '40px');
assert_equals(getComputedStyle(element).getPropertyValue('--10vh'), '20px');
iframe.style.width = '100px';
assert_equals(getComputedStyle(element).getPropertyValue('--10vw'), '10px');
assert_equals(getComputedStyle(element).getPropertyValue('--10vh'), '20px');
});
</script>

View file

@ -0,0 +1,91 @@
<!DOCTYPE html>
<title>@property: viewport units in initial value</title>
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#initial-value-descriptor" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
iframe {
width: 400px;
height: 200px;
}
</style>
<iframe id=iframe srcdoc="
<style>
@property --10vw { syntax: '<length>'; inherits: true; initial-value: 10vw}
@property --10vh { syntax: '<length>'; inherits: true; initial-value: 10vh}
@property --10vi { syntax: '<length>'; inherits: true; initial-value: 10vi}
@property --10vb { syntax: '<length>'; inherits: true; initial-value: 10vb}
@property --10vmin { syntax: '<length>'; inherits: true; initial-value: 10vmin}
@property --10vmax { syntax: '<length>'; inherits: true; initial-value: 10vmax}
@property --10svw { syntax: '<length>'; inherits: true; initial-value: 10svw}
@property --10svh { syntax: '<length>'; inherits: true; initial-value: 10svh}
@property --10svi { syntax: '<length>'; inherits: true; initial-value: 10svi}
@property --10svb { syntax: '<length>'; inherits: true; initial-value: 10svb}
@property --10svmin { syntax: '<length>'; inherits: true; initial-value: 10svmin}
@property --10svmax { syntax: '<length>'; inherits: true; initial-value: 10svmax}
@property --10lvw { syntax: '<length>'; inherits: true; initial-value: 10lvw}
@property --10lvh { syntax: '<length>'; inherits: true; initial-value: 10lvh}
@property --10lvi { syntax: '<length>'; inherits: true; initial-value: 10lvi}
@property --10lvb { syntax: '<length>'; inherits: true; initial-value: 10lvb}
@property --10lvmin { syntax: '<length>'; inherits: true; initial-value: 10lvmin}
@property --10lvmax { syntax: '<length>'; inherits: true; initial-value: 10lvmax}
@property --10dvw { syntax: '<length>'; inherits: true; initial-value: 10dvw}
@property --10dvh { syntax: '<length>'; inherits: true; initial-value: 10dvh}
@property --10dvi { syntax: '<length>'; inherits: true; initial-value: 10dvi}
@property --10dvb { syntax: '<length>'; inherits: true; initial-value: 10dvb}
@property --10dvmin { syntax: '<length>'; inherits: true; initial-value: 10dvmin}
@property --10dvmax { syntax: '<length>'; inherits: true; initial-value: 10dvmax}
</style>
<div></div>
"></iframe>
<script>
iframe.offsetTop;
function waitForLoad(w) {
return new Promise(resolve => {
if (w.document.readyState == 'complete')
resolve();
else
w.addEventListener('load', resolve)
});
}
function test_unit(element, actual, expected) {
promise_test(async (t) => {
await waitForLoad(window);
let element = iframe.contentDocument.querySelector('div');
assert_equals(getComputedStyle(element).getPropertyValue(`--${actual}`), expected);
},`${actual} is ${expected}`);
}
test_unit(iframe, '10vw', '40px');
test_unit(iframe, '10vh', '20px');
test_unit(iframe, '10vi', '40px');
test_unit(iframe, '10vb', '20px');
test_unit(iframe, '10vmin', '20px');
test_unit(iframe, '10vmax', '40px');
test_unit(iframe, '10svw', '40px');
test_unit(iframe, '10svh', '20px');
test_unit(iframe, '10svi', '40px');
test_unit(iframe, '10svb', '20px');
test_unit(iframe, '10svmin', '20px');
test_unit(iframe, '10svmax', '40px');
test_unit(iframe, '10lvw', '40px');
test_unit(iframe, '10lvh', '20px');
test_unit(iframe, '10lvi', '40px');
test_unit(iframe, '10lvb', '20px');
test_unit(iframe, '10lvmin', '20px');
test_unit(iframe, '10lvmax', '40px');
test_unit(iframe, '10dvw', '40px');
test_unit(iframe, '10dvh', '20px');
test_unit(iframe, '10dvi', '40px');
test_unit(iframe, '10dvb', '20px');
test_unit(iframe, '10dvmin', '20px');
test_unit(iframe, '10dvmax', '40px');
</script>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="help" href="https://crbug.com/1356699">
<audio>
<div>
<div id=test1></div>
</div>
</audio>
<script>
getComputedStyle(test1).getPropertyValue('--a');
CSS.registerProperty({name: '--a', syntax: '<length>', initialValue: '2px', inherits: false});
test1.style.setProperty('--a', 'initial');
getComputedStyle(test1).getPropertyValue('--a');
</script>

View file

@ -145,6 +145,7 @@ assert_invalid("initial", "initial");
assert_invalid("inherit", "inherit");
assert_invalid("unset", "unset");
assert_invalid("revert", "revert");
assert_invalid("revert-layer", "revert-layer");
assert_invalid("default", "default");
assert_invalid("<length>|initial", "10px");
assert_invalid("<length>|INHERIT", "10px");
@ -153,20 +154,28 @@ assert_invalid("<color>|REVert", "red");
assert_invalid("<integer>|deFAUlt", "1");
// Invalid initialValue
// The 6 tests that follow are not clearly backed by the specification,
// but (at least other than the one for 'default') they're probably a
// good idea and we should change the spec. See
// https://github.com/w3c/css-houdini-drafts/issues/1076 .
assert_invalid("*", "initial");
assert_invalid("*", "inherit");
assert_invalid("*", "unset");
assert_invalid("*", "revert");
assert_invalid("*", "revert-layer");
assert_invalid("*", "default");
// ... end possibly-invalid tests.
assert_invalid("<custom-ident>", "initial");
assert_invalid("<custom-ident>", "inherit");
assert_invalid("<custom-ident>", "unset");
assert_invalid("<custom-ident>", "revert");
assert_invalid("<custom-ident>", "revert-layer");
assert_invalid("<custom-ident>", "default");
assert_invalid("<custom-ident>+", "foo initial bar");
assert_invalid("<custom-ident>+", "foo inherit bar");
assert_invalid("<custom-ident>+", "foo unset bar");
assert_invalid("<custom-ident>+", "foo revert bar");
assert_invalid("<custom-ident>+", "foo revert-layer bar");
assert_invalid("<custom-ident>+", "foo default bar");
assert_invalid("*", ")");

View file

@ -7,6 +7,7 @@
<style>
#divWithFontSizeSet, #parentDiv {
font-size: 10px;
line-height: 20px;
}
</style>
@ -107,6 +108,8 @@ test_computed_value('<length>', '25.4mm', '96px');
test_computed_value('<length>', '6pc', '96px');
test_computed_value('<length>', '72pt', '96px');
test_computed_value('<length>', '10lh', '200px');
test_computed_value('<length-percentage>', '17em', '170px');
test_computed_value('<length-percentage>', '18%', '18%');
test_computed_value('<length-percentage>', 'calc(19em - 2%)', 'calc(-2% + 190px)');
@ -167,4 +170,6 @@ test_computed_value('<resolution>', '1dppx', '1dppx');
test_computed_value('<resolution>', '96dpi', '1dppx');
test_computed_value('<resolution>', 'calc(1dppx + 96dpi)', '2dppx');
test_computed_value('*', 'url(why)', 'url(why)');
</script>

View file

@ -18,6 +18,7 @@
register_length('--font-size-ex');
register_length('--font-size-ch');
register_length('--font-size-px');
register_length('--font-size-lh');
register_length('--font-size-em-via-var');
register_length('--font-size-rem-via-var');
register_length('--font-size-ex-via-var');
@ -25,6 +26,9 @@
register_length('--font-size-em-inherited', true);
register_length('--font-size-ex-inherited', true);
register_length('--font-size-ch-inherited', true);
register_length('--line-height-lh');
register_length('--line-height-lh-via-var');
register_length('--line-height-lh-inherited', true);
</script>
<style>
:root {
@ -32,6 +36,7 @@
--unregistered-rem: 10rem;
--unregistered-ex: 10ex;
--unregistered-ch: 10ch;
--unregistered-lh: 10lh;
}
:root, #target {
@ -40,20 +45,25 @@
--font-size-ex: 2ex;
--font-size-ch: 2ch;
--font-size-px: 42px;
--font-size-lh: 2lh;
--line-height-lh: 2lh;
--font-size-em-via-var: var(--unregistered-em);
--font-size-rem-via-var: var(--unregistered-rem);
--font-size-ex-via-var: var(--unregistered-ex);
--font-size-ch-via-var: var(--unregistered-ch);
--line-height-lh-via-var: var(--unregistered-lh);
}
#parent {
--font-size-em-inherited: 4em;
--font-size-ex-inherited: 4ex;
--font-size-ch-inherited: 4ch;
--line-height-lh-inherited: 4lh;
}
#target {
font-size: 11px;
line-height: 13px;
}
</style>
@ -81,6 +91,7 @@
}
let unsetFontSize = compute_dimension('1em', 'unset');
const unsetLineHeight = "normal";
add_result_callback(function(){
target.attributeStyleMap.clear();
@ -111,6 +122,12 @@
assert_property_equals('--font-size-ch', '0px');
}, 'Lengths with ch units may not be referenced from font-size');
test(function() {
target.style = 'font-size: var(--font-size-lh);';
assert_property_equals('font-size', unsetFontSize);
assert_property_equals('--font-size-lh', '0px');
}, 'Lengths with lh 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);
@ -125,11 +142,22 @@
assert_property_equals('--font-size-rem', '0px', root);
}, 'Lengths with rem units may not be referenced from font-size on root element');
test(function() {
target.style = 'line-height: var(--line-height-lh);';
assert_property_equals('line-height', unsetLineHeight);
assert_property_equals('--line-height-lh', '0px');
}, 'Lengths with lh units may not be referenced from line-height');
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 = 'line-height: var(--noexist, var(--line-height-lh));';
assert_property_equals('line-height', unsetLineHeight);
}, 'Fallback may not use line-height-relative units');
test(function() {
target.style = 'font-size: var(--font-size-em, 42px);';
assert_property_equals('font-size', unsetFontSize);
@ -152,6 +180,11 @@
root.style = 'font-size: unset;';
}, 'Fallback not triggered while inside rem unit cycle on root element');
test(function() {
target.style = 'line-height: var(--line-height-lh, 42px);';
assert_property_equals('line-height', unsetLineHeight);
}, 'Fallback not triggered while inside lh unit cycle');
test(function() {
target.style = 'font-size: var(--font-size-em-via-var);';
assert_property_equals('font-size', unsetFontSize);
@ -178,6 +211,12 @@
root.style = 'font-size: unset';
}, 'Lengths with rem units are detected via var references');
test(function() {
target.style = 'line-height: var(--line-height-lh-via-var);';
assert_property_equals('line-height', unsetLineHeight);
assert_property_equals('--line-height-lh-via-var', '0px');
}, 'Lengths with lh units are detected via var references');
test(function() {
let expected4em = compute_dimension('4em', 'unset');
target.style = 'font-size: var(--font-size-em-inherited);';
@ -199,4 +238,11 @@
assert_property_equals('--font-size-ch-inherited', expected4ch);
}, 'Inherited lengths with ch units may be used');
test(function() {
let expected4lh = compute_dimension('4lh', 'unset');
target.style = 'line-height: var(--line-height-lh-inherited);';
assert_property_equals('line-height', expected4lh);
assert_property_equals('--line-height-lh-inherited', expected4lh);
}, 'Inherited lengths with lh units may be used');
</script>