Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-10-04 02:29:12 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision de9a09ab7f605aed6a4b53ed96427412bab76463

Browse source
This commit is contained in:
WPT Sync Bot 2018-12-01 20:48:01 -05:00
parent f3f9303fc9
commit 73a776843f
225 changed files with 5750 additions and 2858 deletions
Download patch file Download diff file Expand all files Collapse all files

75
tests/wpt/web-platform-tests/css/css-break/page-break-legacy-shorthands.html Normal file
View file

@ -0,0 +1,75 @@
<!doctype html>
<meta charset="utf-8">
<title>Test for the page-break-* legacy shorthands.</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-cascade-4/#legacy-shorthand">
<link rel="help" href="https://drafts.csswg.org/css-break/#page-break-properties">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div></div>
<script>
const NEW_VALUES = ["page", "column"].filter(v => CSS.supports("break-before", v));
const LEGACY_VALUES = ["always", "auto", "left", "right", "avoid"];
const LEGACY_MAPPING = { "always": "page" };
const REVERSE_LEGACY_MAPPING = { "page": "always" };
const div = document.querySelector("div");
const cs = getComputedStyle(div);
test(function() {
for (const property of ["break-before", "break-after"]) {
for (const val of LEGACY_VALUES) {
const mapped_value = LEGACY_MAPPING[val] || val;
div.style["page-" + property] = val;
assert_equals(div.style["page-" + property], val);
assert_equals(div.style[property], mapped_value);
assert_equals(cs.getPropertyValue("page-" + property), val);
assert_equals(cs.getPropertyValue(property), mapped_value);
assert_not_equals(div.style.cssText.indexOf(property + ": " + mapped_value + ";"), -1);
assert_equals(div.style.cssText.indexOf("page-" + property), -1,
"Legacy shorthands don't appear in cssText");
}
}
}, "Legacy values of the shorthands work as expected")
test(function() {
for (const property of ["break-before", "break-after"]) {
for (const val of NEW_VALUES) {
const mapped_value = REVERSE_LEGACY_MAPPING[val] || "";
div.style[property] = val;
assert_equals(div.style[property], val);
assert_equals(div.style["page-" + property], mapped_value);
assert_equals(cs.getPropertyValue("page-" + property), mapped_value);
assert_equals(cs.getPropertyValue(property), val);
}
}
}, "New values work on the new longhands, but serialize to the empty string in the legacy shorthands");
test(function() {
for (const property of ["break-before", "break-after"]) {
for (const val of NEW_VALUES) {
div.style["page-" + property] = "";
div.style["page-" + property] = val;
assert_equals(div.style["page-" + property], "");
assert_equals(div.style[property], "");
assert_equals(cs.getPropertyValue("page-" + property), "auto");
assert_equals(cs.getPropertyValue(property), "auto");
}
}
}, "New values of the break longhands don't work on legacy shorthands");
// See https://github.com/w3c/csswg-drafts/issues/3332
test(function() {
for (const property of ["break-before", "break-after"]) {
div.style["page-" + property] = "var(--a)";
assert_equals(div.style["page-" + property], "var(--a)");
assert_equals(div.style[property], "");
assert_equals(div.style.cssText.indexOf("page-" + property), -1);
}
}, "Legacy shorthands really never appear on cssText, even when there are variable references");
</script>

37
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-004-ref.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: column-span:all should act like column-span:none in different block formatting context</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 600px;
outline: 1px solid black;
}
h3 {
column-span: none;
outline: 1px solid blue;
}
</style>
<body onload="runTest();">
<article id="column">
<div>block1</div>
<div style="display: inline-block;">
<h3>non-spanner</h3>
</div>
<div style="overflow: hidden;">
<h3>non-spanner</h3>
</div>
<div style="column-span: all; outline: 1px solid green;">
Spanner
<h3>non-spanner in a spanner</h3>
</div>
<div>block2</div>
</article>
</body>
</html>

40
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-004.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: column-span:all should act like column-span:none in different block formatting context</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
<link rel="match" href="multicol-span-all-004-ref.html">
<meta name="assert" content="This test checks a column-span:all element should act like column-span: none if it's under different block formatting context.">
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 600px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body onload="runTest();">
<article id="column">
<div>block1</div>
<div style="display: inline-block;">
<h3>non-spanner</h3>
</div>
<div style="overflow: hidden;">
<h3>non-spanner</h3>
</div>
<div style="column-span: all; outline: 1px solid green;">
Spanner
<h3>non-spanner in a spanner</h3>
</div>
<div>block2</div>
</article>
</body>
</html>

2
tests/wpt/web-platform-tests/css/css-regions/interactivity/keyboard/regions-keyboard-events-001.html
View file

@ -42,7 +42,7 @@
<script type="text/javascript">
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onkeydown event fired in textfield inside region", {timeout: testTimeout});
var test1 = async_test("onkeydown event fired in textfield inside region");
test1.step(function () {
var testTarget = document.getElementById("textfield-inside");
testTarget.onkeydown = test1.step_func(function (evt) {

2
tests/wpt/web-platform-tests/css/css-regions/interactivity/keyboard/regions-keyboard-events-002.html
View file

@ -43,7 +43,7 @@
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onkeydown event fired in textfield outside region", {timeout: testTimeout});
var test1 = async_test("onkeydown event fired in textfield outside region");
test1.step( function() {
var testTarget = document.getElementById("outside-region");
testTarget.onkeydown = test1.step_func(function (evt) {

4
tests/wpt/web-platform-tests/css/css-regions/interactivity/keyboard/regions-keyboard-events-003.html
View file

@ -44,7 +44,7 @@
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onkeypress event fired in textfield inside region", {timeout: testTimeout});
var test1 = async_test("onkeypress event fired in textfield inside region");
test1.step( function() {
var testTarget = document.getElementById("textfield-inside");
testTarget.onkeypress = test1.step_func(function (evt) {
@ -59,7 +59,7 @@
keyDown("textfield-inside");
});
var test2 = async_test("onkeypress event fired in textfield outside region", {timeout: testTimeout});
var test2 = async_test("onkeypress event fired in textfield outside region");
test2.step( function() {
var testTarget = document.getElementById("outside-region");
testTarget.onkeypress = test2.step_func(function (evt) {

8
tests/wpt/web-platform-tests/css/css-regions/interactivity/keyboard/regions-keyboard-events-004.html
View file

@ -45,7 +45,7 @@
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onkeydown event fired in textfield inside region", {timeout: testTimeout});
var test1 = async_test("onkeydown event fired in textfield inside region");
test1.step(function () {
var testTarget = document.getElementById("textfield-inside");
testTarget.onkeydown = test1.step_func(function (evt) {
@ -59,7 +59,7 @@
});
});
var test2 = async_test("onkeyup event fired in textfield inside region", {timeout: testTimeout});
var test2 = async_test("onkeyup event fired in textfield inside region");
test2.step(function () {
var testTarget = document.getElementById("textfield-inside");
testTarget.onkeyup = test2.step_func(function (evt) {
@ -74,7 +74,7 @@
keyDown("textfield-inside");
});
var test3 = async_test("onkeydown event fired in textfield outside region", {timeout: testTimeout});
var test3 = async_test("onkeydown event fired in textfield outside region");
test3.step( function() {
var testTarget = document.getElementById("outside-region");
testTarget.onkeydown = test3.step_func(function (evt) {
@ -88,7 +88,7 @@
});
});
var test4 = async_test("onkeyup event fired in textfield outside region", {timeout: testTimeout});
var test4 = async_test("onkeyup event fired in textfield outside region");
test4.step( function() {
var testTarget = document.getElementById("outside-region");
testTarget.onkeyup = test4.step_func(function (evt) {

6
tests/wpt/web-platform-tests/css/css-regions/interactivity/keyboard/regions-keyboard-events-005.html
View file

@ -47,7 +47,7 @@
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onkeydown event fired in textfield outside region", {timeout: testTimeout});
var test1 = async_test("onkeydown event fired in textfield outside region");
test1.step( function() {
var testTarget = document.getElementById("textfield-outside");
testTarget.onkeydown = test1.step_func(function (evt) {
@ -66,7 +66,7 @@
});
});
var test2 = async_test("onkeyup event fired in textarea outside region", {timeout: testTimeout});
var test2 = async_test("onkeyup event fired in textarea outside region");
test2.step(function () {
var testTarget = document.getElementById("textarea-outside");
testTarget.onkeyup = test2.step_func(function (evt) {
@ -80,7 +80,7 @@
});
});
var test3 = async_test("onkeydown event fired in textarea outside region", {timeout: testTimeout});
var test3 = async_test("onkeydown event fired in textarea outside region");
test3.step( function() {
var testTarget = document.getElementById("textarea-outside");
testTarget.onkeydown = test3.step_func( function(evt) {

8
tests/wpt/web-platform-tests/css/css-regions/interactivity/keyboard/regions-keyboard-events-006.html
View file

@ -49,7 +49,7 @@
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onkeydown event fired in textfield inside region", {timeout: testTimeout});
var test1 = async_test("onkeydown event fired in textfield inside region");
test1.step(function () {
var testTarget = document.getElementById("textfield-inside");
testTarget.onkeydown = test1.step_func(function (evt) {
@ -63,7 +63,7 @@
});
});
var test2 = async_test("onkeyup event fired in textfield inside region", {timeout: testTimeout});
var test2 = async_test("onkeyup event fired in textfield inside region");
test2.step(function () {
var testTarget = document.getElementById("textfield-inside");
testTarget.onkeyup = test2.step_func(function (evt) {
@ -78,7 +78,7 @@
pressDeleteKey("textfield-inside");
});
var test3 = async_test("onkeydown event fired in textfield outside region", {timeout: testTimeout});
var test3 = async_test("onkeydown event fired in textfield outside region");
test3.step(function () {
var testTarget = document.getElementById("outside-region");
testTarget.onkeydown = test3.step_func(function (evt) {
@ -92,7 +92,7 @@
});
});
var test4 = async_test("onkeyup event fired in textfield outside region", {timeout: testTimeout});
var test4 = async_test("onkeyup event fired in textfield outside region");
test4.step( function() {
var testTarget = document.getElementById("outside-region");
testTarget.onkeyup = test4.step_func(function (evt) {

10
tests/wpt/web-platform-tests/css/css-regions/interactivity/keyboard/regions-keyboard-events-007.html
View file

@ -47,7 +47,7 @@
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onkeydown event fired in textfield1 inside region", {timeout: testTimeout});
var test1 = async_test("onkeydown event fired in textfield1 inside region");
test1.step(function () {
var testTarget = document.getElementById("textfield-inside1");
testTarget.onkeydown = test1.step_func(function (evt) {
@ -66,7 +66,7 @@
});
});
var test2 = async_test("onkeyup event fired in textfield2 inside region", {timeout: testTimeout});
var test2 = async_test("onkeyup event fired in textfield2 inside region");
test2.step(function () {
var testTarget = document.getElementById("textfield-inside2");
testTarget.onkeyup = test2.step_func(function (evt) {
@ -77,7 +77,7 @@
});
});
var test3 = async_test("onkeydown event fired in textfield2 inside region", {timeout: testTimeout});
var test3 = async_test("onkeydown event fired in textfield2 inside region");
test3.step( function() {
var testTarget = document.getElementById("textfield-inside2");
testTarget.onkeydown = test3.step_func(function (evt) {
@ -96,7 +96,7 @@
});
});
var test4 = async_test("onkeyup event fired in textarea inside region", {timeout: testTimeout});
var test4 = async_test("onkeyup event fired in textarea inside region");
test4.step( function() {
var testTarget = document.getElementById("textarea-inside");
testTarget.onkeyup = test4.step_func(function (evt) {
@ -110,7 +110,7 @@
});
});
var test5 = async_test("onkeydown event fired in textarea inside region", {timeout: testTimeout});
var test5 = async_test("onkeydown event fired in textarea inside region");
test5.step( function() {
var testTarget = document.getElementById("textarea-inside");
testTarget.onkeydown = test5.step_func(function (evt) {

6
tests/wpt/web-platform-tests/css/css-regions/interactivity/keyboard/regions-keyboard-events-008.html
View file

@ -44,7 +44,7 @@
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onkeydown event fired in textfield inside region", {timeout: testTimeout});
var test1 = async_test("onkeydown event fired in textfield inside region");
test1.step(function () {
var testTarget = document.getElementById("textfield-inside");
testTarget.onkeydown = test1.step_func(function (evt) {
@ -63,7 +63,7 @@
});
});
var test2 = async_test("onkeydown event fired in textfield outside region", {timeout: testTimeout});
var test2 = async_test("onkeydown event fired in textfield outside region");
test2.step(function () {
var testTarget = document.getElementById("textfield-outside");
testTarget.onkeydown = test2.step_func(function (evt) {
@ -77,7 +77,7 @@
});
});
var test3 = async_test("onkeyup event fired in textfield outside region", {timeout: testTimeout});
var test3 = async_test("onkeyup event fired in textfield outside region");
test3.step(function () {
var testTarget = document.getElementById("textfield-outside");
testTarget.onkeyup = test3.step_func(function (evt) {

8
tests/wpt/web-platform-tests/css/css-regions/interactivity/keyboard/regions-keyboard-events-009.html
View file

@ -44,7 +44,7 @@
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onkeydown event fired in textfield outside region", {timeout: testTimeout});
var test1 = async_test("onkeydown event fired in textfield outside region");
test1.step(function () {
var testTarget = document.getElementById("textfield-outside");
testTarget.onkeydown = test1.step_func(function (evt) {
@ -63,7 +63,7 @@
});
});
var test2 = async_test("onkeyup event fired in textfield outside region", {timeout: testTimeout});
var test2 = async_test("onkeyup event fired in textfield outside region");
test2.step(function () {
var testTarget = document.getElementById("textfield-outside");
testTarget.onkeyup = test2.step_func(function (evt) {
@ -75,7 +75,7 @@
});
});
var test3 = async_test("onkeydown event fired in textarea outside region", {timeout: testTimeout});
var test3 = async_test("onkeydown event fired in textarea outside region");
test3.step(function () {
var testTarget = document.getElementById("textarea-outside");
testTarget.onkeydown = test3.step_func(function (evt) {
@ -89,7 +89,7 @@
});
});
var test4 = async_test("onkeyup event fired in textarea outside region", {timeout: testTimeout});
var test4 = async_test("onkeyup event fired in textarea outside region");
test4.step( function() {
var testTarget = document.getElementById("textarea-outside");
testTarget.onkeyup = test4.step_func(function (evt) {

6
tests/wpt/web-platform-tests/css/css-regions/interactivity/keyboard/regions-keyboard-events-010.html
View file

@ -44,7 +44,7 @@
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onkeydown event fired in textfield inside region", {timeout: testTimeout});
var test1 = async_test("onkeydown event fired in textfield inside region");
test1.step(function () {
var testTarget = document.getElementById("textfield-inside");
testTarget.onkeydown = test1.step_func(function (evt) {
@ -63,7 +63,7 @@
});
});
var test2 = async_test("onkeyup event fired in textarea inside region", {timeout: testTimeout});
var test2 = async_test("onkeyup event fired in textarea inside region");
test2.step(function () {
var testTarget = document.getElementById("textarea-inside");
testTarget.onkeyup = test2.step_func(function (evt) {
@ -77,7 +77,7 @@
});
});
var test3 = async_test("onkeydown event fired in textarea inside region", {timeout: testTimeout});
var test3 = async_test("onkeydown event fired in textarea inside region");
test3.step( function() {
var testTarget = document.getElementById("textarea-inside");
testTarget.onkeydown = test3.step_func(function (evt) {

4
tests/wpt/web-platform-tests/css/css-regions/interactivity/mouse/regions-mouse-events-001.html
View file

@ -31,7 +31,7 @@
<script type="text/javascript">
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onclick event fired inside region", {timeout: testTimeout});
var test1 = async_test("onclick event fired inside region");
test1.step(function () {
var testTarget = document.getElementById("target-block");
testTarget.onclick = test1.step_func(function (evt) {
@ -46,7 +46,7 @@
mouseClick("target-block");
});
var test2 = async_test("onclick event fired outside region", {timeout: testTimeout});
var test2 = async_test("onclick event fired outside region");
test2.step(function () {
var testTarget = document.getElementById("outside-region");
testTarget.onclick = test2.step_func(function (evt) {

2
tests/wpt/web-platform-tests/css/css-regions/interactivity/mouse/regions-mouse-events-002.html
View file

@ -30,7 +30,7 @@
<script type="text/javascript">
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onmousedown event fired inside region", {timeout: testTimeout});
var test1 = async_test("onmousedown event fired inside region");
test1.step(function () {
var testTarget = document.getElementById("target-block");
testTarget.onmousedown = test1.step_func(function (evt) {

2
tests/wpt/web-platform-tests/css/css-regions/interactivity/mouse/regions-mouse-events-003.html
View file

@ -31,7 +31,7 @@
<script type="text/javascript">
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onmousedown event fired outside region", {timeout: testTimeout});
var test1 = async_test("onmousedown event fired outside region");
test1.step(function () {
var testTarget = document.getElementById("outside-region");
testTarget.onmousedown = test1.step_func(function (evt) {

2
tests/wpt/web-platform-tests/css/css-regions/interactivity/mouse/regions-mouse-events-004.html
View file

@ -30,7 +30,7 @@
<script type="text/javascript">
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onmouseup event fired inside region", {timeout: testTimeout});
var test1 = async_test("onmouseup event fired inside region");
test1.step(function () {
var testTarget = document.getElementById("target-block");
testTarget.onmouseup = test1.step_func(function (evt) {

2
tests/wpt/web-platform-tests/css/css-regions/interactivity/mouse/regions-mouse-events-005.html
View file

@ -31,7 +31,7 @@
<script type="text/javascript">
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onmouseup event fired outside region", {timeout: testTimeout});
var test1 = async_test("onmouseup event fired outside region");
test1.step(function () {
var testTarget = document.getElementById("outside-region");
testTarget.onmouseup = test1.step_func(function (evt) {

4
tests/wpt/web-platform-tests/css/css-regions/interactivity/mouse/regions-mouse-events-006.html
View file

@ -31,7 +31,7 @@
<script type="text/javascript">
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("ondblclick event fired inside region", {timeout: testTimeout});
var test1 = async_test("ondblclick event fired inside region");
test1.step(function () {
var testTarget = document.getElementById("target-block");
testTarget.ondblclick = test1.step_func(function (evt) {
@ -46,7 +46,7 @@
mouseDblClick("target-block");
});
var test2 = async_test("ondblclick event fired outside region", {timeout: testTimeout});
var test2 = async_test("ondblclick event fired outside region");
test2.step(function () {
var testTarget = document.getElementById("outside-region");
testTarget.ondblclick = test2.step_func( function(evt) {

4
tests/wpt/web-platform-tests/css/css-regions/interactivity/mouse/regions-mouse-events-007.html
View file

@ -31,7 +31,7 @@
<script type="text/javascript">
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onmousemove event fired inside region", {timeout: testTimeout});
var test1 = async_test("onmousemove event fired inside region");
test1.step(function () {
var testTarget = document.getElementById("target-block");
testTarget.onmousemove = test1.step_func(function (evt) {
@ -46,7 +46,7 @@
mouseMove("target-block");
});
var test2 = async_test("onmousemove event fired outside region", {timeout: testTimeout});
var test2 = async_test("onmousemove event fired outside region");
test2.step(function () {
var testTarget = document.getElementById("outside-region");
testTarget.onmousemove = test2.step_func(function (evt) {

4
tests/wpt/web-platform-tests/css/css-regions/interactivity/mouse/regions-mouse-events-008.html
View file

@ -31,7 +31,7 @@
<script type="text/javascript">
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onmouseover event fired inside region", {timeout: testTimeout});
var test1 = async_test("onmouseover event fired inside region");
test1.step(function () {
var testTarget = document.getElementById("target-block");
testTarget.onmouseover = test1.step_func(function (evt) {
@ -46,7 +46,7 @@
mouseOver("target-block");
});
var test2 = async_test("onmouseout event fired inside region", {timeout: testTimeout});
var test2 = async_test("onmouseout event fired inside region");
test2.step(function () {
var testTarget = document.getElementById("target-block");
testTarget.onmouseout = test2.step_func(function (evt) {

4
tests/wpt/web-platform-tests/css/css-regions/interactivity/mouse/regions-mouse-events-009.html
View file

@ -31,7 +31,7 @@
<script type="text/javascript">
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onmouseover event fired outside region", {timeout: testTimeout});
var test1 = async_test("onmouseover event fired outside region");
test1.step(function () {
var testTarget = document.getElementById("outside-region");
testTarget.onmouseover = test1.step_func(function (evt) {
@ -46,7 +46,7 @@
mouseOver("outside-region");
});
var test2 = async_test("onmouseout event fired outside region", {timeout: testTimeout});
var test2 = async_test("onmouseout event fired outside region");
test2.step(function () {
var testTarget = document.getElementById("outside-region");
testTarget.onmouseout = test2.step_func(function (evt) {

2
tests/wpt/web-platform-tests/css/css-regions/interactivity/selection/support/js/selection-test-helper.js
View file

@ -21,7 +21,7 @@ function runSelectionTest(inSelectionTests, useMouse)
if( isRegionsEnabled() )
{
var selectionTest = async_test("Text was selected", {timeout: testTimeout});
var selectionTest = async_test("Text was selected");
selectionTest.step( function()
{
var endSelect = document.getElementById("end-select");

179
tests/wpt/web-platform-tests/css/css-ruby/ruby-layout-internal-boxes-ref.html Normal file
View file

@ -0,0 +1,179 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Ruby Reference: ruby content w. layout-internal 'display' values</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
html,body {
color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0;
}
input {
width: 20px;
-webkit-appearance: none;
border: 1px solid black;
background: white;
}
.thg { display: table-header-group; }
.trg { display: table-row-group; }
.tfg { display: table-footer-group; }
.tr { display: table-row; }
.tc { display: table-cell; }
.tcg { display: table-column-group; }
.tco { display: table-column; }
.tca { display: table-caption; }
.t { display: table; }
.rb { display: ruby-base; }
.rt { display: ruby-text; }
.rbc { display: ruby-base-container; }
.rtc { display: ruby-text-container; }
.x { background: red}
</style>
</head>
<body>
<ruby><rb><span>a<span><input class="thg"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><input class="thg"><input class="thg"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="thg">b</div><input class="thg"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="thg">b</div></span>c</span></rb></ruby>
<ruby><rb><span>a<span><input class="trg"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><input class="trg"><input class="trg"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="trg">b</div><input class="trg"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="trg">b</div></span>c</span></rb></ruby>
<ruby><rb><span>a<span><input class="tfg"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><input class="tfg"><input class="tfg"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="tfg">b</div><input class="tfg"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="tfg">b</div></span>c</span></rb></ruby>
<ruby><rb><span>a<span><input class="tr"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><input class="tr"><input class="tr"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="tr">b</div><input class="tr"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="tr">b</div></span>c</span></rb></ruby>
<ruby><rb><span>a<span><input class="tc"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><input class="tc"><input class="tc"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="tc">b</div><input class="tc"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="tc">b</div></span>c</span></rb></ruby>
<ruby><rb><span>a<span><input class="tcg"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><input class="tcg"><input class="tcg"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="tcg">b</div><input class="tcg"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="tcg">b</div></span>c</span></rb></ruby>
<ruby><rb><span>a<span><input class="tco"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><input class="tco"><input class="tco"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="tco">b</div><input class="tco"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="tco">b</div></span>c</span></rb></ruby>
<ruby><rb><span>a<span><input class="tca"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><input class="tca"><input class="tca"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="tca">b</div><input class="tca"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="tca">b</div></span>c</span></rb></ruby>
<ruby><rb><span>a<span><input class="t"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><input class="t"><input class="t"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="t">b</div><input class="t"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="t">b</div></span>c</span></rb></ruby>
<ruby><rb><span>a<span><input class="rb"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><input class="rb"><input class="rb"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="rb">b</div><input class="rb"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="rb">b</div></span>c</span></rb></ruby>
<ruby><rb><span>a<span><input class="rt"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><input class="rt"><input class="rt"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="rt">b</div><input class="rt"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="rt">b</div></span>c</span></rb></ruby>
<ruby><rb><span>a<span><input class="rbc"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><input class="rbc"><input class="rbc"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="rbc">b</div><input class="rbc"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="rbc">b</div></span>c</span></rb></ruby>
<ruby><rb><span>a<span><input class="rtc"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><input class="rtc"><input class="rtc"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="rtc">b</div><input class="rtc"></span>b</span></rb></ruby>
<ruby><rb><span>a<span><div class="rtc">b</div></span>c</span></rb></ruby>
<br><hr>
<!-- -->
<ruby><rb><span><input class="thg"></span>b</rb></ruby>
<ruby><rb><span><input class="thg"><input class="thg"></span>b</rb></ruby>
<ruby><rb><span><div class="thg">b</div><input class="thg"></span>b</rb></ruby>
<ruby><rb><span><div class="thg">b</div></span>c</rb></ruby>
<ruby><rb><span><input class="trg"></span>b</rb></ruby>
<ruby><rb><span><input class="trg"><input class="trg"></span>b</rb></ruby>
<ruby><rb><span><div class="trg">b</div><input class="trg"></span>b</rb></ruby>
<ruby><rb><span><div class="trg">b</div></span>c</rb></ruby>
<ruby><rb><span><input class="tfg"></span>b</rb></ruby>
<ruby><rb><span><input class="tfg"><input class="tfg"></span>b</rb></ruby>
<ruby><rb><span><div class="tfg">b</div><input class="tfg"></span>b</rb></ruby>
<ruby><rb><span><div class="tfg">b</div></span>c</rb></ruby>
<ruby><rb><span><input class="tr"></span>b</rb></ruby>
<ruby><rb><span><input class="tr"><input class="tr"></span>b</rb></ruby>
<ruby><rb><span><div class="tr">b</div><input class="tr"></span>b</rb></ruby>
<ruby><rb><span><div class="tr">b</div></span>c</rb></ruby>
<ruby><rb><span><input class="tc"></span>b</rb></ruby>
<ruby><rb><span><input class="tc"><input class="tc"></span>b</rb></ruby>
<ruby><rb><span><div class="tc">b</div><input class="tc"></span>b</rb></ruby>
<ruby><rb><span><div class="tc">b</div></span>c</rb></ruby>
<ruby><rb><span><input class="tcg"></span>b</rb></ruby>
<ruby><rb><span><input class="tcg"><input class="tcg"></span>b</rb></ruby>
<ruby><rb><span><div class="tcg">b</div><input class="tcg"></span>b</rb></ruby>
<ruby><rb><span><div class="tcg">b</div></span>c</rb></ruby>
<ruby><rb><span><input class="tco"></span>b</rb></ruby>
<ruby><rb><span><input class="tco"><input class="tco"></span>b</rb></ruby>
<ruby><rb><span><div class="tco">b</div><input class="tco"></span>b</rb></ruby>
<ruby><rb><span><div class="tco">b</div></span>c</rb></ruby>
<!-- bug NNNNNN
<ruby><rb><span><input class="tca"></span>b</rb></ruby>
<ruby><rb><span><input class="tca"><input class="tca"></span>b</rb></ruby>
<ruby><rb><span><div class="tca">b</div><input class="tca"></span>b</rb></ruby>
<ruby><rb><span><div class="tca">b</div></span>c</rb></ruby>
-->
<ruby><rb><span><input class="t"></span>b</rb></ruby>
<ruby><rb><span><input class="t"><input class="t"></span>b</rb></ruby>
<ruby><rb><span><div class="t">b</div><input class="t"></span>b</rb></ruby>
<ruby><rb><span><div class="t">b</div></span>c</rb></ruby>
<ruby><rb><span><input class="rb"></span>b</rb></ruby>
<ruby><rb><span><input class="rb"><input class="rb"></span>b</rb></ruby>
<ruby><rb><span><div class="rb">b</div><input class="rb"></span>b</rb></ruby>
<ruby><rb><span><div class="rb">b</div></span>c</rb></ruby>
<ruby><rb><span><input class="rt"></span>b</rb></ruby>
<ruby><rb><span><input class="rt"><input class="rt"></span>b</rb></ruby>
<ruby><rb><span><div class="rt">b</div><input class="rt"></span>b</rb></ruby>
<ruby><rb><span><div class="rt">b</div></span>c</rb></ruby>
<ruby><rb><span><input class="rbc"></span>b</rb></ruby>
<ruby><rb><span><input class="rbc"><input class="rbc"></span>b</rb></ruby>
<ruby><rb><span><div class="rbc">b</div><input class="rbc"></span>b</rb></ruby>
<ruby><rb><span><div class="rbc">b</div></span>c</rb></ruby>
<ruby><rb><span><input class="rtc"></span>b</rb></ruby>
<ruby><rb><span><input class="rtc"><input class="rtc"></span>b</rb></ruby>
<ruby><rb><span><div class="rtc">b</div><input class="rtc"></span>b</rb></ruby>
<ruby><rb><span><div class="rtc">b</div></span>c</rb></ruby>
</body>
</html>

181
tests/wpt/web-platform-tests/css/css-ruby/ruby-layout-internal-boxes.html Normal file
View file

@ -0,0 +1,181 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Ruby Test: ruby content w. layout-internal 'display' values</title>
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify">
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="match" href="ruby-layout-internal-boxes-ref.html">
<style>
html,body {
color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0;
}
input {
width: 20px;
-webkit-appearance: none;
border: 1px solid black;
background: white;
}
.thg { display: table-header-group; }
.trg { display: table-row-group; }
.tfg { display: table-footer-group; }
.tr { display: table-row; }
.tc { display: table-cell; }
.tcg { display: table-column-group; }
.tco { display: table-column; }
.tca { display: table-caption; }
.t { display: table; }
.rb { display: ruby-base; }
.rt { display: ruby-text; }
.rbc { display: ruby-base-container; }
.rtc { display: ruby-text-container; }
</style>
</head>
<body>
<ruby><rb><span>a<input class="thg">b</span></rb></ruby>
<ruby><rb><span>a<input class="thg"><input class="thg">b</span></rb></ruby>
<ruby><rb><span>a<div class="thg">b</div><input class="thg">b</span></rb></ruby>
<ruby><rb><span>a<div class="thg">b</div>c</span></rb></ruby>
<ruby><rb><span>a<input class="trg">b</span></rb></ruby>
<ruby><rb><span>a<input class="trg"><input class="trg">b</span></rb></ruby>
<ruby><rb><span>a<div class="trg">b</div><input class="trg">b</span></rb></ruby>
<ruby><rb><span>a<div class="trg">b</div>c</span></rb></ruby>
<ruby><rb><span>a<input class="tfg">b</span></rb></ruby>
<ruby><rb><span>a<input class="tfg"><input class="tfg">b</span></rb></ruby>
<ruby><rb><span>a<div class="tfg">b</div><input class="tfg">b</span></rb></ruby>
<ruby><rb><span>a<div class="tfg">b</div>c</span></rb></ruby>
<ruby><rb><span>a<input class="tr">b</span></rb></ruby>
<ruby><rb><span>a<input class="tr"><input class="tr">b</span></rb></ruby>
<ruby><rb><span>a<div class="tr">b</div><input class="tr">b</span></rb></ruby>
<ruby><rb><span>a<div class="tr">b</div>c</span></rb></ruby>
<ruby><rb><span>a<input class="tc">b</span></rb></ruby>
<ruby><rb><span>a<input class="tc"><input class="tc">b</span></rb></ruby>
<ruby><rb><span>a<div class="tc">b</div><input class="tc">b</span></rb></ruby>
<ruby><rb><span>a<div class="tc">b</div>c</span></rb></ruby>
<ruby><rb><span>a<input class="tcg">b</span></rb></ruby>
<ruby><rb><span>a<input class="tcg"><input class="tcg">b</span></rb></ruby>
<ruby><rb><span>a<div class="tcg">b</div><input class="tcg">b</span></rb></ruby>
<ruby><rb><span>a<div class="tcg">b</div>c</span></rb></ruby>
<ruby><rb><span>a<input class="tco">b</span></rb></ruby>
<ruby><rb><span>a<input class="tco"><input class="tco">b</span></rb></ruby>
<ruby><rb><span>a<div class="tco">b</div><input class="tco">b</span></rb></ruby>
<ruby><rb><span>a<div class="tco">b</div>c</span></rb></ruby>
<ruby><rb><span>a<input class="tca">b</span></rb></ruby>
<ruby><rb><span>a<input class="tca"><input class="tca">b</span></rb></ruby>
<ruby><rb><span>a<div class="tca">b</div><input class="tca">b</span></rb></ruby>
<ruby><rb><span>a<div class="tca">b</div>c</span></rb></ruby>
<ruby><rb><span>a<input class="t">b</span></rb></ruby>
<ruby><rb><span>a<input class="t"><input class="t">b</span></rb></ruby>
<ruby><rb><span>a<div class="t">b</div><input class="t">b</span></rb></ruby>
<ruby><rb><span>a<div class="t">b</div>c</span></rb></ruby>
<ruby><rb><span>a<input class="rb">b</span></rb></ruby>
<ruby><rb><span>a<input class="rb"><input class="rb">b</span></rb></ruby>
<ruby><rb><span>a<div class="rb">b</div><input class="rb">b</span></rb></ruby>
<ruby><rb><span>a<div class="rb">b</div>c</span></rb></ruby>
<ruby><rb><span>a<input class="rt">b</span></rb></ruby>
<ruby><rb><span>a<input class="rt"><input class="rt">b</span></rb></ruby>
<ruby><rb><span>a<div class="rt">b</div><input class="rt">b</span></rb></ruby>
<ruby><rb><span>a<div class="rt">b</div>c</span></rb></ruby>
<ruby><rb><span>a<input class="rbc">b</span></rb></ruby>
<ruby><rb><span>a<input class="rbc"><input class="rbc">b</span></rb></ruby>
<ruby><rb><span>a<div class="rbc">b</div><input class="rbc">b</span></rb></ruby>
<ruby><rb><span>a<div class="rbc">b</div>c</span></rb></ruby>
<ruby><rb><span>a<input class="rtc">b</span></rb></ruby>
<ruby><rb><span>a<input class="rtc"><input class="rtc">b</span></rb></ruby>
<ruby><rb><span>a<div class="rtc">b</div><input class="rtc">b</span></rb></ruby>
<ruby><rb><span>a<div class="rtc">b</div>c</span></rb></ruby>
<br><hr>
<!-- same as above but without the SPAN wrapper -->
<ruby><rb><input class="thg">b</rb></ruby>
<ruby><rb><input class="thg"><input class="thg">b</rb></ruby>
<ruby><rb><div class="thg">b</div><input class="thg">b</rb></ruby>
<ruby><rb><div class="thg">b</div>c</rb></ruby>
<ruby><rb><input class="trg">b</rb></ruby>
<ruby><rb><input class="trg"><input class="trg">b</rb></ruby>
<ruby><rb><div class="trg">b</div><input class="trg">b</rb></ruby>
<ruby><rb><div class="trg">b</div>c</rb></ruby>
<ruby><rb><input class="tfg">b</rb></ruby>
<ruby><rb><input class="tfg"><input class="tfg">b</rb></ruby>
<ruby><rb><div class="tfg">b</div><input class="tfg">b</rb></ruby>
<ruby><rb><div class="tfg">b</div>c</rb></ruby>
<ruby><rb><input class="tr">b</rb></ruby>
<ruby><rb><input class="tr"><input class="tr">b</rb></ruby>
<ruby><rb><div class="tr">b</div><input class="tr">b</rb></ruby>
<ruby><rb><div class="tr">b</div>c</rb></ruby>
<ruby><rb><input class="tc">b</rb></ruby>
<ruby><rb><input class="tc"><input class="tc">b</rb></ruby>
<ruby><rb><div class="tc">b</div><input class="tc">b</rb></ruby>
<ruby><rb><div class="tc">b</div>c</rb></ruby>
<ruby><rb><input class="tcg">b</rb></ruby>
<ruby><rb><input class="tcg"><input class="tcg">b</rb></ruby>
<ruby><rb><div class="tcg">b</div><input class="tcg">b</rb></ruby>
<ruby><rb><div class="tcg">b</div>c</rb></ruby>
<ruby><rb><input class="tco">b</rb></ruby>
<ruby><rb><input class="tco"><input class="tco">b</rb></ruby>
<ruby><rb><div class="tco">b</div><input class="tco">b</rb></ruby>
<ruby><rb><div class="tco">b</div>c</rb></ruby>
<!-- FIXME after https://bugzilla.mozilla.org/show_bug.cgi?id=1510299
<ruby><rb><input class="tca">b</rb></ruby>
<ruby><rb><input class="tca"><input class="tca">b</rb></ruby>
<ruby><rb><div class="tca">b</div><input class="tca">b</rb></ruby>
<ruby><rb><div class="tca">b</div>c</rb></ruby>
-->
<ruby><rb><input class="t">b</rb></ruby>
<ruby><rb><input class="t"><input class="t">b</rb></ruby>
<ruby><rb><div class="t">b</div><input class="t">b</rb></ruby>
<ruby><rb><div class="t">b</div>c</rb></ruby>
<ruby><rb><input class="rb">b</rb></ruby>
<ruby><rb><input class="rb"><input class="rb">b</rb></ruby>
<ruby><rb><div class="rb">b</div><input class="rb">b</rb></ruby>
<ruby><rb><div class="rb">b</div>c</rb></ruby>
<ruby><rb><input class="rt">b</rb></ruby>
<ruby><rb><input class="rt"><input class="rt">b</rb></ruby>
<ruby><rb><div class="rt">b</div><input class="rt">b</rb></ruby>
<ruby><rb><div class="rt">b</div>c</rb></ruby>
<ruby><rb><input class="rbc">b</rb></ruby>
<ruby><rb><input class="rbc"><input class="rbc">b</rb></ruby>
<ruby><rb><div class="rbc">b</div><input class="rbc">b</rb></ruby>
<ruby><rb><div class="rbc">b</div>c</rb></ruby>
<ruby><rb><input class="rtc">b</rb></ruby>
<ruby><rb><input class="rtc"><input class="rtc">b</rb></ruby>
<ruby><rb><div class="rtc">b</div><input class="rtc">b</rb></ruby>
<ruby><rb><div class="rtc">b</div>c</rb></ruby>
</body>
</html>

6
tests/wpt/web-platform-tests/css/css-shadow-parts/all-hosts.html
View file

@ -20,15 +20,15 @@
<custom-element id="c-e-1"></custom-element>
The following text should be green:
<custom-element id="c-e-2"></custom-element>
<script type="text/javascript">
<script>
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
var el = getElementByShadowIds(document, ["c-e-1", "part"]);
const el = getElementByShadowIds(document, ["c-e-1", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "::part with host selector styles in first host");
test(function() {
var el = getElementByShadowIds(document, ["c-e-2", "part"]);
const el = getElementByShadowIds(document, ["c-e-2", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "::part with host selector styles in second host");
</script>

4
tests/wpt/web-platform-tests/css/css-shadow-parts/chaining-invalid-selector.html
View file

@ -26,11 +26,11 @@
<custom-element-inner id="c-e-inner" part="c-e-part"></custom-element-inner>
</template>
<custom-element-outer id="c-e-outer"></custom-element-outer>
<script type="text/javascript">
<script>
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
var el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "part"]);
const el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "::part cannot be chained to reach elements in the inner host");
test(function() {

4
tests/wpt/web-platform-tests/css/css-shadow-parts/complex-matching.html
View file

@ -18,11 +18,11 @@
</template>
The following text should be green:
<div><custom-element id="c-e"></custom-element></div>
<script type="text/javascript">
<script>
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
var el = getElementByShadowIds(document, ["c-e", "part"]);
const el = getElementByShadowIds(document, ["c-e", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Complex selector for host works");
</script>

4
tests/wpt/web-platform-tests/css/css-shadow-parts/complex-non-matching.html
View file

@ -18,11 +18,11 @@
</template>
The following text should be green:
<pre><custom-element id="c-e"></custom-element></pre>
<script type="text/javascript">
<script>
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
var el = getElementByShadowIds(document, ["c-e", "part"]);
const el = getElementByShadowIds(document, ["c-e", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Non-matching complex selector for host does not style");
</script>

4
tests/wpt/web-platform-tests/css/css-shadow-parts/different-host.html
View file

@ -18,11 +18,11 @@
</template>
The following text should be green:
<custom-element id="c-e"></custom-element>
<script type="text/javascript">
<script>
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
var el = getElementByShadowIds(document, ["c-e", "part"]);
const el = getElementByShadowIds(document, ["c-e", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part is not styled when host is not selected");
</script>

4
tests/wpt/web-platform-tests/css/css-shadow-parts/host-stylesheet.html
View file

@ -20,11 +20,11 @@
</template>
The following text should be green:
<custom-element id="c-e"></custom-element>
<script type="text/javascript">
<script>
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
var el = getElementByShadowIds(document, ["c-e", "part"]);
const el = getElementByShadowIds(document, ["c-e", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part in selected host is not styled by ::part in a stylesheet inside the host");
</script>

6
tests/wpt/web-platform-tests/css/css-shadow-parts/inner-host.html
View file

@ -25,16 +25,16 @@
</template>
The following text should be green:
<custom-element-outer id="c-e-outer"></custom-element-outer>
<script type="text/javascript">
<script>
"use strict";
const colorBlue = "rgb(0, 0, 255)";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
var el = getElementByShadowIds(document, ["c-e-outer", "green_part"]);
const el = getElementByShadowIds(document, ["c-e-outer", "green_part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part in outer host is styled by document style sheet");
test(function() {
var el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "blue_part"]);
const el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "blue_part"]);
assert_equals(window.getComputedStyle(el).color, colorBlue);
}, "Part in inner host is not styled by document style sheet");
</script>

33
tests/wpt/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Shadow Parts - Invalidation Change Part Name IDL DOMTokenList</title>
<meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
<link href="http://www.google.com/" rel="author" title="Google">
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/shadow-helper.js"></script>
</head>
<body>
<style>#c-e::part(partp) { color: red; }</style>
<style>#c-e::part(new-partp) { color: green; }</style>
<script>installCustomElement("custom-element", "custom-element-template");</script>
<template id="custom-element-template">
<style>span { color: blue; }</style>
<span id="part" part="partp">This text</span>
</template>
The following text should be green:
<div><custom-element id="c-e"></custom-element></div>
<script>
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
const el = getElementByShadowIds(document, ["c-e", "part"]);
el.part.remove("partp");
el.part.add("new-partp");
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part in selected host changed color via part IDL DOMTokenList attribute.");
</script>
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Shadow Parts - Invalidation Change Part Name IDL Setter</title>
<meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
<link href="http://www.google.com/" rel="author" title="Google">
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/shadow-helper.js"></script>
</head>
<body>
<style>#c-e::part(partp) { color: red; }</style>
<script>installCustomElement("custom-element", "custom-element-template");</script>
<template id="custom-element-template">
<style>span { color: green; }</style>
<span id="part" part="partp">This text</span>
</template>
The following text should be green:
<div><custom-element id="c-e"></custom-element></div>
<script>
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
const el = getElementByShadowIds(document, ["c-e", "part"]);
el.part = "new-partp"
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part in selected host changed color via part IDL attribute setter.");
</script>
</body>
</html>

8
tests/wpt/web-platform-tests/css/css-shadow-parts/invalidation-change-part-name.html
View file

@ -18,13 +18,13 @@
</template>
The following text should be green:
<div><custom-element id="c-e"></custom-element></div>
<script type="text/javascript">
<script>
"use strict";
test(function() {
var part = getElementByShadowIds(document, ["c-e", "part"]);
var before = window.getComputedStyle(part).color;
const part = getElementByShadowIds(document, ["c-e", "part"]);
const before = window.getComputedStyle(part).color;
part.setAttribute("part", "new-partp");
var after = window.getComputedStyle(part).color;
const after = window.getComputedStyle(part).color;
assert_not_equals(before, after);
}, "Part in selected host changed color");
</script>

8
tests/wpt/web-platform-tests/css/css-shadow-parts/invalidation-complex-selector.html
View file

@ -18,13 +18,13 @@
</template>
The following text should be green:
<div id="elem"><custom-element id="c-e"></custom-element></div>
<script type="text/javascript">
<script>
"use strict";
test(function() {
var part = getElementByShadowIds(document, ["c-e", "part"]);
var before = window.getComputedStyle(part).color;
const part = getElementByShadowIds(document, ["c-e", "part"]);
const before = window.getComputedStyle(part).color;
document.getElementById("elem").setAttribute("id", "new-elem");
var after = window.getComputedStyle(part).color;
const after = window.getComputedStyle(part).color;
assert_not_equals(before, after);
}, "Part in selected host changed color");
</script>

53
tests/wpt/web-platform-tests/css/css-shadow-parts/part-name-idl.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Shadow Parts - Part Name IDL</title>
<meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
<link href="http://www.google.com/" rel="author" title="Google">
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/shadow-helper.js"></script>
</head>
<body>
<span id="s_no_part"></span>
<span id="s_part" part="part1"></span>
<span id="s_2_parts" part="part1 part2"></span>
<script>
"use strict";
test(function() {
const parts = s_no_part.part;
assert_equals(parts.length, 0);
assert_equals(parts.value, "");
}, "Access to .part returns an empty DOMTokenList.");
test(function() {
const parts = s_2_parts.part;
assert_equals(parts.length, 2);
assert_equals(parts[0], "part1");
assert_equals(parts[1], "part2");
assert_equals(parts.value, "part1 part2");
}, "Multiple names give a DOMTokenList with multiple entries.");
test(function() {
const parts = s_no_part.part;
assert_equals(parts.length, 0);
assert_equals(parts.value, "");
parts.add("part1");
assert_equals(parts.length, 1);
assert_equals(parts.value, "part1");
}, "DOMTokenList created by access is persisted.");
test(function() {
const parts = s_part.part;
assert_equals(parts.length, 1);
assert_equals(parts.value, "part1");
parts.add("part2");
assert_equals(parts.length, 2);
assert_equals(parts.value, "part1 part2");
assert_equals(s_part.getAttribute("part"), parts.value);
parts.remove("part1");
assert_equals(parts.length, 1);
assert_equals(parts.value, "part2");
assert_equals(s_part.getAttribute("part"), parts.value);
}, "Changes in DOMTokenList are refected in attribute.");
</script>
</body>
</html>

4
tests/wpt/web-platform-tests/css/css-shadow-parts/simple.html
View file

@ -18,11 +18,11 @@
</template>
The following text should be green:
<custom-element id="c-e"></custom-element>
<script type="text/javascript">
<script>
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
var el = getElementByShadowIds(document, ["c-e", "part"]);
const el = getElementByShadowIds(document, ["c-e", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part in selected host is styled");
</script>

2
tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-collapsing-discard-001-ref.xht → tests/wpt/web-platform-tests/css/css-text/white-space/reference/text-space-collapse-discard-001-ref.xht
View file

@ -2,7 +2,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: white-space-collapsing - discard - basic cases Reftest Reference</title>
<title>CSS Test: text-space-collapse - discard - basic cases Reftest Reference</title>
<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
<style type="text/css">
<![CDATA[

2
tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-collapsing-preserve-breaks-001-ref.xht → tests/wpt/web-platform-tests/css/css-text/white-space/reference/text-space-collapse-preserve-breaks-001-ref.xht
View file

@ -2,7 +2,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: white-space-collapsing - preserve-breaks - basic cases Reftest Reference</title>
<title>CSS Test: text-space-collapse - preserve-breaks - basic cases Reftest Reference</title>
<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
<style type="text/css">
<![CDATA[

22
tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-collapsing-trim-inner-001-ref.xht → tests/wpt/web-platform-tests/css/css-text/white-space/reference/text-space-trim-trim-inner-001-ref.xht
View file

@ -2,7 +2,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: white-space-collapsing - trim-inner - basic cases Reftest Reference</title>
<title>CSS Test: text-space-trim - trim-inner - basic cases Reftest Reference</title>
<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
<style type="text/css">
<![CDATA[
@ -17,20 +17,20 @@
Test passes if each text positions in the first line match the corresponding positions in the second line.
</p>
<div>
<span>1 2</span>
<span>　　3　　4　　</span>
<span>5 6</span>
<span>7
[<span>1 2</span>]
[<span>　　3　　4　　</span>]
[<span>5 6</span>]
[<span>7
8</span>
8</span>]
</div>
<div>
<span>1 2</span>
<span>　　3　　4　　</span>
<span>5 6</span>
<span>7
[<span>1 2</span>]
[<span>　　3　　4　　</span>]
[<span>5 6</span>]
[<span>7
8</span>
8</span>]
</div>
</body>
</html>

10
tests/wpt/web-platform-tests/css/css-text/white-space/white-space-collapsing-discard-001.xht → tests/wpt/web-platform-tests/css/css-text/white-space/text-space-collapse-discard-001.xht
View file

@ -2,16 +2,16 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: white-space-collapsing - discard - basic cases</title>
<title>CSS Test: text-space-collapse - discard - basic cases</title>
<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
<link rel="help" title="CSS Text Level 3: 4.1. White Space Collapsing: the ‘white-space-collapsing’ property" href="http://www.w3.org/TR/css-text-3/#white-space-collapsing" />
<link rel="match" href="reference/white-space-collapsing-discard-001-ref.xht"/>
<link rel="help" title="CSS Text Level 4: 3.1. White Space Collapsing: the ‘text-space-collapse’ property" href="https://drafts.csswg.org/css-text-4/#white-space-collapsing" />
<link rel="match" href="reference/text-space-collapse-discard-001-ref.xht"/>
<meta name="flags" content="" />
<meta name="assert" content="The UA should discard all white space in the element when white-space-collapsing is set to discard." />
<meta name="assert" content="The UA should discard all white space in the element when text-space-collapse is set to discard." />
<style type="text/css">
<![CDATA[
.test span {
white-space-collapsing: discard;
text-space-collapse: discard;
}
/* the CSS below is not part of the test */
span {

10
tests/wpt/web-platform-tests/css/css-text/white-space/white-space-collapsing-preserve-breaks-001.xht → tests/wpt/web-platform-tests/css/css-text/white-space/text-space-collapse-preserve-breaks-001.xht
View file

@ -2,16 +2,16 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: white-space-collapsing - preserve-breaks - basic cases</title>
<title>CSS Test: text-space-collapse - preserve-breaks - basic cases</title>
<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
<link rel="help" title="CSS Text Level 3: 4.1. White Space Collapsing: the ‘white-space-collapsing’ property" href="http://www.w3.org/TR/css-text-3/#white-space-collapsing" />
<link rel="match" href="reference/white-space-collapsing-preserve-breaks-001-ref.xht"/>
<link rel="help" title="CSS Text Level 4: 3.1. White Space Collapsing: the ‘text-space-collapse’ property" href="https://drafts.csswg.org/css-text-4/#white-space-collapsing" />
<link rel="match" href="reference/text-space-collapse-preserve-breaks-001-ref.xht"/>
<meta name="flags" content="" />
<meta name="assert" content="The UA should collapse sequences of white space into a single character when white-space-collapsing is set to preserve." />
<meta name="assert" content="The UA should collapse sequences of white space into a single character but preserve segment breaks as forced line breaks when text-space-collapse is set to preserve-breaks." />
<style type="text/css">
<![CDATA[
.test span {
white-space-collapsing: preserve-breaks;
text-space-collapse: preserve-breaks;
}
/* the CSS below is not part of the test */
span {

30
tests/wpt/web-platform-tests/css/css-text/white-space/white-space-collapsing-trim-inner-001.xht → tests/wpt/web-platform-tests/css/css-text/white-space/text-space-trim-trim-inner-001.xht
View file

@ -2,16 +2,16 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: white-space-collapsing - trim-inner - basic cases</title>
<title>CSS Test: text-space-trim - trim-inner - basic cases</title>
<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
<link rel="help" title="CSS Text Level 3: 4.1. White Space Collapsing: the ‘white-space-collapsing’ property" href="http://www.w3.org/TR/css-text-3/#white-space-collapsing" />
<link rel="match" href="reference/white-space-collapsing-trim-inner-001-ref.xht"/>
<link rel="help" title="CSS Text Level 4: 3.2. White Space Trimming: the ‘text-space-trim’ property" href="https://drafts.csswg.org/css-text-4/#white-space-trim" />
<link rel="match" href="reference/text-space-trim-trim-inner-001-ref.xht"/>
<meta name="flags" content="" />
<meta name="assert" content="The UA should discard all white space at the beginning of a block and all white space at the end of a block when white-space-collapsing is set to trim-inner." />
<meta name="assert" content="The UA should discard all white space at the beginning of a block and all white space at the end of a block when text-space-trim is set to trim-inner." />
<style type="text/css">
<![CDATA[
.test span {
white-space-collapsing: trim-inner;
text-space-trim: trim-inner;
}
/* the CSS below is not part of the test */
div {
@ -26,24 +26,24 @@
</p>
<div>
<div class="test">
<span> 1 2 </span>
<span>　　3　　4　　</span>
<span> 5 6 </span>
<span>
[<span> 1 2 </span>]
[<span>　　3　　4　　</span>]
[<span> 5 6 </span>]
[<span>
7
8
</span>
</span>]
</div>
<div>
<span>1 2</span>
<span>　　3　　4　　</span>
<span>5 6</span>
<span>7
[<span>1 2</span>]
[<span>　　3　　4　　</span>]
[<span>5 6</span>]
[<span>7
8</span>
8</span>]
</div>
</div>
</body>

2
tests/wpt/web-platform-tests/css/css-transitions/before-DOMContentLoaded-001.html
View file

@ -75,8 +75,6 @@
testsPerSlice: 1,
// milliseconds to wait before calling teardown and ending test
duration: parseFloat(duration) * 1000,
// the global suite timeout
timeout: timeout,
// prepare individual test
setup: function(data, options) {
var styles = {

2
tests/wpt/web-platform-tests/css/css-transitions/before-load-001.html
View file

@ -76,8 +76,6 @@
testsPerSlice: 1,
// milliseconds to wait before calling teardown and ending test
duration: parseFloat(duration) * 1000,
// the global suite timeout
timeout: timeout,
// prepare individual test
setup: function(data, options) {
var styles = {

2
tests/wpt/web-platform-tests/css/css-transitions/changing-while-transition.html
View file

@ -86,8 +86,6 @@
testsPerSlice: 50,
// milliseconds to wait before calling teardown and ending test
duration: parseFloat(duration) * 1000,
// the global suite timeout
timeout: timeout,
// prepare individual test
setup: function(data, options) {
var styles = {

2
tests/wpt/web-platform-tests/css/css-transitions/detached-container-001.html
View file

@ -69,8 +69,6 @@
testsPerSlice: 1,
// milliseconds to wait before calling teardown and ending test
duration: parseFloat(duration) * 1000,
// the global suite timeout
timeout: timeout,
// prepare individual test
setup: function(data, options) {
var styles = {

2
tests/wpt/web-platform-tests/css/css-transitions/hidden-container-001.html
View file

@ -65,8 +65,6 @@
testsPerSlice: 1,
// milliseconds to wait before calling teardown and ending test
duration: parseFloat(duration) * 1000,
// the global suite timeout
timeout: timeout,
// prepare individual test
setup: function(data, options) {
var styles = {

2
tests/wpt/web-platform-tests/css/css-transitions/properties-value-001.html
View file

@ -67,8 +67,6 @@
testsPerSlice: 50,
// milliseconds to wait before calling teardown and ending test
duration: parseFloat(duration) * 1000,
// the global suite timeout
timeout: timeout,
// prepare individual test
setup: function(data, options) {
var styles = {

2
tests/wpt/web-platform-tests/css/css-transitions/properties-value-002.html
View file

@ -70,8 +70,6 @@
testsPerSlice: 50,
// milliseconds to wait before calling teardown and ending test
duration: parseFloat(duration) * 1000,
// the global suite timeout
timeout: timeout,
// prepare individual test
setup: function(data, options) {
var styles = {

2
tests/wpt/web-platform-tests/css/css-transitions/properties-value-003.html
View file

@ -71,8 +71,6 @@
testsPerSlice: 50,
// milliseconds to wait before calling teardown and ending test
duration: parseFloat(duration) * 1000,
// the global suite timeout
timeout: timeout,
// prepare individual test
setup: function(data, options) {
var styles = {

2
tests/wpt/web-platform-tests/css/css-transitions/properties-value-auto-001.html
View file

@ -70,8 +70,6 @@
testsPerSlice: 50,
// milliseconds to wait before calling teardown and ending test
duration: parseFloat(duration) * 1000,
// the global suite timeout
timeout: timeout,
// prepare individual test
setup: function(data, options) {
var styles = {

2
tests/wpt/web-platform-tests/css/css-transitions/properties-value-implicit-001.html
View file

@ -70,8 +70,6 @@
testsPerSlice: 50,
// milliseconds to wait before calling teardown and ending test
duration: parseFloat(duration) * 1000,
// the global suite timeout
timeout: timeout,
// prepare individual test
setup: function(data, options) {
// as we're dealing with em-based lengths, we need to define a font-size

2
tests/wpt/web-platform-tests/css/css-transitions/properties-value-inherit-001.html
View file

@ -70,8 +70,6 @@
testsPerSlice: 50,
// milliseconds to wait before calling teardown and ending test
duration: parseFloat(duration) * 1000,
// the global suite timeout
timeout: timeout,
// prepare individual test
setup: function(data, options) {
// clone and overwrite initial styles to be

2
tests/wpt/web-platform-tests/css/css-transitions/properties-value-inherit-002.html
View file

@ -71,8 +71,6 @@
testsPerSlice: 50,
// milliseconds to wait before calling teardown and ending test
duration: parseFloat(duration) * 1000,
// the global suite timeout
timeout: timeout,
// prepare individual test
setup: function(data, options) {
// clone and overwrite initial styles to be

2
tests/wpt/web-platform-tests/css/css-transitions/properties-value-inherit-003.html
View file

@ -71,8 +71,6 @@
testsPerSlice: 50,
// milliseconds to wait before calling teardown and ending test
duration: parseFloat(duration) * 1000,
// the global suite timeout
timeout: timeout,
// prepare individual test
setup: function(data, options) {
// have parent transition the font-size only

2
tests/wpt/web-platform-tests/css/css-transitions/pseudo-elements-001.html
View file

@ -93,8 +93,6 @@
testsPerSlice: 50,
// milliseconds to wait before calling teardown and ending test
duration: parseFloat(duration) * 1000,
// the global suite timeout
timeout: timeout,
// prepare individual test
setup: function(data, options) {
generalParallelTest.setup(data, options);

2
tests/wpt/web-platform-tests/css/css-transitions/support/runParallelAsyncHarness.js
View file

@ -81,7 +81,7 @@ root.runParallelAsyncHarness = function(options) {
options.tests.forEach(function(data, index) {
data.cases = {};
cases.forEach(function(name) {
data.cases[name] = async_test(data.name + " / " + name, {timeout: options.timeout || 60000});
data.cases[name] = async_test(data.name + " / " + name);
});
});

83
tests/wpt/web-platform-tests/css/css-ui/text-overflow-ruby-ref.html Normal file
View file

@ -0,0 +1,83 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: text-overflow:ellipsis and ruby</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
html,body {
color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0;
}
.clip {
overflow: hidden;
width: 40px;
text-overflow: ellipsis;
}
input { width: 40px; -webkit-appearance: none; border: 1px solid black; }
span { white-space: pre; }
.thg { display: inline-table; }
.tc { display: inline-table; }
.t { display: inline-table; }
</style>
</head>
<body>
<div style="float:left; width:300px">
<div class="clip">
<span><span><span>aa<input class="thg">bb</span></span></span>
<br>
<span><span><span>aa<div class="thg">bbbbbb</div>cc</span></span></span>
<br>
<span><span><span>aa<span>bbbbbb</span>cc</span></span></span>
<br>
<span><span><span>aa<input class="tc">bb</span></span></span>
<br>
<span><span><span>aa<div class="tc">bbbbbb</div>cc</span></span></span>
<br>
<span><span><span>aa<input class="t">bb</span></span></span>
<br>
<span><span><span>aa<div class="t">bbbbbb</div>cc</span></span></span>
<br>
<span><span><span><input class="thg">bb</span></span></span>
<br>
<span><span><span><div class="thg">bbbbbb</div>cc</span></span></span>
<br>
<span><span><span><span>bbbbbb</span>cc</span></span></span>
<br>
<span><span><span><input class="tc">bb</span></span></span>
<br>
<span><span><span><div class="tc">bbbbbb</div>cc</span></span></span>
<br>
<span><span><span><input class="t">bb</span></span></span>
<br>
<span><span><span><div class="t">bbbbbb</div>cc</span></span></span>
</div>
</div>
<div style="float:left; width:300px">
<div class="clip">
<span><span><input class="thg">bb</span></span>
<br>
<span><span><div class="thg">bbbbbb</div>cc</span></span>
<br>
<span><span>bbbbbbcc</span></span>
<br>
<span><span><input class="tc">bb</span></span>
<br>
<span><span><div class="tc">bbbbbb</div>cc</span></span>
<br>
<span><span><input class="t">bb</span></span>
<br>
<span><span><div class="t">bbbbbb</div>cc</span></span>
</div>
</div>
</body>
</html>

85
tests/wpt/web-platform-tests/css/css-ui/text-overflow-ruby.html Normal file
View file

@ -0,0 +1,85 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: text-overflow:ellipsis and ruby</title>
<link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow">
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="match" href="text-overflow-ruby-ref.html">
<style>
html,body {
color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0;
}
.clip {
overflow: hidden;
width: 40px;
text-overflow: ellipsis;
}
input { width: 40px; -webkit-appearance: none; border: 1px solid black; }
.thg { display: table-header-group; }
.tc { display: table-cell; }
.t { display: table; }
</style>
</head>
<body>
<div style="float:left; width:300px">
<div class="clip">
<ruby><rb><span>aa<input class="thg">bb</span></rb></ruby>
<br>
<ruby><rb><span>aa<div class="thg">bbbbbb</div>cc</span></rb></ruby>
<br>
<ruby><rb><span>aa<span>bbbbbb</span>cc</span></rb></ruby>
<br>
<ruby><rb><span>aa<input class="tc">bb</span></rb></ruby>
<br>
<ruby><rb><span>aa<div class="tc">bbbbbb</div>cc</span></rb></ruby>
<br>
<ruby><rb><span>aa<input class="t">bb</span></rb></ruby>
<br>
<ruby><rb><span>aa<div class="t">bbbbbb</div>cc</span></rb></ruby>
<br>
<ruby><rb><span><input class="thg">bb</span></rb></ruby>
<br>
<ruby><rb><span><div class="thg">bbbbbb</div>cc</span></rb></ruby>
<br>
<ruby><rb><span><span>bbbbbb</span>cc</span></rb></ruby>
<br>
<ruby><rb><span><input class="tc">bb</span></rb></ruby>
<br>
<ruby><rb><span><div class="tc">bbbbbb</div>cc</span></rb></ruby>
<br>
<ruby><rb><span><input class="t">bb</span></rb></ruby>
<br>
<ruby><rb><span><div class="t">bbbbbb</div>cc</span></rb></ruby>
</div>
</div>
<div style="float:left; width:300px">
<div class="clip">
<ruby><rb><input class="thg">bb</rb></ruby>
<br>
<ruby><rb><div class="thg">bbbbbb</div>cc</rb></ruby>
<br>
<ruby><rb>bbbbbbcc</rb></ruby>
<br>
<ruby><rb><input class="tc">bb</rb></ruby>
<br>
<ruby><rb><div class="tc">bbbbbb</div>cc</rb></ruby>
<br>
<ruby><rb><input class="t">bb</rb></ruby>
<br>
<ruby><rb><div class="t">bbbbbb</div>cc</rb></ruby>
</div>
</div>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-variables/variable-exponential-blowup.html Normal file
View file

@ -0,0 +1,28 @@
<!doctype html>
<title>CSS Variables Test: Exponential blowup doesn't crash</title>
<meta charset="UTF-8">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="help" href="https://drafts.csswg.org/css-variables/">
<script>
let css = `
--v0: "Something really really really long";
`;
for (let i = 0; i < 30; ++i)
css += `--v${i + 1}: var(--v${i}), var(--v${i});`;
let s = document.createElement("style");
s.innerHTML = `
:root { ${css}; }
:root::before { content: var(--v31); }
`;
document.head.appendChild(s);
</script>
PASS if doesn't crash
<script>
test(function() {
getComputedStyle(document.documentElement, "::before").content;
assert_true(true, "Didn't crash");
});
</script>

23
tests/wpt/web-platform-tests/css/filter-effects/backdrop-filter-basic-opacity-ref.html
View file

@ -6,12 +6,11 @@
<div>
<p>Expected: A green box and an overlapping black box, with a magenta<br>
overlapping region.</p>
<p>Expected: Just a single green box.</p>
</div>
<div class="colorbox"></div>
<div class="box2outside"></div>
<div class="box2inside"></div>
<style>
.colorbox {
@ -22,21 +21,5 @@
left: 10px;
top: 100px;
}
.box2outside {
background: black;
position: absolute;
width: 100px;
height: 100px;
left: 60px;
top: 150px;
}
.box2inside {
background: #ff7fff;
position: absolute;
width: 50px;
height: 50px;
left: 60px;
top: 150px;
}
</style>

5
tests/wpt/web-platform-tests/css/filter-effects/backdrop-filter-basic-opacity.html
View file

@ -6,8 +6,7 @@
<link rel="match" href="backdrop-filter-basic-opacity-ref.html">
<div>
<p>Expected: A green box and an overlapping black box, with a magenta<br>
overlapping region.</p>
<p>Expected: Just a single green box.</p>
</div>
<div class="colorbox">
<div class="filterbox"></div>
@ -29,7 +28,7 @@
left: 50px;
top: 50px;
backdrop-filter: invert(1);
opacity: 0.5;
opacity: 0;
}
</style>

48
tests/wpt/web-platform-tests/css/filter-effects/backdrop-filter-fixed-clip-ref.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter: Should not filter outside of clip/scroll.</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<div style="width:600px;">
<p>Expected: A green box, overlapping red box, and a small, inset cyan box. The<br>
cyan should not extend to the bottom/right edges of the red box.</p>
</div>
<div id="A">
<div id="B">
<div id="F"></div>
<div id="T"></div>
</div>
</div>
<style>
div {
position:absolute;
width: 200px;
height: 200px;
}
#A {
overflow:hidden;
top: 110px;
left: 10px;
}
#B {
background:green;
}
#F {
position:fixed;
background:#f008;
top:150px;
left:50px;
}
#T {
background:#c0e3ff;
top:90px;
left:90px;
width: 110px;
height: 110px;
}
</style>

47
tests/wpt/web-platform-tests/css/filter-effects/backdrop-filter-fixed-clip.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter: Should not filter outside of clip/scroll.</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
<link rel="match" href="backdrop-filter-fixed-clip-ref.html">
<div style="width:600px;">
<p>Expected: A green box, overlapping red box, and a small, inset cyan box. The<br>
cyan should not extend to the bottom/right edges of the red box.</p>
</div>
<div id="A">
<div id="B">
<div id="F"></div>
<div id="T"></div>
</div>
</div>
<style>
div {
position:absolute;
width: 200px;
height: 200px;
}
#A {
overflow:hidden;
top: 110px;
left: 10px;
}
#B {
opacity: 0.99999;
background:green;
}
#F {
position:fixed;
background:#f008;
top:150px;
left:50px;
}
#T {
background:#fff8;
top:90px;
left:90px;
backdrop-filter:invert(1);
}
</style>

42
tests/wpt/web-platform-tests/css/filter-effects/backdrop-filter-isolation-fixed.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter: Should not filter outside parent stacking context.</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
<link rel="match" href="backdrop-filter-isolation-ref.html">
<div class="outside">
<div class="stacking-context">
<div class="filter">
</div>
</div>
</div>
<style>
div {
position: absolute;
width: 100px;
height: 100px;
background: green;
}
.outside {
top: 10px;
left: 10px;
}
.stacking-context {
position: fixed;
top: 10px;
left: 130px;
}
.filter {
width: 160px;
height: 160px;
top: 30px;
left: -90px;
opacity: 0.3;
backdrop-filter: invert(1);
background: yellow;
}
</style>

6
tests/wpt/web-platform-tests/css/geometry/DOMMatrix-002.html
View file

@ -37,6 +37,12 @@
checkDOMMatrix(matrix, initialMatrix());
},"test scale() doesn't mutate");
test(function() {
var matrix = initialMatrix();
matrix.scaleNonUniform(1,5);
checkDOMMatrix(matrix, initialMatrix());
},"test scaleNonUniform() doesn't mutate");
test(function() {
var matrix = initialMatrix();
matrix.scale3d(3,2,1,1);

21
tests/wpt/web-platform-tests/css/geometry/DOMMatrix-003.html
View file

@ -139,6 +139,27 @@
checkDOMMatrix(result, expected);
},"test scale() with offsets");
test(function() {
var result = initialDOMMatrix().scaleNonUniform();
var expected = initialDOMMatrix()
.scale(1, 1, 1, 0, 0, 0);
checkDOMMatrix(result, expected);
},"test scaleNonUniform()");
test(function() {
var result = initialDOMMatrix().scaleNonUniform(6);
var expected = initialDOMMatrix()
.scale(6, 1, 1, 0, 0, 0);
checkDOMMatrix(result, expected);
},"test scaleNonUniform() with sx");
test(function() {
var result = initialDOMMatrix().scaleNonUniform(5, 7);
var expected = initialDOMMatrix()
.scale(5, 7, 1, 0, 0, 0);
checkDOMMatrix(result, expected);
},"test scaleNonUniform() with sx, sy");
test(function() {
var result = initialDOMMatrix().scale3d(7, 5, 2, 3);
var expected = initialDOMMatrix()

1
tests/wpt/web-platform-tests/css/geometry/historical.html
View file

@ -7,7 +7,6 @@
// Removed members
[
// https://github.com/w3c/fxtf-drafts/commit/99e3212469026b2f2f50926a41912d110a1741b7
['DOMMatrixReadOnly', 'scaleNonUniform'],
['DOMMatrix', 'scaleNonUniformSelf'],
// https://github.com/w3c/fxtf-drafts/commit/86da3dc961d442f9d8dc7ab59065a9804e109286
['DOMMatrix', 'multiplyBy'],