Update web-platform-tests to revision ac4274136e9a034628a3a469890c8e37babbc902

This commit is contained in:
WPT Sync Bot 2018-12-14 20:35:55 -05:00
parent c9229f3f99
commit b0862d9cc1
68 changed files with 2064 additions and 135 deletions

View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Animations: parsing computedStyle.animation</title>
<link rel="help" href="https://drafts.csswg.org/css-animations/#animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="test1"></div>
<div id="test2"></div>
<script>
function testComputedStyle(computedStyle1, computedStyle2, name) {
assert_equals(computedStyle1.animationName, name, "computedStyle1.animationName");
assert_equals(computedStyle2.animationName, name, "computedStyle2.animationName");
assert_equals(computedStyle1.animation, computedStyle2.animation,
"computedStyle1 and computedStyle2 should have the same animation");
}
function testAnimation(input, name) {
var style1 = test1.style;
var style2 = test2.style;
var computedStyle1 = getComputedStyle(test1);
var computedStyle2 = getComputedStyle(test2);
style1.animation = input;
style2.animation = style1.animation;
testComputedStyle(computedStyle1, computedStyle2, name);
style2.animation = computedStyle1.animation;
testComputedStyle(computedStyle1, computedStyle2, name);
}
test(() => {
// We are duplicating the logic of testAnimation because the animationName of
// the getComputedStyle is "none" when there is no animation.
var style1 = test1.style;
var style2 = test2.style;
var computedStyle1 = getComputedStyle(test1);
var computedStyle2 = getComputedStyle(test2);
style1.animation = "";
style2.animation = style1.animation;
testComputedStyle(computedStyle1, computedStyle2, "none");
style2.animation = computedStyle1.animation;
assert_equals(computedStyle2.animationName, "none");
}, "Test animation name being empty.");
test(() => {
testAnimation("myShorthandAnim", "myShorthandAnim");
}, "Test a non-conflicting animation name.");
test(() => {
testAnimation("none", "none");
testAnimation("forwards", "none");
testAnimation("none forwards", "forwards");
}, "Test an animation name that is the same as a possible animation fill-mode.");
test(() => {
testAnimation("normal", "none");
testAnimation("reverse", "none");
testAnimation("normal normal", "normal");
testAnimation("normal reverse", "reverse");
}, "Test an animation name that is the same as a possible animation direction.");
test(() => {
testAnimation("running", "none");
testAnimation("paused", "none");
testAnimation("running running", "running");
testAnimation("running paused", "paused");
}, "Test an animation name that is the same as a possible running state.");
</script>

View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Animations: parsing style.animation</title>
<link rel="help" href="https://drafts.csswg.org/css-animations/#animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="test1"></div>
<div id="test2"></div>
<script>
function testStyle(style1, style2, name) {
assert_equals(style1.animationName, name, "style1.animationName");
assert_equals(style2.animationName, name, "style2.animationName");
assert_equals(style1.animation, style2.animation,
"style1 and style2 should have the same animation");
}
function testAnimation(input, name) {
var style1 = test1.style;
var style2 = test2.style;
style1.animation = input;
style2.animation = style1.animation;
testStyle(style1, style2, name);
}
test(() => {
testAnimation("", "");
}, "Test animation name being empty.");
test(() => {
testAnimation("myShorthandAnim", "myShorthandAnim");
}, "Test a non-conflicting animation name.");
test(() => {
testAnimation("none", "none");
testAnimation("forwards", "none");
testAnimation("none forwards", "forwards");
}, "Test an animation name that is the same as a possible animation fill-mode.");
test(() => {
testAnimation("normal", "none");
testAnimation("reverse", "none");
testAnimation("normal normal", "normal");
testAnimation("normal reverse", "reverse");
}, "Test an animation name that is the same as a possible animation direction.");
test(() => {
testAnimation("running", "none");
testAnimation("paused", "none");
testAnimation("running running", "running");
testAnimation("running paused", "paused");
}, "Test an animation name that is the same as a possible running state.");
</script>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Test: A SVG background should fully cover the positioning area</title>
<link rel="author" title="schenney" href="mailto:schenney@chromium.org">
<link rel="help" href="http://www.w3.org/TR/css3-background">
<link rel="match" href="reference/background-size-cover-svg-ref.html">
<style>
div {
height: 400px;
width: 600px;
position: relative;
background-color: red;
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
background-image: url("support/rectangle-2560x208.svg");
}
</style>
</head>
<body>
<div></div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Test Reference</title>
<link rel="author" title="schenney" href="mailto:schenney@chromium.org">
<style>
div {
height: 400px;
width: 600px;
position: relative;
background-color: red;
background-repeat: repeat;
background-position: bottom center;
background-image: url("../support/50x50-green.png");
}
</style>
</head>
<body>
<div></div>
</body>
</html>

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 208">
<rect fill="green" width="2560" height="208"/>
</svg>

After

Width:  |  Height:  |  Size: 122 B

View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Test column-span:all with various display types</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: 1;
column-rule: 6px solid;
width: 600px;
outline: 1px solid black;
}
.spanner {
/* column-count: 1 makes this behave like a real spanner. */
outline: 1px solid blue;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
</style>
<body>
<article class="column">
<div>block1</div>
<table class="spanner">
<tr>
<td>table as a spanner</td>
</tr>
</table>
<div>block2</div>
</article>
<br>
<article class="column">
<div>block1</div>
<div class="spanner" style="display: grid;">grid as a spanner</div>
<div>block2</div>
</article>
<br>
<article class="column">
<div>block1</div>
<div class="spanner" style="display: flex;">flex as a spanner</div>
<div>block2</div>
</article>
<br>
<article class="column">
<div>block1</div>
<fieldset class="spanner">fieldset as a spanner</fieldset>
<div>block2</div>
</article>
<br>
<article class="column">
<div>block1</div>
<details open class="spanner">details as a spanner</details>
<div>block2</div>
</article>
<br>
</body>
</html>

View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test column-span:all with various display types</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-005-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;
}
.spanner {
column-span: all;
outline: 1px solid blue;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
</style>
<body>
<article class="column">
<div>block1</div>
<table class="spanner">
<tr>
<td>table as a spanner</td>
</tr>
</table>
<div>block2</div>
</article>
<br>
<article class="column">
<div>block1</div>
<div class="spanner" style="display: grid;">grid as a spanner</div>
<div>block2</div>
</article>
<br>
<article class="column">
<div>block1</div>
<div class="spanner" style="display: flex;">flex as a spanner</div>
<div>block2</div>
</article>
<br>
<article class="column">
<div>block1</div>
<fieldset class="spanner">fieldset as a spanner</fieldset>
<div>block2</div>
</article>
<br>
<article class="column">
<div>block1</div>
<details open class="spanner">details as a spanner</details>
<div>block2</div>
</article>
<br>
</body>
</html>

View file

@ -0,0 +1,49 @@
<!doctype html>
<link rel="href" href="https://mozilla.org" title="Mozilla">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="help" href="https://drafts.csswg.org/css-scoping/#slotted-pseudo">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="host"><p>This text should be green</p></div>
<script>
let shadow = host.attachShadow({ mode: "open" });
shadow.innerHTML = `
<style>
/* This is not expected to match */
.container ::slotted(p) {
color: red !important;
}
/* This _is_ expected to match */
#nested ::slotted(p) {
background-color: green;
}
</style>
<div id="nested"><slot></slot></div>
`;
let nested = shadow.querySelector("#nested").attachShadow({ mode: "open" });
nested.innerHTML = `
<style>
.container ::slotted(p) {
color: green;
}
</style>
<div class="container">
<slot></slot>
</div>
`;
let p = document.querySelector("p");
test(function() {
assert_equals(getComputedStyle(p).color, "rgb(0, 128, 0)");
assert_equals(getComputedStyle(p).backgroundColor, "rgb(0, 128, 0)");
}, "Slotted matches rules against the slot in the right tree");
test(function() {
nested.querySelector(".container").classList.remove("container");
assert_not_equals(getComputedStyle(p).color, "rgb(0, 128, 0)");
nested.host.removeAttribute("id");
assert_not_equals(getComputedStyle(p).backgroundColor, "rgb(0, 128, 0)");
}, "Style invalidation works correctly for nested slots");
</script>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>CSS test preserved spaces and floats interaction</title>
<link rel="author" title="Koji Ishii" href="kojii@chromium.org">
<link rel="match" href="reference/pre-float-001-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
<style>
html {
font-family: Ahem;
font-size: 20px;
line-height: 1;
}
.container {
white-space: pre;
width: 10ch;
margin-bottom: 1em;
}
.float {
float: left;
width: 3ch;
height: 2em;
background: orange;
}
</style>
<body>
<div class="float"></div>
<div class="container">123456 <br>123456</div>
<div class="float"></div>
<div class="container">1234567 <br>1234567</div>
<div class="float"></div>
<div class="container">1234567 <br>1234567</div>
<div class="float"></div>
<div class="container">1234567 <br>1234567</div>
<div class="float"></div>
<div class="container">12345678 <br>12345678</div>
</body>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>CSS test preserved spaces and floats interaction</title>
<link rel="author" title="Koji Ishii" href="kojii@chromium.org">
<link rel="match" href="reference/pre-wrap-float-001-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
<style>
html {
font-family: Ahem;
font-size: 20px;
line-height: 1;
}
.container {
white-space: pre-wrap;
width: 10ch;
margin-bottom: 1em;
}
.float {
float: left;
width: 3ch;
height: 2em;
background: orange;
}
</style>
<body>
<div class="float"></div>
<div class="container">123456 123456</div>
<div class="float"></div>
<div class="container">1234567 1234567</div>
<div class="float"></div>
<div class="container">1234567 1234567</div>
<div class="float"></div>
<div class="container">1234567 1234567</div>
<div class="float"></div>
<div class="container">12345678 12345678</div>
</body>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<style>
html {
font-family: Ahem;
font-size: 20px;
line-height: 1;
}
.container {
white-space: pre;
margin-bottom: 1em;
}
.float {
float: left;
width: 3ch;
height: 2em;
background: orange;
}
</style>
<body>
<div class="float"></div>
<div class="container">123456<br>123456</div>
<div class="float"></div>
<div class="container">1234567<br>1234567</div>
<div class="float"></div>
<div class="container">1234567<br>1234567</div>
<div class="float"></div>
<div class="container">1234567<br>1234567</div>
<div class="float"></div>
<div class="container">12345678<br>12345678</div>
</body>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<style>
html {
font-family: Ahem;
font-size: 20px;
line-height: 1;
}
.container {
white-space: pre;
margin-bottom: 1em;
}
.float {
float: left;
width: 3ch;
height: 2em;
background: orange;
}
</style>
<body>
<div class="float"></div>
<div class="container">123456<br>123456</div>
<div class="float"></div>
<div class="container">1234567<br>1234567</div>
<div class="float"></div>
<div class="container">1234567<br>1234567</div>
<div class="float"></div>
<div class="container">1234567<br>1234567</div>
<div class="float"></div>
<div class="container"><br><br>12345678<br>12345678</div>
</body>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Transition should cancel when an element is reparented</title>
<link rel="help" href="https://www.w3.org/TR/css-transitions-1/#starting">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.animated-div {
margin-left: 100px;
transition: margin-left 10s -5s linear;
}
</style>
<div id="parent1">
<div id="target" class='animated-div'></div>
</div>
<div id="parent2"></div>
<script>
'use strict';
test(t => {
assert_equals(getComputedStyle(target).marginLeft, '100px');
target.style.marginLeft = '200px';
// Because the start delay is -50% of the transition duration, we should
// immediately be (approximately) at the halfway point. What we really care
// about checking is that the transition has started but has not ended.
assert_not_equals(getComputedStyle(target).marginLeft, '100px');
assert_not_equals(getComputedStyle(target).marginLeft, '200px');
// Now change the target's parent. This should cancel the transition and
// skip straight to the end state.
parent2.appendChild(target);
assert_equals(getComputedStyle(target).marginLeft, '200px');
}, 'When an element is reparented, any CSS Transition on it should be cancelled');
</script>

View file

@ -0,0 +1,515 @@
<!DOCTYPE html>
<title>CSSStyleSheet constructor and adoptedStyleSheets</title>
<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
<link rel="help" href="https://wicg.github.io/construct-stylesheets/">
<script src = '/resources/testharness.js'></script>
<script src = '/resources/testharnessreport.js'></script>
<section id="firstSection">
<div>
<span class="green"></span>
<span class="red"></span>
<span class="blue"></span>
<span class="white"></span>
<span class="yellow"></span>
</div>
</section>
<section id="secondSection"></section>
<section id="thirdSection"></section>
<script>
'use strict';
const greenStyleText = ".green { color: green; }";
const redStyleTexts = [".red { color: red; }", ".red + span + span { color: red; }"];
const blueStyleTexts = [".blue { color: blue; }", ".blue + span + span { color: blue; }"];
const whiteStyleText = "* { color: white; }";
const yellowStyleText = ".yellow { color: yellow; }";
const firstDiv = document.querySelector('#firstSection > div');
const secondDiv = firstDiv.cloneNode(true);
const shadowRoot = document.querySelector('#secondSection').attachShadow({mode: 'open'});
shadowRoot.appendChild(secondDiv);
const greenSpan = firstDiv.children[0];
const redSpan = firstDiv.children[1];
const blueSpan = firstDiv.children[2];
const whiteSpan = firstDiv.children[3];
const yellowSpan = firstDiv.children[4];
const greenShadowSpan = secondDiv.children[0];
const redShadowSpan = secondDiv.children[1];
const blueShadowSpan = secondDiv.children[2];
const whiteShadowSpan = secondDiv.children[3];
const yellowShadowSpan = secondDiv.children[4];
test(() => {
assert_equals(document.adoptedStyleSheets.length, 0);
}, "document.adoptedStyleSheets should initially have length 0.");
test(() => {
const sheet = new CSSStyleSheet({title: "Red", disabled: true, media: "screen, print"});
assert_equals(sheet.title, "Red");
assert_equals(sheet.ownerNode, null);
assert_equals(sheet.ownerRule, null);
assert_equals(sheet.media.length, 2);
assert_equals(sheet.media.item(0), "screen");
assert_equals(sheet.media.item(1), "print");
assert_true(sheet.disabled);
assert_equals(sheet.cssRules.length, 0);
sheet.insertRule(redStyleTexts[0]);
assert_equals(sheet.cssRules.length, 1);
assert_equals(sheet.cssRules[0].cssText, redStyleTexts[0]);
sheet.insertRule(redStyleTexts[1]);
assert_equals(sheet.cssRules.length, 2);
assert_equals(sheet.cssRules[0].cssText, redStyleTexts[1]);
const sheet2 = new CSSStyleSheet({});
assert_equals(sheet2.title, "")
assert_equals(sheet2.ownerNode, null);
assert_equals(sheet2.ownerRule, null);
assert_equals(sheet2.media.length, 0);
assert_false(sheet2.disabled);
assert_equals(sheet2.cssRules.length, 0);
sheet2.insertRule(redStyleTexts[1]);
assert_equals(sheet2.cssRules.length, 1);
assert_equals(sheet2.cssRules[0].cssText, redStyleTexts[1]);
sheet2.deleteRule(0);
assert_equals(sheet2.cssRules.length, 0);
const sheet3 = new CSSStyleSheet();
assert_equals(sheet3.title, "")
assert_equals(sheet3.ownerNode, null);
assert_equals(sheet3.ownerRule, null);
assert_equals(sheet3.media.length, 0);
assert_false(sheet3.disabled);
assert_equals(sheet3.cssRules.length, 0);
sheet3.insertRule(redStyleTexts[1]);
assert_equals(sheet3.cssRules.length, 1);
assert_equals(sheet3.cssRules[0].cssText, redStyleTexts[1]);
sheet3.deleteRule(0);
assert_equals(sheet3.cssRules.length, 0);
}, 'new CSSStyleSheet produces empty CSSStyleSheet');
promise_test(() => {
const sheet = new CSSStyleSheet({title: "Red", disabled: true, media: "screen, print"});
const promise_sheet = sheet.replace(redStyleTexts[0]);
return promise_sheet.then(function(sheet) {
assert_equals(sheet.title, "Red");
assert_equals(sheet.ownerNode, null);
assert_equals(sheet.ownerRule, null);
assert_equals(sheet.media.length, 2);
assert_equals(sheet.media.item(0), "screen");
assert_equals(sheet.media.item(1), "print");
assert_true(sheet.disabled);
assert_equals(sheet.cssRules.length, 1);
assert_equals(sheet.cssRules[0].cssText, redStyleTexts[0]);
sheet.insertRule(redStyleTexts[1]);
assert_equals(sheet.cssRules.length, 2);
assert_equals(sheet.cssRules[0].cssText, redStyleTexts[1]);
});
}, 'CSSStyleSheet.replace produces Promise<CSSStyleSheet>');
function createAllSheetsPromise() {
const greenSheet = new CSSStyleSheet();
const redSheet = new CSSStyleSheet({media: "screen, print"});
const blueSheet = new CSSStyleSheet({title: "Blue", disabled: true});
const whiteSheet = new CSSStyleSheet({title: "White", alternate: true});
const yellowSheet = new CSSStyleSheet({disabled: false});
const greenPromise = greenSheet.replace(greenStyleText);
const redPromise = redSheet.replace(redStyleTexts[0] + redStyleTexts[1]);
const bluePromise = blueSheet.replace(blueStyleTexts[0] + blueStyleTexts[1]);
const whitePromise = whiteSheet.replace(whiteStyleText);
const yellowPromise = yellowSheet.replace(yellowStyleText);
return [greenPromise, redPromise, bluePromise, whitePromise, yellowPromise];
}
promise_test(() => {
return Promise.all(createAllSheetsPromise()).then(values => {
const greenStyleSheet = values[0];
const redStyleSheet = values[1];
const blueStyleSheet = values[2];
const whiteStyleSheet = values[3];
const yellowStyleSheet = values[4];
// Lists of style sheets can be created, assigned and read.
document.adoptedStyleSheets = [whiteStyleSheet];
// alternate stylesheets aren't applied when title != current preferable name
assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");
document.adoptedStyleSheets = [greenStyleSheet, blueStyleSheet];
// disabled stylesheets aren't applied
assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 128, 0)");
assert_equals(getComputedStyle(redSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");
document.adoptedStyleSheets = [redStyleSheet, yellowStyleSheet];
assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(yellowSpan).color, "rgb(255, 255, 0)");
document.adoptedStyleSheets = [redStyleSheet, yellowStyleSheet, greenStyleSheet, blueStyleSheet];
assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 128, 0)");
assert_equals(getComputedStyle(redSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(yellowSpan).color, "rgb(255, 255, 0)");
});
}, 'Constructed style sheets can be applied on document');
promise_test(() => {
return Promise.all(createAllSheetsPromise()).then(values => {
const greenStyleSheet = values[0];
const redStyleSheet = values[1];
const blueStyleSheet = values[2];
const whiteStyleSheet = values[3];
const yellowStyleSheet = values[4];
shadowRoot.adoptedStyleSheets = [whiteStyleSheet];
assert_equals(getComputedStyle(greenShadowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redShadowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(blueShadowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteShadowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(yellowShadowSpan).color, "rgb(0, 0, 0)");
shadowRoot.adoptedStyleSheets = [greenStyleSheet, blueStyleSheet];
assert_equals(getComputedStyle(greenShadowSpan).color, "rgb(0, 128, 0)");
assert_equals(getComputedStyle(redShadowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(blueShadowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteShadowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(yellowShadowSpan).color, "rgb(0, 0, 0)");
shadowRoot.adoptedStyleSheets = [redStyleSheet, yellowStyleSheet];
assert_equals(getComputedStyle(greenShadowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redShadowSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(blueShadowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteShadowSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(yellowShadowSpan).color, "rgb(255, 255, 0)");
shadowRoot.adoptedStyleSheets = [redStyleSheet, yellowStyleSheet, greenStyleSheet, blueStyleSheet];
assert_equals(getComputedStyle(greenShadowSpan).color, "rgb(0, 128, 0)");
assert_equals(getComputedStyle(redShadowSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(blueShadowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteShadowSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(yellowShadowSpan).color, "rgb(255, 255, 0)");
});
}, 'Constructed style sheets can be applied on shadow root');
promise_test(() => {
const plainSheet = new CSSStyleSheet();
const redStyleSheetPromise = plainSheet.replace(redStyleTexts[0]);
return redStyleSheetPromise.then(function(redStyleSheet) {
document.adoptedStyleSheets = [redStyleSheet];
assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");
redStyleSheet.insertRule(redStyleTexts[1]);
assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");
redStyleSheet.deleteRule(1);
assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");
redStyleSheet.cssRules[0].style.color = "white";
assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteSpan).color, "rgb(255, 255, 255)");
assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");
});
}, 'Changes to constructed stylesheets through CSSOM is reflected');
promise_test(() => {
const plainSheet = new CSSStyleSheet();
const redStyleSheetPromise = plainSheet.replace(redStyleTexts[0]);
return redStyleSheetPromise.then(function(redStyleSheet) {
document.adoptedStyleSheets = [redStyleSheet];
shadowRoot.adoptedStyleSheets = [redStyleSheet];
assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(greenShadowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redShadowSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(blueShadowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteShadowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(yellowShadowSpan).color, "rgb(0, 0, 0)");
shadowRoot.adoptedStyleSheets[0].insertRule(redStyleTexts[1]);
assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(greenShadowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redShadowSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(blueShadowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteShadowSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(yellowShadowSpan).color, "rgb(0, 0, 0)");
});
}, 'Constructed stylesheet can be used and modified in multiple TreeScopes');
promise_test(() => {
const iframe = document.createElement("iframe");
document.body.appendChild(iframe);
const thirdDiv = firstDiv.cloneNode(true);
iframe.contentDocument.body.appendChild(thirdDiv);
const greenIframeSpan = thirdDiv.children[0];
const redIframeSpan = thirdDiv.children[1];
const blueIframeSpan = thirdDiv.children[2];
const whiteIframeSpan = thirdDiv.children[3];
const yellowIframeSpan = thirdDiv.children[4];
const plainSheet = new CSSStyleSheet();
const redStyleSheetPromise = plainSheet.replace(redStyleTexts[0]);
return redStyleSheetPromise.then(function(redStyleSheet) {
assert_throws('NotAllowedError', () => { iframe.contentDocument.adoptedStyleSheets = [redStyleSheet]; });
assert_equals(getComputedStyle(greenIframeSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redIframeSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(blueIframeSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteIframeSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(yellowIframeSpan).color, "rgb(0, 0, 0)");
document.adoptedStyleSheets = [redStyleSheet];
assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");
document.adoptedStyleSheets[0].insertRule(redStyleTexts[1]);
assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");
});
}, 'Stylesheets constructed on the main Document cannot be used in iframes');
promise_test(() => {
const iframe = document.createElement("iframe");
document.body.appendChild(iframe);
const thirdDiv = firstDiv.cloneNode(true);
iframe.contentDocument.body.appendChild(thirdDiv);
const greenIframeSpan = thirdDiv.children[0];
const redIframeSpan = thirdDiv.children[1];
const blueIframeSpan = thirdDiv.children[2];
const whiteIframeSpan = thirdDiv.children[3];
const yellowIframeSpan = thirdDiv.children[4];
// Make sure both the main Document and the iframe are not styled
const emptyStyleSheet = new CSSStyleSheet();
document.adoptedStyleSheets = [emptyStyleSheet];
assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(greenIframeSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redIframeSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(blueIframeSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteIframeSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(yellowIframeSpan).color, "rgb(0, 0, 0)");
const iframePlainSheet = new iframe.contentWindow.CSSStyleSheet();
const iframeRedStyleSheetPromise = iframePlainSheet.replace(redStyleTexts[0]);
return iframeRedStyleSheetPromise.then(function(iframeRedStyleSheet) {
assert_throws('NotAllowedError', () => { document.adoptedStyleSheets = [iframeRedStyleSheet]; });
assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");
iframe.contentDocument.adoptedStyleSheets = [iframeRedStyleSheet];
assert_equals(getComputedStyle(greenIframeSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redIframeSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(blueIframeSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteIframeSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(yellowIframeSpan).color, "rgb(0, 0, 0)");
iframe.contentDocument.adoptedStyleSheets[0].insertRule(redStyleTexts[1]);
assert_equals(getComputedStyle(greenIframeSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(redIframeSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(blueIframeSpan).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(whiteIframeSpan).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(yellowIframeSpan).color, "rgb(0, 0, 0)");
});
}, 'Stylesheet constructed on iframe cannot be used in the main Document');
</script>
<div id="divNonConstructed" class="nonConstructed">
</div>
<script>
`use strict`;
const shadowRootNonConstructed = divNonConstructed.attachShadow({mode:'open'})
nonConstructedStyle = document.createElement("style");
shadowRootNonConstructed.appendChild(nonConstructedStyle);
nonConstructedStyle.sheet.insertRule(".nonConstructed { color: red; }", 0);
const nonConstructedStyleSheet = nonConstructedStyle.sheet;
test(() => {
assert_equals(getComputedStyle(divNonConstructed).color, "rgb(0, 0, 0)");
assert_throws('NotAllowedError', () => { document.adoptedStyleSheets = [nonConstructedStyleSheet]; });
}, 'Adding non-constructed stylesheet to AdoptedStyleSheets is not allowed when the owner document of the stylesheet is in the same document tree as the AdoptedStyleSheets');
test(() => {
const iframe = document.createElement("iframe");
document.body.appendChild(iframe);
iframeDiv = iframe.contentDocument.createElement("div");
iframeDiv.classList.add("nonConstructed");
iframe.contentDocument.body.appendChild(iframeDiv);
assert_equals(getComputedStyle(iframeDiv).color, "rgb(0, 0, 0)");
assert_throws('NotAllowedError', () => { iframe.contentDocument.adoptedStyleSheets = [nonConstructedStyleSheet]; });
assert_equals(getComputedStyle(iframeDiv).color, "rgb(0, 0, 0)");
iframeStyle = iframe.contentDocument.createElement("style");
iframe.contentDocument.body.appendChild(iframeStyle);
iframeStyle.sheet.insertRule(".nonConstructedSpan { color: red; }");
const iframeStyleSheet = iframeStyle.sheet;
nonConstructedSpan = document.createElement("span");
nonConstructedSpan.classList.add(".nonConstructedSpan");
divNonConstructed.appendChild(nonConstructedSpan);
assert_equals(getComputedStyle(iframeDiv).color, "rgb(0, 0, 0)");
assert_throws('NotAllowedError', () => { document.adoptedStyleSheets = [iframeStyleSheet]; });
assert_equals(getComputedStyle(iframeDiv).color, "rgb(0, 0, 0)");
}, 'Adding non-constructed stylesheet to AdoptedStyleSheets is not allowed when the owner document of the stylesheet and the AdoptedStyleSheets are in different document trees');
function attachShadowDiv(host) {
const shadowRoot = host.attachShadow({mode: 'open'});
const shadowDiv = document.createElement("div");
shadowRoot.appendChild(shadowDiv);
return shadowDiv;
}
test(() => {
// Attach a div inside a shadow root with the class ".red".
const span = document.createElement("span");
thirdSection.appendChild(span);
const shadowDiv = attachShadowDiv(span);
shadowDiv.classList.add("red");
// Create empty stylesheet.
const sheet = new CSSStyleSheet();
span.shadowRoot.adoptedStyleSheets = [sheet];
assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 0, 0)");
// Replace the stylesheet text that will color it red.
sheet.replaceSync(redStyleTexts[0]);
assert_equals(getComputedStyle(shadowDiv).color, "rgb(255, 0, 0)");
assert_equals(sheet.cssRules.length, 1);
assert_equals(sheet.cssRules[0].cssText, redStyleTexts[0]);
sheet.insertRule(redStyleTexts[1]);
assert_equals(sheet.cssRules.length, 2);
assert_equals(sheet.cssRules[0].cssText, redStyleTexts[1]);
}, 'CSSStyleSheet.replaceSync replaces stylesheet text synchronously');
const import_text = '@import url("support/constructable-import.css");';
test(() => {
assert_throws("NotAllowedError", () => { (new CSSStyleSheet).replaceSync(import_text) });
}, 'CSSStyleSheet.replaceSync throws exception when there is import rule inside');
test(() => {
assert_throws("NotAllowedError", () => { (new CSSStyleSheet).insertRule(import_text) });
}, 'Inserting an @import rule through insertRule on a constructed stylesheet throws an exception');
promise_test(() => {
const span = document.createElement("span");
thirdSection.appendChild(span);
const shadowDiv = attachShadowDiv(span);
const sheet = new CSSStyleSheet();
span.shadowRoot.adoptedStyleSheets = [sheet];
assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 0, 0)");
// Replace and assert that the imported rule is applied.
const sheet_promise = sheet.replace(import_text);
return sheet_promise.then((sheet) => {
assert_equals(sheet.cssRules.length, 1);
assert_equals(sheet.cssRules[0].cssText, import_text);
assert_equals(getComputedStyle(shadowDiv).color, "rgb(255, 0, 0)");
});
}, 'CSSStyleSheet.replace allows import rule inside');
promise_test(() => {
const sheet = new CSSStyleSheet();
const sheet_promise = sheet.replace("import url('not-there.css');");
return sheet_promise.catch((reason) => {
assert_equals(reason.name, "NotAllowedError");
});
}, 'CSSStyleSheet.replace returns rejected promise on failed imports');
test(() => {
const span = document.createElement("span");
thirdSection.appendChild(span);
const shadowDiv = attachShadowDiv(span);
const sheet = new CSSStyleSheet();
span.shadowRoot.adoptedStyleSheets = [sheet];
const newSpan = span.cloneNode(true);
assert_equals(newSpan.shadowRoot, null);
}, 'Cloning a shadow host will not clone shadow root, and also adoptedStyleSheets');
test(() => {
const span = document.createElement("span");
thirdSection.appendChild(span);
const shadowDiv = attachShadowDiv(span);
const sheet = new CSSStyleSheet();
span.shadowRoot.adoptedStyleSheets = [sheet];
const iframe = document.createElement("iframe");
document.body.appendChild(iframe);
const newSpan = iframe.contentDocument.importNode(span, true);
iframe.contentDocument.body.appendChild(newSpan);
assert_equals(newSpan.shadowRoot, null);
}, 'Importing a shadow host will not copy shadow root, and also adoptedStyleSheets');
test(() => {
const span = document.createElement("span");
thirdSection.appendChild(span);
const shadowDiv = attachShadowDiv(span);
const sheet = new CSSStyleSheet();
sheet.replaceSync("* { color: red; }");
span.shadowRoot.adoptedStyleSheets = [sheet];
assert_equals(getComputedStyle(shadowDiv).color, "rgb(255, 0, 0)");
const iframe = document.createElement("iframe");
document.body.appendChild(iframe);
iframe.contentDocument.adoptNode(span);
iframe.contentDocument.body.appendChild(span);
assert_not_equals(span.shadowRoot, null);
assert_equals(span.shadowRoot.adoptedStyleSheets.length, 1);
assert_equals(span.shadowRoot.adoptedStyleSheets[0], sheet);
assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 0, 0)");
}, 'Adopting a shadow host will move adoptedStyleSheets but it is not applied');
</script>

View file

@ -0,0 +1,3 @@
* {
color: red;
}

View file

@ -0,0 +1,2 @@
<!DOCTYPE html>
<div style="width: 100px; height: 100px; background-color: green"></div>

View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Filter Effects: Dynamic 'currentcolor' in SourceGraphic</title>
<link rel="help" href="https://drafts.fxtf.org/filter-effects/#attr-valuedef-in-sourcegraphic">
<link rel="match" href="reference/green-100x100.html">
<style>
rect {
fill: currentColor;
}
.filtered {
filter: url(#filter);
}
.green {
color: green;
}
</style>
<svg style="color: red">
<defs>
<filter id="filter" color-interpolation-filters="sRGB">
<feMerge>
<feMergeNode/>
</feMerge>
</filter>
</defs>
<g class="target filtered">
<rect width="50" height="100"/>
</g>
<g class="target">
<g class="filtered">
<rect x="50" width="50" height="100"/>
</g>
</g>
</svg>
<script>
document.body.offsetTop;
requestAnimationFrame(function() {
requestAnimationFrame(function() {
let targets = document.querySelectorAll('.target');
for (let i = 0; i < targets.length; ++i)
targets[i].classList.toggle('green');
document.documentElement.classList.remove('reftest-wait');
});
});
</script>

View file

@ -24,9 +24,11 @@ var tests = [
['[foo="bar" i]', '[foo="bar" i]'],
['[foo="bar" /**/ i]', '[foo="bar" i]'],
['[foo="bar"/**/i]', '[foo="bar" i]'],
['[*|foo="bar" i]', '[*|foo="bar" i]'],
['[foo="bar" s]', '[foo="bar" s]'],
['[foo="bar" /**/ s]', '[foo="bar" s]'],
['[foo="bar"/**/s]', '[foo="bar" s]'],
['[*|foo="bar" s]', '[*|foo="bar" s]'],
]
tests.forEach(function(arr) {

View file

@ -7,6 +7,10 @@ const longValue = "s".repeat(127);
"headers": ["accept", "accept-language", "content-language"],
"values": [longValue, "", longValue]
},
{
"headers": ["accept", "accept-language", "content-language"],
"values": ["", longValue]
},
{
"headers": ["content-type"],
"values": ["text/plain;" + "s".repeat(116), "text/plain"]
@ -17,10 +21,10 @@ const longValue = "s".repeat(127);
const noCorsHeaders = new Request("about:blank", { mode: "no-cors" }).headers;
testItem.values.forEach((value) => {
noCorsHeaders.append(header, value);
assert_equals(noCorsHeaders.get(header), testItem.values[0]);
assert_equals(noCorsHeaders.get(header), testItem.values[0], '1');
});
noCorsHeaders.set(header, values.join(", "));
assert_equals(noCorsHeaders.get(header), testItem.values[0]);
noCorsHeaders.set(header, testItem.values.join(", "));
assert_equals(noCorsHeaders.get(header), testItem.values[0], '2');
noCorsHeaders.delete(header);
assert_false(noCorsHeaders.has(header));
}, "\"no-cors\" Headers object cannot have " + header + " set to " + testItem.values.join(", "));

View file

@ -0,0 +1,12 @@
<!doctype html>
<meta http-equiv="Content-Type" content='charset="windows-1251'>
<meta charset=windows-1250>
<title></title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<link rel=help href="https://html.spec.whatwg.org/#algorithm-for-extracting-a-character-encoding-from-a-meta-element">
<script>
test(function() {
assert_equals(document.characterSet, "windows-1250");
});
</script>

View file

@ -239,7 +239,7 @@ dictionary RTCTransportStats : RTCStats {
dictionary RTCIceCandidateStats : RTCStats {
DOMString transportId;
RTCNetworkType networkType;
DOMString address;
DOMString? address;
long port;
DOMString protocol;
RTCIceCandidateType candidateType;

View file

@ -13,6 +13,11 @@
function (entryList, obs) {
var entries = entryList.getEntriesByType("resource");
for (var i = 0; i < entries.length; ++i) {
// Ignore any entries for the test harness files if present.
if (/testharness(report)?\.js/.test(entries[i].name)) {
continue;
}
++observed;
if (entries[i].name.indexOf(img_url) != -1)
++img_entries;

View file

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:import href="xslt-pass.xsl"/>
</xsl:stylesheet>

View file

@ -0,0 +1,5 @@
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="resources/request-url-path/import-relative.xsl"?>
<stylesheet-test>
This tests a stylesheet which has a xsl:import with a relative URL.
</stylesheet-test>

View file

@ -0,0 +1,12 @@
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
// For the import-relative.xsl file, respond in a way that changes the
// response URL. This is expected to change the base URL and allow the import
// from the file to succeed.
const path = 'request-url-path/import-relative.xsl';
if (url.pathname.indexOf(path) != -1) {
// Respond with a different URL, deleting "request-url-path/".
event.respondWith(fetch('import-relative.xsl'));
}
});

View file

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<p>PASS</p>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Service Worker: XSL's base URL must be the response URL</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/test-helpers.sub.js?pipe=sub"></script>
<script>
// This test loads an XML document which is controlled a service worker. The
// document loads a stylesheet and a service worker responds with another URL.
// The stylesheet imports a relative URL to test that the base URL is the
// response URL from the service worker.
promise_test(async (t) => {
const SCOPE = 'resources/xsl-base-url-iframe.xml';
const SCRIPT = 'resources/xsl-base-url-worker.js';
let worker;
let frame;
t.add_cleanup(() => {
if (frame)
frame.remove();
service_worker_unregister(t, SCOPE);
});
const registration = await service_worker_unregister_and_register(
t, SCRIPT, SCOPE);
worker = registration.installing;
await wait_for_state(t, worker, 'activated');
frame = await with_iframe(SCOPE);
assert_equals(frame.contentDocument.body.textContent, 'PASS');
}, 'base URL when service worker does respondWith(fetch(responseUrl))');
</script>

View file

@ -25,9 +25,9 @@
var first = document.getElementById('first');
assert_equals(getComputedStyle(first).x, "0px");
assert_equals(getComputedStyle(first).y, "0px");
assert_equals(getComputedStyle(first).width, "auto");
assert_equals(getComputedStyle(first).height, "auto");
}, 'width and height default to auto');
assert_equals(getComputedStyle(first).width, "0px");
assert_equals(getComputedStyle(first).height, "0px");
}, 'width and height default to auto (which computes to "0px")');
test(function() {
var second = document.getElementById('second');

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Before After
Before After

View file

@ -0,0 +1,130 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
<title>SVG Geometry Properties: getComputedStyle().height</title>
<metadata>
<h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#Sizing"/>
<h:link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"/>
</metadata>
<h:script src="/resources/testharness.js"/>
<h:script src="/resources/testharnessreport.js"/>
<svg width="200" height="100" id="test-content">
<rect/>
<rect width="100" height="200"/>
<rect width="42" style="height: auto"/>
<rect width="42" style="height: 20px"/>
<rect width="42" style="height: 40%"/>
<rect width="42" style="height: 80%; display: none"/>
<g><rect width="100" height="100"/></g>
<g width="100" height="42px"><rect width="100" height="100"/></g>
<g style="width: 10%; height: auto"><rect width="100" height="100"/></g>
<g style="width: auto; height: 20px"><rect width="100" height="100"/></g>
<g style="width: 20px; height: 10%"><rect width="100" height="100"/></g>
<image/>
<image width="42" height="200"/>
<image width="42" style="height: auto"/>
<image width="42" style="height: 230px"/>
<image width="42" style="height: 25%"/>
<image width="42" style="height: 25%; display: none"/>
<foreignObject>Some content</foreignObject>
<foreignObject height="200">Some content</foreignObject>
<foreignObject style="height: auto">Some content</foreignObject>
<foreignObject style="height: 75px">Some content</foreignObject>
<foreignObject style="height: 50%">Some content</foreignObject>
<foreignObject style="height: auto; display: none">Some content</foreignObject>
<svg/>
<svg height="200"/>
<svg style="height: auto"/>
<svg style="height: 200px"/>
<svg style="height: 50%"/>
<svg style="height: auto; display: none"/>
<text>Text1</text>
<text width="100px" height="42">Text2</text>
<text style="width: 30%; height: auto">Text3</text>
<text style="width: auto; height: 20px">Text3</text>
<text style="width: 20px; height: 30%">Text3</text>
</svg>
<script><![CDATA[
[
// Cases where computed 'height' return the used value.
{
element: 'rect',
expected: [
{ value: '0px', description: 'initial' },
{ value: '200px', description: 'presentation attribute' },
{ value: '0px', description: 'inline style (auto)' },
{ value: '20px', description: 'inline style (pixels)' },
{ value: '40px', description: 'inline style (percentage)' },
{ value: '80%', description: 'inline style but "display: none"' },
]
},
{
element: 'image',
expected: [
{ value: '0px', description: 'initial' },
{ value: '200px', description: 'presentation attribute' },
{ value: '0px', description: 'inline style (auto)' },
{ value: '230px', description: 'inline style (pixels)' },
{ value: '25px', description: 'inline style (percentage)' },
{ value: '25%', description: 'inline style but "display: none"' },
]
},
{
element: 'foreignObject',
expected: [
{ value: '0px', description: 'initial' },
{ value: '200px', description: 'presentation attribute' },
{ value: '0px', description: 'inline style (auto)' },
{ value: '75px', description: 'inline style (pixels)' },
{ value: '50px', description: 'inline style (percentage)' },
{ value: 'auto', description: 'inline style but "display: none"' },
]
},
{
element: 'svg',
expected: [
{ value: '100px', description: 'initial' },
{ value: '200px', description: 'presentation attribute' },
{ value: '100px', description: 'inline style (auto)' },
{ value: '200px', description: 'inline style (pixels)' },
{ value: '50px', description: 'inline style (percentage)' },
{ value: 'auto', description: 'inline style but "display: none"' },
]
},
// Cases where computed 'height' return the computed value.
{
element: 'g',
expected: [
{ value: 'auto', description: 'initial' },
{ value: 'auto', description: 'initial (with dummy attribute)' },
{ value: 'auto', description: 'inline style (auto)' },
{ value: '20px', description: 'inline style (pixels)' },
{ value: '10%', description: 'inline style (percentage)' },
]
},
{
element: 'text',
expected: [
{ value: 'auto', description: 'initial' },
{ value: 'auto', description: 'initial (with dummy attribute)' },
{ value: 'auto', description: 'inline style (auto)' },
{ value: '20px', description: 'inline style (pixels)' },
{ value: '30%', description: 'inline style (percentage)' },
]
},
].forEach(function(entry) {
let element_set = document.querySelectorAll('#test-content > ' + entry.element);
entry.expected.forEach(function(expected, index) {
test(function() {
let style = getComputedStyle(element_set[index]);
assert_equals(style.height, expected.value, expected.description);
}, document.title + ', <' + entry.element + '> ' + expected.description);
});
});
]]></script>
</svg>

After

Width:  |  Height:  |  Size: 5.1 KiB

View file

@ -0,0 +1,130 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
<title>SVG Geometry Properties: getComputedStyle().width</title>
<metadata>
<h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#Sizing"/>
<h:link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"/>
</metadata>
<h:script src="/resources/testharness.js"/>
<h:script src="/resources/testharnessreport.js"/>
<svg width="200" height="100" id="test-content">
<rect/>
<rect width="100" height="200"/>
<rect height="42" style="width: 40%"/>
<rect height="42" style="width: auto"/>
<rect height="42" style="width: 20px"/>
<rect height="42" style="width: 42%; display: none"/>
<g><rect width="100" height="100"/></g>
<g width="100" height="42px"><rect width="100" height="100"/></g>
<g style="width: 10%; height: auto"><rect width="100" height="100"/></g>
<g style="width: auto; height: 20px"><rect width="100" height="100"/></g>
<g style="width: 20px; height: 10%"><rect width="100" height="100"/></g>
<image/>
<image width="100"/>
<image height="42" style="width: 25%"/>
<image height="42" style="width: auto"/>
<image height="42" style="width: 230px"/>
<image height="42" style="width: 25%; display: none"/>
<foreignObject>Some content</foreignObject>
<foreignObject width="100">Some content</foreignObject>
<foreignObject style="width: 50%">Some content</foreignObject>
<foreignObject style="width: auto">Some content</foreignObject>
<foreignObject style="width: 75px">Some content</foreignObject>
<foreignObject style="width: auto; display: none">Some content</foreignObject>
<svg/>
<svg width="100"/>
<svg style="width: auto"/>
<svg style="width: 200px"/>
<svg style="width: 50%"/>
<svg style="width: auto; display: none"/>
<text>Text1</text>
<text width="100px" height="42">Text2</text>
<text style="width: 30%; height: auto">Text3</text>
<text style="width: auto; height: 20px">Text3</text>
<text style="width: 20px; height: 30%">Text3</text>
</svg>
<script><![CDATA[
[
// Cases where computed 'width' return the used value.
{
element: 'rect',
expected: [
{ value: '0px', description: 'initial' },
{ value: '100px', description: 'presentation attribute' },
{ value: '80px', description: 'inline style (percentage)' },
{ value: '0px', description: 'inline style (auto)' },
{ value: '20px', description: 'inline style (pixels)' },
{ value: '42%', description: 'inline style but "display: none"' },
]
},
{
element: 'image',
expected: [
{ value: '0px', description: 'initial' },
{ value: '100px', description: 'presentation attribute' },
{ value: '50px', description: 'inline style (percentage)' },
{ value: '0px', description: 'inline style (auto)' },
{ value: '230px', description: 'inline style (pixels)' },
{ value: '25%', description: 'inline style but "display: none"' },
]
},
{
element: 'foreignObject',
expected: [
{ value: '0px', description: 'initial' },
{ value: '100px', description: 'presentation attribute' },
{ value: '100px', description: 'inline style (percentage)' },
{ value: '0px', description: 'inline style (auto)' },
{ value: '75px', description: 'inline style (pixels)' },
{ value: 'auto', description: 'inline style but "display: none"' },
]
},
{
element: 'svg',
expected: [
{ value: '200px', description: 'initial' },
{ value: '100px', description: 'presentation attribute' },
{ value: '200px', description: 'inline style (auto)' },
{ value: '200px', description: 'inline style (pixels)' },
{ value: '100px', description: 'inline style (percentage)' },
{ value: 'auto', description: 'inline style but "display: none"' },
]
},
// Cases where computed 'width' return the computed value.
{
element: 'g',
expected: [
{ value: 'auto', description: 'initial' },
{ value: 'auto', description: 'initial (with dummy attribute)' },
{ value: '10%', description: 'inline style (percentage)' },
{ value: 'auto', description: 'inline style (auto)' },
{ value: '20px', description: 'inline style (pixels)' },
]
},
{
element: 'text',
expected: [
{ value: 'auto', description: 'initial' },
{ value: 'auto', description: 'initial (with dummy attribute)' },
{ value: '30%', description: 'inline style (percentage)' },
{ value: 'auto', description: 'inline style (auto)' },
{ value: '20px', description: 'inline style (pixels)' },
]
},
].forEach(function(entry) {
let element_set = document.querySelectorAll('#test-content > ' + entry.element);
entry.expected.forEach(function(expected, index) {
test(function() {
let style = getComputedStyle(element_set[index]);
assert_equals(style.width, expected.value, expected.description);
}, document.title + ', <' + entry.element + '> ' + expected.description);
});
});
]]></script>
</svg>

After

Width:  |  Height:  |  Size: 5.1 KiB

View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
<title>SVG Paint Servers: getComputedStyle().stopColor</title>
<metadata>
<h:link rel="help" href="https://svgwg.org/svg2-draft/pservers.html#StopColorProperty"/>
<h:link rel="help" href="https://drafts.csswg.org/css-color/#resolve-color-values"/>
<h:link rel="help" href="https://drafts.csswg.org/cssom/#serializing-css-values"/>
</metadata>
<g id="target" style="color: blue"></g>
<h:script src="/resources/testharness.js"/>
<h:script src="/resources/testharnessreport.js"/>
<h:script src="/css/support/computed-testcommon.js"/>
<script><![CDATA[
test_computed_value("stop-color", "currentcolor", "rgb(0, 0, 255)");
test_computed_value("stop-color", "white", "rgb(255, 255, 255)");
test_computed_value("stop-color", "transparent", "rgba(0, 0, 0, 0)");
test_computed_value("stop-color", "rgb(255, 255, 255)");
test_computed_value("stop-color", "#ffffff", "rgb(255, 255, 255)");
test_computed_value("stop-color", "rgba(255, 255, 255, 1.0)", "rgb(255, 255, 255)");
test_computed_value("stop-color", "rgba(255, 255, 255, 0.4)");
test_computed_value("stop-color", "hsl(0deg, 100%, 100%)", "rgb(255, 255, 255)");
test_computed_value("stop-color", "hsla(0deg, 100%, 100%, 1.0)", "rgb(255, 255, 255)");
test_computed_value("stop-color", "hsla(0deg, 100%, 100%, 0.4)", "rgba(255, 255, 255, 0.4)");
]]></script>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" fill="green"/>
</svg>

After

Width:  |  Height:  |  Size: 96 B

View file

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"
style="color: red">
<title>stop-color: Dynamically changing 'color' for a gradient with a stop with 'currentcolor'</title>
<h:link rel="help" href="https://svgwg.org/svg2-draft/pservers.html#StopColorProperty"/>
<h:link rel="match" href="reference/green-100x100.svg"/>
<linearGradient id="g">
<stop stop-color="currentcolor"/>
</linearGradient>
<rect width="50" height="100" fill="url(#g)"/>
<rect width="50" height="100" x="50" fill="currentcolor"/>
<script>
<![CDATA[
let root = document.querySelector(':root');
root.getBoundingClientRect(); // Force layout
root.style.color = 'green';
]]>
</script>
</svg>

After

Width:  |  Height:  |  Size: 742 B

View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"
color="red">
<title>SVG Paint Servers: 'stop-color' inheritance of 'currentcolor'</title>
<metadata>
<h:link rel="help" href="https://svgwg.org/svg2-draft/pservers.html#StopColorProperty"/>
<h:link rel="help" href="https://drafts.csswg.org/css-color/#resolve-color-values"/>
</metadata>
<h:script src="/resources/testharness.js"/>
<h:script src="/resources/testharnessreport.js"/>
<linearGradient stop-color="currentcolor" id="g">
<stop stop-color="inherit" color="green"/>
</linearGradient>
<script><![CDATA[
test(function() {
let stop = document.querySelector('stop');
assert_equals(getComputedStyle(stop).stopColor, 'rgb(0, 128, 0)');
}, '"currentcolor" is inherited as a keyword');
]]></script>
</svg>

After

Width:  |  Height:  |  Size: 881 B

View file

@ -1,3 +1,3 @@
mozprocess == 0.26
selenium==3.141.0
requests==2.20.1
requests==2.21.0

View file

@ -146,15 +146,11 @@ class Browser(object):
with which it should be instantiated"""
return ExecutorBrowser, {}
def check_for_crashes(self):
"""Check for crashes that didn't cause the browser process to terminate"""
def check_crash(self, process, test):
"""Check if a crash occured and output any useful information to the
log. Returns a boolean indicating whether a crash occured."""
return False
def log_crash(self, process, test):
"""Return a list of dictionaries containing information about crashes that happend
in the browser, or an empty list if no crashes occurred"""
self.logger.crash(process, test)
class NullBrowser(Browser):
def __init__(self, logger, **kwargs):

View file

@ -397,23 +397,15 @@ class FirefoxBrowser(Browser):
assert self.marionette_port is not None
return ExecutorBrowser, {"marionette_port": self.marionette_port}
def check_for_crashes(self):
def check_crash(self, process, test):
dump_dir = os.path.join(self.profile.profile, "minidumps")
return bool(mozcrash.check_for_crashes(dump_dir,
symbols_path=self.symbols_path,
stackwalk_binary=self.stackwalk_binary,
quiet=True))
def log_crash(self, process, test):
dump_dir = os.path.join(self.profile.profile, "minidumps")
mozcrash.log_crashes(self.logger,
dump_dir,
symbols_path=self.symbols_path,
stackwalk_binary=self.stackwalk_binary,
process=process,
test=test)
return bool(mozcrash.log_crashes(self.logger,
dump_dir,
symbols_path=self.symbols_path,
stackwalk_binary=self.stackwalk_binary,
process=process,
test=test))
def setup_ssl(self):
"""Create a certificate database to use in the test profile. This is configured

View file

@ -13,7 +13,7 @@ var observer = new MutationObserver(test);
observer.observe(root, {attributes: true});
if (document.readyState != "complete") {
onload = test
addEventListener('load', test);
} else {
test();
}

View file

@ -38,7 +38,7 @@ var observer = new MutationObserver(root_wait);
observer.observe(root, {attributes: true});
if (document.readyState != "complete") {
onload = root_wait;
addEventListener('load', root_wait);
} else {
root_wait();
}

View file

@ -1,5 +1,20 @@
class MessageQueue {
constructor() {
this._queue = [];
}
push(item) {
this._queue.push(item);
__wptrunner_process_next_event();
}
shift() {
return this._queue.shift();
}
}
window.__wptrunner_testdriver_callback = null;
window.__wptrunner_message_queue = [];
window.__wptrunner_message_queue = new MessageQueue();
window.__wptrunner_url = null;
window.__wptrunner_process_next_event = function() {

View file

@ -404,7 +404,7 @@ class ManifestLoader(object):
download_from_github(manifest_path, tests_path)
return manifest.load_and_update(tests_path, manifest_path, url_base,
cache_root=cache_root, update=self.force_manifest_update,
meta_filters=self.meta_filters)
meta_filters=self.meta_filters, types=self.types)
def iterfilter(filters, iter):

View file

@ -233,11 +233,8 @@ class BrowserManager(object):
if self.init_timer is not None:
self.init_timer.cancel()
def check_for_crashes(self):
return self.browser.check_for_crashes()
def log_crash(self, test_id):
return self.browser.log_crash(process=self.browser_pid, test=test_id)
def check_crash(self, test_id):
return self.browser.check_crash(process=self.browser_pid, test=test_id)
def is_alive(self):
return self.browser.is_alive()
@ -504,8 +501,7 @@ class TestRunnerManager(threading.Thread):
def init_failed(self):
assert isinstance(self.state, RunnerManagerState.initializing)
if self.browser.check_for_crashes():
self.browser.log_crash(None)
self.browser.check_crash(None)
self.browser.after_init()
self.stop_runner(force=True)
return RunnerManagerState.initializing(self.state.test,
@ -580,7 +576,7 @@ class TestRunnerManager(threading.Thread):
expected = test.expected()
status = status_subns.get(file_result.status, file_result.status)
if self.browser.check_for_crashes():
if self.browser.check_crash(test.id):
status = "CRASH"
self.test_count += 1
@ -588,8 +584,6 @@ class TestRunnerManager(threading.Thread):
if is_unexpected:
self.unexpected_count += 1
self.logger.debug("Unexpected count in this thread %i" % self.unexpected_count)
if status == "CRASH":
self.browser.log_crash(test.id)
if "assertion_count" in file_result.extra:
assertion_count = file_result.extra.pop("assertion_count")

View file

@ -0,0 +1,36 @@
<!DOCTYPE HTML>
<meta charset=utf-8>
<title>User Timing: L2 vs L3 feature detection</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(() => {
// Feature detection for PerformanceMark.
assert_equals(typeof(PerformanceMark.prototype), "object");
// Test for UserTiming L3.
if (PerformanceMark.prototype.hasOwnProperty('detail')) {
assert_equals(typeof(performance.mark("mark")), "object",
"performance.mark should return an object in UserTiming L3.");
}
// Test for UserTiming L2.
else {
assert_equals(typeof(performance.mark("mark")), "undefined",
"performance.mark should be void in UserTiming L2.");
}
}, "Test PerformanceMark existence and feature detection");
test(() => {
// Feature detection for PerformanceMeasure.
assert_equals(typeof(PerformanceMeasure.prototype), "object");
// Test for UserTiming L3.
if (PerformanceMeasure.prototype.hasOwnProperty('detail')) {
assert_equals(typeof(performance.measure("measure")), "object",
"performance.measure should return an object in UserTiming L3.");
}
// Test for UserTiming L2.
else {
assert_equals(typeof(performance.measure("measure")), "undefined",
"performance.measure should be void in UserTiming L2.");
}
}, "Test PerformanceMeasure existence and feature detection");
</script>

View file

@ -1,46 +0,0 @@
<!DOCTYPE HTML>
<meta charset=utf-8>
<title>User Timing: L2 APIs return null</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<p>User Timing: L2 APIs return null</p>
<div id="log"></div>
<script>
async_test(function (t) {
self.performance.clearMeasures();
const measure = self.performance.measure("measure1");
assert_equals(measure, null);
t.done();
}, "L2: performance.measure(name) should return null.");
async_test(function (t) {
self.performance.clearMeasures();
self.performance.mark("1");
const measure = self.performance.measure("measure2", 1);
assert_equals(measure, null);
t.done();
}, "L2: performance.measure(name, param1) should return null.");
async_test(function (t) {
self.performance.clearMeasures();
self.performance.mark("1");
self.performance.mark("2");
const measure = self.performance.measure("measure3", 1, 2);
assert_equals(measure, null);
t.done();
}, "L2: performance.measure(name, param1, param2) should return null.");
async_test(function (t) {
self.performance.clearMarks();
const mark = self.performance.mark("mark1");
assert_equals(mark, null);
t.done();
}, "L2: performance.mark(name) should return null.");
async_test(function (t) {
self.performance.clearMarks();
const mark = self.performance.mark("mark2", { startTime: 34 });
assert_equals(mark, null);
t.done();
}, "L2: performance.mark(name, param) should return null.");
</script>

View file

@ -245,9 +245,7 @@ def test_button(session):
def test_button_with_subtree(session):
"""
Whilst an <input> is normally editable, the focusable area
where it is placed will default to the <button>. I.e. if you
try to click <input> to focus it, you will hit the <button>.
Elements inside button elements are interactable.
"""
session.url = inline("""
<button>
@ -257,7 +255,7 @@ def test_button_with_subtree(session):
text_field = session.find.css("input", all=False)
response = element_clear(session, text_field)
assert_error(response, "element not interactable")
assert_success(response)
def test_contenteditable(session, add_event_listeners, tracked_events):

View file

@ -238,6 +238,29 @@
});
}, 'setRemoteDescription(rollback) should remove newly created transceiver from transceiver list');
promise_test(async t => {
const pc1 = new RTCPeerConnection();
t.add_cleanup(() => pc1.close());
const pc2 = new RTCPeerConnection();
t.add_cleanup(() => pc2.close());
pc1.addTransceiver('audio');
const offer = await pc1.createOffer();
await pc1.setLocalDescription(offer);
assert_false(pc1.getTransceivers()[0].stopped, 'Transceiver is not stopped');
await pc2.setRemoteDescription(offer);
pc2.getTransceivers()[0].stop();
const answer = await pc2.createAnswer();
await pc1.setRemoteDescription(answer);
assert_true(pc1.getTransceivers()[0].stopped, 'Transceiver is stopped');
assert_equals(pc1.getReceivers().length, 0, 'getReceivers does not expose a receiver of a stopped transceiver');
assert_equals(pc1.getSenders().length, 0, 'getSenders does not expose a sender of a stopped transceiver');
}, 'setRemoteDescription should stop the transceiver if its corresponding m section is rejected');
/*
TODO
- Steps for transceiver direction is added to tip of tree draft, but not yet

View file

@ -1175,6 +1175,8 @@
stoppedTransceiver.receiver.track.onended = resolve;
});
stoppedTransceiver.stop();
assert_equals(pc1.getReceivers().length, 0, 'getReceivers does not expose a receiver of a stopped transceiver');
assert_equals(pc1.getSenders().length, 0, 'getSenders does not expose a sender of a stopped transceiver');
await onended;