Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-09-14 00:48:20 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 60220357131c65146444da1f54624d5b54d0975d

Browse source
This commit is contained in:
WPT Sync Bot 2018-07-18 15:43:58 +00:00 • committed by Tom Servo
parent c45192614c
commit 775b784f79
2144 changed files with 58115 additions and 29658 deletions
Download patch file Download diff file Expand all files Collapse all files

1
tests/wpt/web-platform-tests/css/CSS1/META.yml
View file

@ -1,2 +1,3 @@
spec: https://www.w3.org/TR/CSS1/
suggested_reviewers:
- fantasai

3
tests/wpt/web-platform-tests/css/CSS2/META.yml
View file

@ -1,9 +1,8 @@
spec: https://drafts.csswg.org/css2/
suggested_reviewers:
- fantasai
- dbaron
- svgeesus
- chenxix
- kojiishi
- kwkbtr
- frivoal
- bert-github

23
tests/wpt/web-platform-tests/css/CSS2/floats/floats-line-wrap-shifted-001-ref.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<style>
div {
font-size: 10px;
width: 12ch;
line-height: 1;
background: yellow;
}
.float {
width: 12ch;
height: 1em;
background: orange;
}
</style>
<body>
<div>
1111<br>
2222 3333
<div class="float"></div>
</div>
</body>

45
tests/wpt/web-platform-tests/css/CSS2/floats/floats-line-wrap-shifted-001.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<link rel="author" title="Koji Ishii" href="kojii@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position">
<link rel="match" href="floats-line-wrap-shifted-001-ref.html">
<meta name="flags" content="" />
<meta name="assert" content="Float may not be higher than line-box containing a box generated by an element earlier in the source document." />
<style>
div {
font-size: 10px;
width: 12ch;
line-height: 1;
background: yellow;
}
.float {
float: left;
width: 12ch;
height: 1em;
background: orange;
}
</style>
<body>
<div>
1111
<nobr>
2222
<!--
This float does not fit in the 1st line and thus shifted downward.
-->
<div class="float"></div>
<!--
The next word causes the 1st line to wrap.
The last break opportunity was before the float, and thus the float is also
wrapped to the next line.
According to the rule 6, the float should be below <nobr> box.
6. The outer top of an element's floating box may not be higher than the top
of any line-box containing a box generated by an element earlier in the
source document.
-->
3333
</nobr>
</div>
</body>

2
tests/wpt/web-platform-tests/css/WOFF2/META.yml
View file

@ -1,4 +1,4 @@
spec: https://w3c.github.io/woff/woff2/
suggested_reviewers:
- svgeesus
- khaledhosny
- rsheeter

2
tests/wpt/web-platform-tests/css/compositing/META.yml
View file

@ -1,4 +1,4 @@
spec: https://drafts.fxtf.org/compositing/
suggested_reviewers:
- cabanier
- plinss
- nikosandronikos

1
tests/wpt/web-platform-tests/css/css-align/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-align/
suggested_reviewers:
- dholbert
- emilio

3
tests/wpt/web-platform-tests/css/css-animations/META.yml
View file

@ -1,7 +1,6 @@
spec: https://drafts.csswg.org/css-animations/
suggested_reviewers:
- plinss
- chunywang
- yunxiaoxie
- grorg
- dbaron
- tabatkins

35
tests/wpt/web-platform-tests/css/css-animations/idlharness.html
View file

@ -14,23 +14,34 @@
<body>
<div id="log"></div>
<style>
@keyframes test {
from { top: 0px; }
to { top: 1px; }
}
</style>
<script>
'use strict';
promise_test(async () => {
const idl = await fetch('/interfaces/css-animations.idl').then(r => r.text());
const cssom = await fetch('/interfaces/cssom.idl').then(r => r.text());
const dom = await fetch('/interfaces/dom.idl').then(r => r.text());
idl_test(
['css-animations'],
['dom', 'cssom'],
idl_array => {
try {
window.keyframes = document.styleSheets[0].cssRules[0];
} catch (e) {
// Surfaced in idlharness.js's test_object below.
}
const idl_array = new IdlArray();
idl_array.add_idls(idl);
idl_array.add_dependency_idls(cssom);
idl_array.add_dependency_idls(dom);
idl_array.test();
}, 'Test css-animations IDL implementation');
idl_array.add_objects({
AnimationEvent: ['new AnimationEvent("animationstart")'],
CSSKeyframesRule: ['keyframes'],
CSSKeyframeRule: ['keyframes.cssRules[0]'],
});
},
'Test css-animations IDL implementation');
</script>
</body>
</html>

2
tests/wpt/web-platform-tests/css/css-animations/support/testcommon.js
View file

@ -103,8 +103,6 @@ function waitForFrame() {
/**
* Waits for a requestAnimationFrame callback in the next refresh driver tick.
* Note that 'dom.animations-api.core.enabled' pref should be true to use this
* function.
*/
function waitForNextFrame() {
const timeAtStart = document.timeline.currentTime;

2
tests/wpt/web-platform-tests/css/css-backgrounds/META.yml
View file

@ -1,5 +1,5 @@
spec: https://drafts.csswg.org/css-backgrounds/
suggested_reviewers:
- chenxix
- dbaron
- bert-github
- fantasai

33
tests/wpt/web-platform-tests/css/css-backgrounds/background-size-with-negative-value.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Backgrounds and Borders Test: background-size - negative value</title>
<link rel="author" title="Zhuoyu Qian" href="mailto:zhuoyu.qian@samsung.com">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property">
<link rel="match" href="reference/background-size-002-ref.html">
<meta name="flags" content="image">
<meta name="assert" content="Check if 'background-size' has the negative values, then such values are not allowed and they will be assumed to be 'auto'.">
<style>
#ref-overlapped-red {
background-color: red;
height: 45px;
width: 45px;
}
#test-overlapping-green {
background-image: url(support/60x60-green.png);
background-repeat: no-repeat;
background-size: -1px -1px;
bottom: 45px;
height: 100px;
position: relative;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="ref-overlapped-red"></div>
<div id="test-overlapping-green"></div>
</body>
</html>

5
tests/wpt/web-platform-tests/css/css-backgrounds/parsing/background-color-valid.html
View file

@ -12,9 +12,8 @@
</head>
<body>
<script>
// Edge serializes as "currentColor".
test_valid_value("background-color", "currentcolor", ["currentcolor", "currentColor"]);
test_valid_value("background-color", "currentColor", ["currentcolor", "currentColor"]);
test_valid_value("background-color", "currentcolor", "currentcolor");
test_valid_value("background-color", "currentColor", "currentcolor");
test_valid_value("background-color", "red");
test_valid_value("background-color", "#00FF00", "rgb(0, 255, 0)");

5
tests/wpt/web-platform-tests/css/css-backgrounds/parsing/border-color-valid.html
View file

@ -12,9 +12,8 @@
</head>
<body>
<script>
// Edge serializes as "currentColor".
test_valid_value("border-color", "currentcolor", ["currentcolor", "currentColor"]);
test_valid_value("border-color", "currentColor", ["currentcolor", "currentColor"]);
test_valid_value("border-color", "currentcolor", "currentcolor");
test_valid_value("border-color", "currentColor", "currentcolor");
test_valid_value("border-color", "red yellow green blue");

5
tests/wpt/web-platform-tests/css/css-box/META.yml Normal file
View file

@ -0,0 +1,5 @@
spec: https://drafts.csswg.org/css-box/
suggested_reviewers:
- dbaron
- dholbert
- mstensho

1
tests/wpt/web-platform-tests/css/css-break/META.yml
View file

@ -1,2 +1,3 @@
spec: https://drafts.csswg.org/css-break/
suggested_reviewers:
- mstensho

268
tests/wpt/web-platform-tests/css/css-break/hit-test-inline-fragmentation-with-border-radius.html Normal file
View file

@ -0,0 +1,268 @@
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"/>
<style>
div {
margin: 20px;
}
span.round {
padding: 20px;
line-height: 100px;
font-size: 40px;
border-radius: 40px;
background-color: yellow;
}
</style>
<div>
<span id="horizontal" class="round">FOO<br>BAR</span>
</div>
<div style="writing-mode:vertical-lr">
<span id="vertical-lr" class="round">FOO<br>BAR</span>
</div>
<div style="writing-mode:vertical-rl">
<span id="vertical-rl" class="round">FOO<br>BAR</span>
</div>
<script>
// Hit test horizontal span with border radius
const horizontalSpan = document.getElementById('horizontal');
const horizontalDiv = horizontalSpan.parentNode;
const horizontalRects = horizontalSpan.getClientRects();
const horizontalLine1 = horizontalRects[0];
const horizontalLine2 = horizontalRects[1];
test(() => {
const x = horizontalLine1.left + 5;
const y = horizontalLine1.top + 5;
assert_equals(document.elementFromPoint(x, y), horizontalDiv);
}, 'Horizontal line 1, hit test outside top-left rounded corner');
test(() => {
const x = horizontalLine1.left + 20;
const y = horizontalLine1.top + 20;
assert_equals(document.elementFromPoint(x, y), horizontalSpan);
}, 'Horizontal line 1, hit test inside top-left rounded corner');
test(() => {
const x = horizontalLine1.left + 5;
const y = horizontalLine1.bottom - 5;
assert_equals(document.elementFromPoint(x, y), horizontalDiv);
}, 'Horizontal line 1, hit test outside bottom-left rounded corner');
test(() => {
const x = horizontalLine1.left + 20;
const y = horizontalLine1.bottom - 20;
assert_equals(document.elementFromPoint(x, y), horizontalSpan);
}, 'Horizontal line 1, hit test inside bottom-left rounded corner');
test(() => {
const x = horizontalLine1.right - 5;
const y = horizontalLine1.top + 5;
assert_equals(document.elementFromPoint(x, y), horizontalSpan);
}, 'Horizontal line 1, hit test inside top-right right-angled corner')
test(() => {
const x = horizontalLine1.right - 5;
const y = horizontalLine1.bottom - 5;
assert_equals(document.elementFromPoint(x, y), horizontalSpan);
}, 'Horizontal line 1, hit test inside bottom-right right-angled corner')
test(() => {
const x = horizontalLine2.right - 5;
const y = horizontalLine2.top + 5;
assert_equals(document.elementFromPoint(x, y), horizontalDiv);
}, 'Horizontal line 2, hit test outside top-right rounded corner');
test(() => {
const x = horizontalLine2.right - 20;
const y = horizontalLine2.top + 20;
assert_equals(document.elementFromPoint(x, y), horizontalSpan);
}, 'Horizontal line 2, hit test inside top-right rounded corner');
test(() => {
const x = horizontalLine2.right - 5;
const y = horizontalLine2.bottom - 5;
assert_equals(document.elementFromPoint(x, y), horizontalDiv);
}, 'Horizontal line 2, hit test outside bottom-right rounded corner');
test(() => {
const x = horizontalLine2.right - 20;
const y = horizontalLine2.bottom - 20;
assert_equals(document.elementFromPoint(x, y), horizontalSpan);
}, 'Horizontal line 2, hit test inside bottom-right rounded corner');
test(() => {
const x = horizontalLine2.left + 5;
const y = horizontalLine2.top + 5;
assert_equals(document.elementFromPoint(x, y), horizontalSpan);
}, 'Horizontal line 2, hit test inside top-left right-angled corner')
test(() => {
const x = horizontalLine2.left + 5;
const y = horizontalLine2.bottom - 5;
assert_equals(document.elementFromPoint(x, y), horizontalSpan);
}, 'Horizontal line 2, hit test inside bottom-left right-angled corner')
// Hit test vertical-lr span with border radius
const verticalLRSpan = document.getElementById('vertical-lr');
const verticalLRDiv = verticalLRSpan.parentNode;
const verticalLRRects = verticalLRSpan.getClientRects();
const verticalLRLine1 = verticalLRRects[0];
const verticalLRLine2 = verticalLRRects[1];
test(() => {
const x = verticalLRLine1.left + 5;
const y = verticalLRLine1.top + 5;
assert_equals(document.elementFromPoint(x, y), verticalLRDiv);
}, 'Vertical LR line 1, hit test outside top-left rounded corner');
test(() => {
const x = verticalLRLine1.left + 20;
const y = verticalLRLine1.top + 20;
assert_equals(document.elementFromPoint(x, y), verticalLRSpan);
}, 'Vertical LR line 1, hit test inside top-left rounded corner');
test(() => {
const x = verticalLRLine1.right - 5;
const y = verticalLRLine1.top + 5;
assert_equals(document.elementFromPoint(x, y), verticalLRDiv);
}, 'Vertical LR line 1, hit test outside top-right rounded corner');
test(() => {
const x = verticalLRLine1.right - 20;
const y = verticalLRLine1.top + 20;
assert_equals(document.elementFromPoint(x, y), verticalLRSpan);
}, 'Vertical LR line 1, hit test inside top-right rounded corner');
test(() => {
const x = verticalLRLine1.left + 5;
const y = verticalLRLine1.bottom - 5;
assert_equals(document.elementFromPoint(x, y), verticalLRSpan);
}, 'Vertical LR line 1, hit test inside bottom-left right-angled corner')
test(() => {
const x = verticalLRLine1.right - 5;
const y = verticalLRLine1.bottom - 5;
assert_equals(document.elementFromPoint(x, y), verticalLRSpan);
}, 'Vertical LR line 1, hit test inside bottom-right right-angled corner')
test(() => {
const x = verticalLRLine2.left + 5;
const y = verticalLRLine2.bottom - 5;
assert_equals(document.elementFromPoint(x, y), verticalLRDiv);
}, 'Vertical LR line 2, hit test outside bottom-left rounded corner');
test(() => {
const x = verticalLRLine2.left + 20;
const y = verticalLRLine2.bottom - 20;
assert_equals(document.elementFromPoint(x, y), verticalLRSpan);
}, 'Vertical LR line 2, hit test inside bottom-left rounded corner');
test(() => {
const x = verticalLRLine2.right - 5;
const y = verticalLRLine2.bottom - 5;
assert_equals(document.elementFromPoint(x, y), verticalLRDiv);
}, 'Vertical LR line 2, hit test outside bottom-right rounded corner');
test(() => {
const x = verticalLRLine2.right - 20;
const y = verticalLRLine2.bottom - 20;
assert_equals(document.elementFromPoint(x, y), verticalLRSpan);
}, 'Vertical LR line 2, hit test inside bottom-right rounded corner');
test(() => {
const x = verticalLRLine2.left + 5;
const y = verticalLRLine2.top + 5;
assert_equals(document.elementFromPoint(x, y), verticalLRSpan);
}, 'Vertical LR line 2, hit test inside top-left right-angled corner')
test(() => {
const x = verticalLRLine2.right - 5;
const y = verticalLRLine2.top + 5;
assert_equals(document.elementFromPoint(x, y), verticalLRSpan);
}, 'Vertical LR line 2, hit test inside top-right right-angled corner')
// Hit test vertical-rl span with border radius
const verticalRLSpan = document.getElementById('vertical-rl');
const verticalRLDiv = verticalRLSpan.parentNode;
const verticalRLRects = verticalRLSpan.getClientRects();
const verticalRLLine1 = verticalRLRects[0].left > verticalRLRects[1].left ? verticalRLRects[0] : verticalRLRects[1];
const verticalRLLine2 = verticalRLRects[0].left > verticalRLRects[1].left ? verticalRLRects[1] : verticalRLRects[0];
test(() => {
const x = verticalRLLine1.left + 5;
const y = verticalRLLine1.top + 5;
assert_equals(document.elementFromPoint(x, y), verticalRLDiv);
}, 'Vertical RL line 1, hit test outside top-left rounded corner');
test(() => {
const x = verticalRLLine1.left + 20;
const y = verticalRLLine1.top + 20;
assert_equals(document.elementFromPoint(x, y), verticalRLSpan);
}, 'Vertical RL line 1, hit test inside top-left rounded corner');
test(() => {
const x = verticalRLLine1.right - 5;
const y = verticalRLLine1.top + 5;
assert_equals(document.elementFromPoint(x, y), verticalRLDiv);
}, 'Vertical RL line 1, hit test outside top-right rounded corner');
test(() => {
const x = verticalRLLine1.right - 20;
const y = verticalRLLine1.top + 20;
assert_equals(document.elementFromPoint(x, y), verticalRLSpan);
}, 'Vertical RL line 1, hit test inside top-right rounded corner');
test(() => {
const x = verticalRLLine1.left + 5;
const y = verticalRLLine1.bottom - 5;
assert_equals(document.elementFromPoint(x, y), verticalRLSpan);
}, 'Vertical RL line 1, hit test inside bottom-left right-angled corner')
test(() => {
const x = verticalRLLine1.right - 5;
const y = verticalRLLine1.bottom - 5;
assert_equals(document.elementFromPoint(x, y), verticalRLSpan);
}, 'Vertical RL line 1, hit test inside bottom-right right-angled corner')
test(() => {
const x = verticalRLLine2.left + 5;
const y = verticalRLLine2.bottom - 5;
assert_equals(document.elementFromPoint(x, y), verticalRLDiv);
}, 'Vertical RL line 2, hit test outside bottom-left rounded corner');
test(() => {
const x = verticalRLLine2.left + 20;
const y = verticalRLLine2.bottom - 20;
assert_equals(document.elementFromPoint(x, y), verticalRLSpan);
}, 'Vertical RL line 2, hit test inside bottom-left rounded corner');
test(() => {
const x = verticalRLLine2.right - 5;
const y = verticalRLLine2.bottom - 5;
assert_equals(document.elementFromPoint(x, y), verticalRLDiv);
}, 'Vertical RL line 2, hit test outside bottom-right rounded corner');
test(() => {
const x = verticalRLLine2.right - 20;
const y = verticalRLLine2.bottom - 20;
assert_equals(document.elementFromPoint(x, y), verticalRLSpan);
}, 'Vertical RL line 2, hit test inside bottom-right rounded corner');
test(() => {
const x = verticalRLLine2.left + 5;
const y = verticalRLLine2.top + 5;
assert_equals(document.elementFromPoint(x, y), verticalRLSpan);
}, 'Vertical RL line 2, hit test inside top-left right-angled corner')
test(() => {
const x = verticalRLLine2.right - 5;
const y = verticalRLLine2.top + 5;
assert_equals(document.elementFromPoint(x, y), verticalRLSpan);
}, 'Vertical RL line 2, hit test inside top-right right-angled corner')
</script>

1
tests/wpt/web-platform-tests/css/css-cascade/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-cascade/
suggested_reviewers:
- fantasai
- tabatkins

24
tests/wpt/web-platform-tests/css/css-cascade/parsing/all-invalid.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Cascading and Inheritance Level 3: parsing all with invalid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-cascade-3/#propdef-all">
<meta name="assert" content="all supports only the grammar 'initial | inherit | unset'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("all", "auto");
test_invalid_value("all", "none");
test_invalid_value("all", "filter");
test_invalid_value("all", "unset inherit");
test_invalid_value("all", "inherit initial");
test_invalid_value("all", "initial unset");
test_invalid_value("all", "opacity transform");
</script>
</body>
</html>

20
tests/wpt/web-platform-tests/css/css-cascade/parsing/all-valid.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Cascading and Inheritance Level 3: parsing all with valid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-cascade-3/#propdef-all">
<meta name="assert" content="all supports the full grammar 'initial | inherit | unset'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("all", "initial");
test_valid_value("all", "inherit");
test_valid_value("all", "unset");
</script>
</body>
</html>

39
tests/wpt/web-platform-tests/css/css-cascade/parsing/support/parsing-testcommon.js Normal file
View file

@ -0,0 +1,39 @@
'use strict';
// serializedValue can be the expected serialization of value,
// or an array of permitted serializations,
// or omitted if value should serialize as value.
function test_valid_value(property, value, serializedValue) {
if (arguments.length < 3)
serializedValue = value;
var stringifiedValue = JSON.stringify(value);
test(function(){
var div = document.createElement('div');
div.style[property] = value;
assert_not_equals(div.style.getPropertyValue(property), "", "property should be set");
var div = document.createElement('div');
div.style[property] = value;
var readValue = div.style.getPropertyValue(property);
if (serializedValue instanceof Array)
assert_in_array(readValue, serializedValue, "serialization should be sound");
else
assert_equals(readValue, serializedValue, "serialization should be canonical");
div.style[property] = readValue;
assert_equals(div.style.getPropertyValue(property), readValue, "serialization should round-trip");
}, "e.style['" + property + "'] = " + stringifiedValue + " should set the property value");
}
function test_invalid_value(property, value) {
var stringifiedValue = JSON.stringify(value);
test(function(){
var div = document.createElement('div');
div.style[property] = value;
assert_equals(div.style.getPropertyValue(property), "");
}, "e.style['" + property + "'] = " + stringifiedValue + " should not set the property value");
}

3
tests/wpt/web-platform-tests/css/css-color/META.yml
View file

@ -1,7 +1,6 @@
spec: https://drafts.csswg.org/css-color/
suggested_reviewers:
- dbaron
- JianfengXu
- chenxix
- tantek
- svgeesus
- tabatkins

27
tests/wpt/web-platform-tests/css/css-color/parsing/color-invalid.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Color Module Level 3: parsing color with invalid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-color-3/#color0">
<meta name="assert" content="color supports only the grammar '<color>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("color", "auto");
test_invalid_value("color", "123");
test_invalid_value("color", "#12");
test_invalid_value("color", "#123456789");
test_invalid_value("color", "rgb");
test_invalid_value("color", "rgb(1)");
test_invalid_value("color", "rgb(1,2,3,4,5)");
test_invalid_value("color", "hsla(1,2,3,4,5)");
test_invalid_value("color", "rgb(10%, 20, 30%)");
test_invalid_value("color", "rgba(-2, 300, 400%, -0.5)");
</script>
</body>
</html>

32
tests/wpt/web-platform-tests/css/css-color/parsing/color-valid.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Color Module Level 3: parsing color with valid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-color-3/#color0">
<meta name="assert" content="color supports the full grammar '<color>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("color", "currentcolor");
test_valid_value("color", "transparent");
test_valid_value("color", "red");
test_valid_value("color", "magenta");
test_valid_value("color", "#234", "rgb(34, 51, 68)");
test_valid_value("color", "#FEDCBA", "rgb(254, 220, 186)");
test_valid_value("color", "rgb(2, 3, 4)");
test_valid_value("color", "rgb(100%, 0%, 0%)", "rgb(255, 0, 0)");
test_valid_value("color", "rgba(2, 3, 4, 0.5)"); // Safari serializes alpha-value 0.498039
test_valid_value("color", "hsl(120, 100%, 50%)", ["rgb(0, 255, 0)", "hsl(120, 100%, 50%)"]);
test_valid_value("color", "hsla(120, 100%, 50%, 0.25)", ["rgba(0, 255, 0, 0.25)", "hsla(120, 100%, 50%, 0.25)"]); // Safari serializes alpha-value 0.247059
test_valid_value("color", "rgb(-2, 3, 4)", "rgb(0, 3, 4)");
test_valid_value("color", "rgb(100, 200, 300)", "rgb(100, 200, 255)");
test_valid_value("color", "rgb(20, 10, 0, -10)", "rgba(20, 10, 0, 0)"); // Not supported by Edge/Safari.
test_valid_value("color", "rgb(100%, 200%, 300%)", "rgb(255, 255, 255)");
</script>
</body>
</html>

20
tests/wpt/web-platform-tests/css/css-color/parsing/opacity-invalid.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS opacity Module Level 3: parsing opacity with invalid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-color-3/#opacity">
<meta name="assert" content="opacity supports only the grammar '<alphavalue>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("opacity", "auto");
test_invalid_value("opacity", "10px");
test_invalid_value("opacity", "0 1");
</script>
</body>
</html>

22
tests/wpt/web-platform-tests/css/css-color/parsing/opacity-valid.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS opacity Module Level 3: parsing opacity with valid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-color-3/#opacity">
<meta name="assert" content="opacity supports the full grammar '<alphavalue>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("opacity", "1");
test_valid_value("opacity", "0.5");
test_valid_value("opacity", "0");
test_valid_value("opacity", "-2");
test_valid_value("opacity", "3");
</script>
</body>
</html>

39
tests/wpt/web-platform-tests/css/css-color/parsing/resources/parsing-testcommon.js Normal file
View file

@ -0,0 +1,39 @@
'use strict';
// serializedValue can be the expected serialization of value,
// or an array of permitted serializations,
// or omitted if value should serialize as value.
function test_valid_value(property, value, serializedValue) {
if (arguments.length < 3)
serializedValue = value;
var stringifiedValue = JSON.stringify(value);
test(function(){
var div = document.createElement('div');
div.style[property] = value;
assert_not_equals(div.style.getPropertyValue(property), "", "property should be set");
var div = document.createElement('div');
div.style[property] = value;
var readValue = div.style.getPropertyValue(property);
if (serializedValue instanceof Array)
assert_in_array(readValue, serializedValue, "serialization should be sound");
else
assert_equals(readValue, serializedValue, "serialization should be canonical");
div.style[property] = readValue;
assert_equals(div.style.getPropertyValue(property), readValue, "serialization should round-trip");
}, "e.style['" + property + "'] = " + stringifiedValue + " should set the property value");
}
function test_invalid_value(property, value) {
var stringifiedValue = JSON.stringify(value);
test(function(){
var div = document.createElement('div');
div.style[property] = value;
assert_equals(div.style.getPropertyValue(property), "");
}, "e.style['" + property + "'] = " + stringifiedValue + " should not set the property value");
}

1
tests/wpt/web-platform-tests/css/css-conditional/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-conditional/
suggested_reviewers:
- dbaron
- frivoal

1
tests/wpt/web-platform-tests/css/css-contain/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-contain/
suggested_reviewers:
- tabatkins
- frivoal

9
tests/wpt/web-platform-tests/css/css-contain/contain-size-borders.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<title>contain:size on auto-height block width vertical borders</title>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="contain:size; width:100px; border:50px solid green; border-left:none; border-right:none; background:red;">
<div style="height:200px;"></div>
</div>

1
tests/wpt/web-platform-tests/css/css-content/META.yml
View file

@ -1,2 +1,3 @@
spec: https://drafts.csswg.org/css-content/
suggested_reviewers:
- dauwhe

4
tests/wpt/web-platform-tests/css/css-content/element-replacement-alt-ref.html Normal file
View file

@ -0,0 +1,4 @@
<!DOCTYPE html>
<title>CSS Test Reference</title>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<div style="content: url(broken);"></div>

6
tests/wpt/web-platform-tests/css/css-content/element-replacement-alt.html Normal file
View file

@ -0,0 +1,6 @@
<!DOCTYPE html>
<title>The content CSS property with a broken image doesn't pull the alt attribute from that element</title>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="match" href="element-replacement-alt-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-content-3/#content-property">
<div style="content: url(broken);" alt="Alt text">FAIL</div>

12
tests/wpt/web-platform-tests/css/css-content/element-replacement-display-contents.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<title>The content CSS property doesn't override display: contents</title>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="match" href="resources/blank.html">
<link rel="help" href="https://drafts.csswg.org/css-content-3/#content-property">
<style>
div {
display: contents;
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==);
}
</style>
<div></div>

12
tests/wpt/web-platform-tests/css/css-content/element-replacement-display-none.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<title>The content CSS property doesn't override display: none</title>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="match" href="resources/blank.html">
<link rel="help" href="https://drafts.csswg.org/css-content-3/#content-property">
<style>
div {
display: none;
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==);
}
</style>
<div>FAIL</div>

8
tests/wpt/web-platform-tests/css/css-content/pseudo-element-inline-box-ref.html Normal file
View file

@ -0,0 +1,8 @@
<!doctype html>
<title>CSS Test Reference</title>
<p>Should see a green image with a blue border</p>
<div>
<span style="border: 10px solid blue">
<img src="resources/rect.svg">
</span>
</div>

15
tests/wpt/web-platform-tests/css/css-content/pseudo-element-inline-box.html Normal file
View file

@ -0,0 +1,15 @@
<!doctype html>
<title>CSS Test: content: url() on pseudo-elements is under a non-replaced box.</title>
<link rel="match" href="pseudo-element-inline-box-ref.html">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu">
<link rel="help" href="https://drafts.csswg.org/css-content/#typedef-content-content-list">
<style>
div::before {
border: 10px solid blue;
content: url(resources/rect.svg);
display: inline;
}
</style>
<p>Should see a green image with a blue border</p>
<div></div>

4
tests/wpt/web-platform-tests/css/css-content/resources/blank.html Normal file
View file

@ -0,0 +1,4 @@
<!doctype html>
<title>CSS Test Reference</title>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<!-- Intentionally blank -->

1
tests/wpt/web-platform-tests/css/css-counter-styles/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-counter-styles/
suggested_reviewers:
- r12a
- svgeesus

1
tests/wpt/web-platform-tests/css/css-display/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-display/
suggested_reviewers:
- kojiishi
- tabatkins

1
tests/wpt/web-platform-tests/css/css-env/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-env/
suggested_reviewers:
- rebeccahughes
- lilles

1
tests/wpt/web-platform-tests/css/css-exclusions/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-exclusions/
suggested_reviewers:
- atanassov
- astearns

1
tests/wpt/web-platform-tests/css/css-fill-stroke/META.yml
View file

@ -1,2 +1,3 @@
spec: https://drafts.fxtf.org/fill-stroke/
suggested_reviewers:
- tabatkins

1
tests/wpt/web-platform-tests/css/css-filter/META.yml
View file

@ -1,2 +1,3 @@
spec: https://drafts.fxtf.org/filter-effects/
suggested_reviewers:
- chrishtr

2
tests/wpt/web-platform-tests/css/css-flexbox/META.yml
View file

@ -1,9 +1,9 @@
spec: https://drafts.csswg.org/css-flexbox/
suggested_reviewers:
- kojiishi
- plinss
- mrego
- cbiesinger
- chenxix
- atanassov
- fantasai
- tabatkins

1
tests/wpt/web-platform-tests/css/css-font-loading/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-font-loading/
suggested_reviewers:
- tabatkins
- svgeesus

33
tests/wpt/web-platform-tests/css/css-font-loading/idlharness.https.html
View file

@ -6,25 +6,24 @@
<script src="/resources/WebIDLParser.js"></script>
<script src="/resources/idlharness.js"></script>
<script>
"use strict";
'use strict';
promise_test(async () => {
const srcs = ['css-font-loading', 'dom', 'html', 'cssom'];
const [cssfontloading, dom, html, cssom] = await Promise.all(
srcs.map(i => fetch(`/interfaces/${i}.idl`).then(r => r.text())));
function doTest([dom, cssfontloading]) {
const idl_array = new IdlArray();
idl_array.add_untested_idls(dom);
idl_array.add_untested_idls("[Exposed=Worker] interface WorkerGlobalScope : EventTarget { };");
idl_array.add_objects({Document: ["document"]});
idl_array.add_idls(cssfontloading);
idl_array.add_dependency_idls(dom);
idl_array.add_dependency_idls(html);
idl_array.add_dependency_idls(cssom);
idl_array.add_objects({
Document: ['document'],
FontFace: ['new FontFace("family", "src")'],
FontFaceSetLoadEvent: ['new FontFaceSetLoadEvent("type")'],
FontFaceSet: ['document.fonts'],
});
idl_array.test();
}
function fetchText(url) {
return fetch(url).then((response) => response.text());
}
promise_test(() => {
return Promise.all([
"/interfaces/dom.idl",
"/interfaces/css-font-loading.idl",
].map(fetchText)).then(doTest);
}, "Test IDL implementation of CSS Font Loading");
}, 'css-font-loading interfaces');
</script>

3
tests/wpt/web-platform-tests/css/css-fonts/META.yml
View file

@ -1,6 +1,5 @@
spec: https://drafts.csswg.org/css-fonts/
suggested_reviewers:
- svgeesus
- yunxiaoxie
- nattokirai
- litherum
- drott

1
tests/wpt/web-platform-tests/css/css-fonts/matching/META.yml
View file

@ -2,5 +2,4 @@ suggested_reviewers:
- drott
- fantasai
- litherum
- nattokirai
- svgeesus

1
tests/wpt/web-platform-tests/css/css-fonts/variations/META.yml
View file

@ -2,5 +2,4 @@ suggested_reviewers:
- drott
- fantasai
- litherum
- nattokirai
- svgeesus

1
tests/wpt/web-platform-tests/css/css-gcpm/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-gcpm/
suggested_reviewers:
- plinss
- dauwhe

1
tests/wpt/web-platform-tests/css/css-grid/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-grid/
suggested_reviewers:
- mrego
- tomalec

1
tests/wpt/web-platform-tests/css/css-images/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-images/
suggested_reviewers:
- plinss
- tabatkins

18
tests/wpt/web-platform-tests/css/css-images/img-orient-012.xht
View file

@ -1,18 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Image Orientation - Negative Values</title>
<link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/>
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-orientation"/>
<meta name="assert" content="A negative value for 'image-orientation' rotates the image to the left (in a counter-clockwise direction) by the given number of degrees. "/>
<style type="text/css"><![CDATA[
img.turn { image-orientation: -90deg; }
]]></style>
</head>
<body>
<div>
<p>This arrow should appear sideways, with the tip of the arrow pointing left.</p>
<img src="support/intrinsic-size.png" alt="FAIL: missing image" class="turn" />
</div>
</body>
</html>

10
tests/wpt/web-platform-tests/css/css-images/parsing/image-orientation-invalid.html
View file

@ -5,7 +5,7 @@
<title>CSS Images Module Level 3: parsing image-orientation with invalid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<meta name="assert" content="image-orientation supports only the grammar 'from-image | <angle> | [ <angle>? flip ]'.">
<meta name="assert" content="image-orientation supports only the grammar 'from-image | none'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-testcommon.js"></script>
@ -13,7 +13,6 @@
<body>
<script>
test_invalid_value("image-orientation", "auto");
test_invalid_value("image-orientation", "none");
test_invalid_value("image-orientation", "0");
test_invalid_value("image-orientation", "0 flip");
test_invalid_value("image-orientation", "0deg from-image");
@ -21,6 +20,13 @@ test_invalid_value("image-orientation", "flip 0deg");
test_invalid_value("image-orientation", "flip from-image");
test_invalid_value("image-orientation", "from-image 0deg");
test_invalid_value("image-orientation", "from-image flip");
// An older version of the spec allowed [ <angle> | <angle>? flip ] values,
// so test that we no longer support them.
test_invalid_value("image-orientation", "30deg");
test_invalid_value("image-orientation", "flip");
test_invalid_value("image-orientation", "0deg flip");
test_invalid_value("image-orientation", "-1.25turn flip");
</script>
</body>
</html>

6
tests/wpt/web-platform-tests/css/css-images/parsing/image-orientation-valid.html
View file

@ -5,7 +5,7 @@
<title>CSS Images Module Level 3: parsing image-orientation with valid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<meta name="assert" content="image-orientation supports the full grammar 'from-image | <angle> | [ <angle>? flip ]'.">
<meta name="assert" content="image-orientation supports the full grammar 'from-image | none'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-testcommon.js"></script>
@ -13,9 +13,7 @@
<body>
<script>
test_valid_value("image-orientation", "from-image");
test_valid_value("image-orientation", "30deg");
test_valid_value("image-orientation", "flip", "0deg flip"); // "0deg flip" in Firefox.
test_valid_value("image-orientation", "-1.25turn flip");
test_valid_value("image-orientation", "none");
</script>
</body>
</html>

1
tests/wpt/web-platform-tests/css/css-layout-api/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.css-houdini.org/css-layout-api/
suggested_reviewers:
- bfgeek
- tabatkins

5
tests/wpt/web-platform-tests/css/css-layout-api/box-tree-unregistered-ref.html
View file

@ -1,6 +1,7 @@
<!DOCTYPE html>
<style>
.container {
float: left;
margin: 20px 0;
border: solid 2px;
width: 100px;
@ -27,3 +28,7 @@
<div class="inflow" style="background: hotpink"></div>
<div class="inflow" style="background: green"></div>
</div>
<div class="container">
<div style="height:100px; background:green;"></div>
</div>

13
tests/wpt/web-platform-tests/css/css-layout-api/box-tree-unregistered.https.html
View file

@ -10,6 +10,7 @@
}
.container {
float: left;
margin: 20px 0;
border: solid 2px;
width: 100px;
@ -47,3 +48,15 @@
<div class="float"></div>
<div class="test" style="width: 100%; height: 40px; background: green;"></div>
</div>
<div class="container">
<!-- This tests that margins in two "layout()" box children collapse as normally. -->
<div class="test" style="background: green;">
<div style="margin:100px 0;">
<div style="margin:100px 0;"></div>
</div>
<div style="margin:100px 0;">
<div style="margin:100px 0;"></div>
</div>
</div>
</div>

1
tests/wpt/web-platform-tests/css/css-lists/META.yml
View file

@ -1,2 +1,3 @@
spec: https://drafts.csswg.org/css-lists/
suggested_reviewers:
- tabatkins

1
tests/wpt/web-platform-tests/css/css-logical/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-logical/
suggested_reviewers:
- atanassov
- fantasai

2
tests/wpt/web-platform-tests/css/css-logical/logical-box-border-color.html
View file

@ -3,7 +3,7 @@
<title>CSS Logical Properties: Flow-Relative Border Colors</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-logical/#border-color">
<meta name="assert" content="This test checks the interaction of the flow-relative border-*-color longhand properties with the physical ones in different writing modes." />
<meta name="assert" content="This test checks the interaction of the flow-relative border-*-color properties with the physical ones in different writing modes." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

2
tests/wpt/web-platform-tests/css/css-logical/logical-box-border-style.html
View file

@ -3,7 +3,7 @@
<title>CSS Logical Properties: Flow-Relative Border Styles</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-logical/#border-style">
<meta name="assert" content="This test checks the interaction of the flow-relative border-*-style longhand properties with the physical ones in different writing modes." />
<meta name="assert" content="This test checks the interaction of the flow-relative border-*-style properties with the physical ones in different writing modes." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

2
tests/wpt/web-platform-tests/css/css-logical/logical-box-border-width.html
View file

@ -3,7 +3,7 @@
<title>CSS Logical Properties: Flow-Relative Border Widths</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-logical/#border-width">
<meta name="assert" content="This test checks the interaction of the flow-relative border-*-width longhand properties with the physical ones in different writing modes." />
<meta name="assert" content="This test checks the interaction of the flow-relative border-*-width properties with the physical ones in different writing modes." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

2
tests/wpt/web-platform-tests/css/css-logical/logical-box-inset.html
View file

@ -3,7 +3,7 @@
<title>CSS Logical Properties: Flow-Relative Offsets</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-logical/#inset-properties">
<meta name="assert" content="This test checks the interaction of the flow-relative inset-* longhand properties with the physical ones in different writing modes." />
<meta name="assert" content="This test checks the interaction of the flow-relative inset-* properties with the physical ones in different writing modes." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

2
tests/wpt/web-platform-tests/css/css-logical/logical-box-margin.html
View file

@ -3,7 +3,7 @@
<title>CSS Logical Properties: Flow-Relative Margins</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-logical/#margin-properties">
<meta name="assert" content="This test checks the interaction of the flow-relative margin-* longhand properties with the physical ones in different writing modes." />
<meta name="assert" content="This test checks the interaction of the flow-relative margin-* properties with the physical ones in different writing modes." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

2
tests/wpt/web-platform-tests/css/css-logical/logical-box-padding.html
View file

@ -3,7 +3,7 @@
<title>CSS Logical Properties: Flow-Relative Padding</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-logical/#padding-properties">
<meta name="assert" content="This test checks the interaction of the flow-relative padding-* longhand properties with the physical ones in different writing modes." />
<meta name="assert" content="This test checks the interaction of the flow-relative padding-* properties with the physical ones in different writing modes." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

48
tests/wpt/web-platform-tests/css/css-logical/resources/test-box-properties.js
View file

@ -90,6 +90,9 @@
* }, logical: {
* inlineStart: "margin-inline-start", inlineEnd: "margin-inline-end",
* blockStart: "margin-block-start", blockEnd: "margin-block-end",
* }, shorthands: {
* inline: ["margin-inline-start", "margin-inline-end"],
* block: ["margin-block-start", "margin-block-end"],
* }, type: ["length"], prerequisites: "...", property: "'margin-*'" }
*
* @param {string} property
@ -105,9 +108,18 @@
exports.createBoxPropertyGroup = function(property, descriptor) {
const logical = {};
const physical = {};
for (const logicalSide of ["inline-start", "inline-end", "block-start", "block-end"]) {
const camelCase = logicalSide.replace(/-(.)/g, (match, $1) => $1.toUpperCase());
logical[camelCase] = property.replace("*", logicalSide);
const shorthands = {};
for (const axis of ["inline", "block"]) {
const shorthand = property.replace("*", axis);
const longhands = [];
shorthands[shorthand] = longhands;
for (const side of ["start", "end"]) {
const logicalSide = axis + "-" + side;
const camelCase = logicalSide.replace(/-(.)/g, (match, $1) => $1.toUpperCase());
const longhand = property.replace("*", logicalSide);
logical[camelCase] = longhand;
longhands.push(longhand);
}
}
const isInset = property === "inset-*";
let prerequisites = "";
@ -116,7 +128,7 @@
prerequisites += makeDeclaration(descriptor.prerequisites, physicalSide);
}
const type = [].concat(descriptor.type);
return {name, logical, physical, type, prerequisites, property};
return {name, logical, physical, shorthands, type, prerequisites, property};
};
/**
@ -153,6 +165,7 @@
});
const logicals = Object.values(group.logical);
const physicals = Object.values(group.physical);
const shorthands = group.shorthands ? Object.entries(group.shorthands) : null;
test(function() {
const expected = [];
@ -196,6 +209,33 @@
}, `Test that logical ${group.property} properties share computed values `
+ `with their physical associates, with '${writingModeDecl}'.`);
// Test logical shorthand properties.
if (shorthands) {
test(function() {
for (const [shorthand, longhands] of shorthands) {
let shorthandValues;
if (group.type.length > 1) {
shorthandValues = [values[0]];
} else {
shorthandValues = testValues[group.type].slice(0, longhands.length);
}
const decl = group.prerequisites + `${shorthand}: ${shorthandValues.join(" ")}; `;
const expected = [];
for (let [i, longhand] of longhands.entries()) {
const longhandValue = shorthandValues[group.type.length > 1 ? 0 : i];
expected.push([longhand, longhandValue]);
expected.push([associated[longhand], longhandValue]);
}
testComputedValues("shorthand properties on one declaration, writing " +
`mode properties on another, '${writingModeDecl}'`,
`.test { ${writingModeDecl} } .test { ${decl} }`,
expected);
}
}, `Test that ${group.property} shorthands set the computed value of both `
+ `logical and physical longhands, with '${writingModeDecl}'.`);
}
// Test that logical and physical properties are cascaded together,
// honoring their relative order on a single declaration
// (a) with a single logical property after the physical ones

1
tests/wpt/web-platform-tests/css/css-masking/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.fxtf.org/css-masking/
suggested_reviewers:
- dirkschulze
- birtles

1
tests/wpt/web-platform-tests/css/css-multicol/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-multicol/
suggested_reviewers:
- frivoal
- mstensho

1
tests/wpt/web-platform-tests/css/css-namespaces/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-namespaces/
suggested_reviewers:
- plinss
- dbaron

1
tests/wpt/web-platform-tests/css/css-overflow/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-overflow/
suggested_reviewers:
- frivoal
- dbaron

16
tests/wpt/web-platform-tests/css/css-overflow/orthogonal-flow-with-inline-end-margin.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>Scrollable container with orthogonal writing-mode child with inline-end margin</title>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS22/visufx.html#propdef-overflow">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="container" style="writing-mode:vertical-rl; overflow:auto; width:100px; height:100px;">
<div style="writing-mode:horizontal-tb; width:100px; height:100px; margin-bottom:200px;"></div>
</div>
<script>
test(function() {
var container = document.getElementById("container");
assert_equals(container.scrollWidth, 100);
assert_equals(container.scrollHeight, 100);
}, "Only trailing *block* margins should affect overflow");
</script>

1
tests/wpt/web-platform-tests/css/css-page/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-page/
suggested_reviewers:
- plinss
- fantasai

1
tests/wpt/web-platform-tests/css/css-paint-api/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.css-houdini.org/css-paint-api/
suggested_reviewers:
- bfgeek
- grorg

6
tests/wpt/web-platform-tests/css/css-paint-api/registered-properties-in-custom-paint.https.html
View file

@ -54,9 +54,9 @@ registerPaint('geometry', class {
<script>
try {
CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px'});
CSS.registerProperty({name: '--length-initial', syntax: '<length>', initialValue: '20px'});
CSS.registerProperty({name: '--number', syntax: '<number>', initialValue: '0'});
CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px', inherits: false});
CSS.registerProperty({name: '--length-initial', syntax: '<length>', initialValue: '20px', inherits: false});
CSS.registerProperty({name: '--number', syntax: '<number>', initialValue: '0', inherits: false});
importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent);
} catch(e) {
document.body.textContent = e;

1
tests/wpt/web-platform-tests/css/css-position/META.yml
View file

@ -1,2 +1,3 @@
spec: https://drafts.csswg.org/css-position/
suggested_reviewers:
- atanassov

1
tests/wpt/web-platform-tests/css/css-properties-values-api/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.css-houdini.org/css-properties-values-api/
suggested_reviewers:
- tabatkins
- astearns

64
tests/wpt/web-platform-tests/css/css-properties-values-api/property-cascade.html Normal file
View file

@ -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>

9
tests/wpt/web-platform-tests/css/css-properties-values-api/register-property-syntax-parsing.html
View file

@ -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");

30
tests/wpt/web-platform-tests/css/css-properties-values-api/register-property.html
View file

@ -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>

6
tests/wpt/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance.html
View file

@ -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');

77
tests/wpt/web-platform-tests/css/css-properties-values-api/registered-property-computation.html
View file

@ -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>

2
tests/wpt/web-platform-tests/css/css-properties-values-api/registered-property-cssom.html
View file

@ -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
tests/wpt/web-platform-tests/css/css-properties-values-api/registered-property-initial.html
View file

@ -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)');

167
tests/wpt/web-platform-tests/css/css-properties-values-api/typedom.tentative.html Normal file
View file

@ -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>

123
tests/wpt/web-platform-tests/css/css-properties-values-api/unit-cycles.html Normal file
View file

@ -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>

3
tests/wpt/web-platform-tests/css/css-properties-values-api/url-resolution.tentative.html → tests/wpt/web-platform-tests/css/css-properties-values-api/url-resolution.html
View file

@ -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>

32
tests/wpt/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html
View file

@ -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'), '');

22
tests/wpt/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html
View file

@ -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');

1
tests/wpt/web-platform-tests/css/css-pseudo/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-pseudo/
suggested_reviewers:
- plinss
- frivoal

2
tests/wpt/web-platform-tests/css/css-pseudo/first-letter-opacity-float-001-ref.html Normal file
View file

@ -0,0 +1,2 @@
<!DOCTYPE html>
<div><span style="opacity:0.5">P</span>ASS</div>

19
tests/wpt/web-platform-tests/css/css-pseudo/first-letter-opacity-float-001.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<title>CSS Test: floating ::first-letter with opacity</title>
<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
<link rel="match" href="first-letter-opacity-float-001-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
<meta name="assert" content="Test checks that a floated ::first-letter with opacity is rendered correctly with dynamic changes.">
<style>
#one::first-letter { float: left; opacity: 0.5 }
#two { opacity: 0.5 }
</style>
<div id="one">PASS</div>
<div id="two"></div>
<script>
requestAnimationFrame(() =>
requestAnimationFrame(() => {
// This used to crash the compositing code in Blink.
one.appendChild(two);
}));
</script>

1
tests/wpt/web-platform-tests/css/css-regions/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-regions/
suggested_reviewers:
- atanassov
- astearns

1
tests/wpt/web-platform-tests/css/css-rhythm/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-rhythm/
suggested_reviewers:
- plinss
- kojiishi

1
tests/wpt/web-platform-tests/css/css-round-display/META.yml
View file

@ -1,2 +1,3 @@
spec: https://drafts.csswg.org/css-round-display/
suggested_reviewers:
- jihyerish

1
tests/wpt/web-platform-tests/css/css-ruby/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-ruby/
suggested_reviewers:
- kojiishi
- fantasai

1
tests/wpt/web-platform-tests/css/css-scoping/META.yml
View file

@ -1,3 +1,4 @@
spec: https://drafts.csswg.org/css-scoping/
suggested_reviewers:
- kojiishi
- rniwa

26
tests/wpt/web-platform-tests/css/css-scoping/host-specificity-002.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test: :host is accounted for during specificity computation</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector">
<link rel="help" href="https://drafts.csswg.org/selectors/#specificity-rules">
<link rel="help" href="https://bugzil.la/1454165">
<link rel="match" href="reference/green-box.html">
<p>Test passes if you see a single 100px by 100px green box below.</p>
<div id="host"></div>
<script>
host.attachShadow({ mode: 'open' }).innerHTML = `
<style>
.foo span {
display: block;
width: 100px;
height: 100px;
background: red;
}
:host span {
background: green;
}
</style>
<div class="foo"><span></span></div>
`;
</script>

25
tests/wpt/web-platform-tests/css/css-scoping/host-specificity.html Normal file
View file

@ -0,0 +1,25 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test: the selector inside :host() affects specificity</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/1915">
<link rel="help" href="https://bugzil.la/1454165">
<link rel="match" href="reference/green-box.html">
<p>Test passes if you see a single 100px by 100px green box below.</p>
<div id="host"></div>
<script>
host.attachShadow({ mode: 'open' }).innerHTML = `
<style>
:host(#host) {
width: 100px;
height: 100px;
background: green;
}
:host {
background: red;
}
</style>
<slot></slot>
`;
</script>

Some files were not shown because too many files have changed in this diff Show more