mirror of
https://github.com/servo/servo.git
synced 2025-08-06 06:00:15 +01:00
Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'
This commit is contained in:
parent
ace9b32b1c
commit
df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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("*", ")");
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue