mirror of
https://github.com/servo/servo.git
synced 2025-08-15 02:15:33 +01:00
Update web-platform-tests to revision 4a5223502fa660ce03e470af6a61c8bc26c5a8ee
This commit is contained in:
WPT Sync Bot
parent
c5f7c9ccf3
commit
e891345f26
1328 changed files with 36632 additions and 20588 deletions
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Shadow Parts - All Hosts</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>::part(partp) { color: green; }</style>
|
||||
<script>installCustomElement("custom-element", "custom-element-template");</script>
|
||||
<template id="custom-element-template">
|
||||
<style>span { color: red; }</style>
|
||||
<span id="part" part="partp">This text</span>
|
||||
</template>
|
||||
The following text should be green:
|
||||
<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">
|
||||
"use strict";
|
||||
const colorGreen = "rgb(0, 128, 0)";
|
||||
test(function() {
|
||||
var 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"]);
|
||||
assert_equals(window.getComputedStyle(el).color, colorGreen);
|
||||
}, "::part with host selector styles in second host");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Shadow Parts - Chaining Invalid Selector</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-outer::part(c-e-part)::part(partp) { color: red; }</style>
|
||||
<div>
|
||||
It's invalid to use 2 pseudoelements in a selector but if somehow it becomes valid,
|
||||
it should not expose the internal structure of the shadow tree.
|
||||
</div>
|
||||
<script>installCustomElement("custom-element-inner", "custom-element-inner-template");</script>
|
||||
<template id="custom-element-inner-template">
|
||||
<style>span { color: green; }</style>
|
||||
<span id="part" part="partp">This text</span>
|
||||
</template>
|
||||
<script>installCustomElement("custom-element-outer", "custom-element-outer-template");</script>
|
||||
<template id="custom-element-outer-template">
|
||||
The following text should be green:
|
||||
<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">
|
||||
"use strict";
|
||||
const colorGreen = "rgb(0, 128, 0)";
|
||||
test(function() {
|
||||
var 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() {
|
||||
assert_equals(document.getElementsByTagName("body")[0].style.length, 0);
|
||||
}, "Chained ::part selectors are dropped");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Shadow Parts - Complex Matching</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>div #c-e::part(partp) { color: green; }</style>
|
||||
<script>installCustomElement("custom-element", "custom-element-template");</script>
|
||||
<template id="custom-element-template">
|
||||
<style>span { color: red; }</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 type="text/javascript">
|
||||
"use strict";
|
||||
const colorGreen = "rgb(0, 128, 0)";
|
||||
test(function() {
|
||||
var el = getElementByShadowIds(document, ["c-e", "part"]);
|
||||
assert_equals(window.getComputedStyle(el).color, colorGreen);
|
||||
}, "Complex selector for host works");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Shadow Parts - Complex Non-matching</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>div #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:
|
||||
<pre><custom-element id="c-e"></custom-element></pre>
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
const colorGreen = "rgb(0, 128, 0)";
|
||||
test(function() {
|
||||
var el = getElementByShadowIds(document, ["c-e", "part"]);
|
||||
assert_equals(window.getComputedStyle(el).color, colorGreen);
|
||||
}, "Non-matching complex selector for host does not style");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Shadow Parts - Different Host</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-other::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:
|
||||
<custom-element id="c-e"></custom-element>
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
const colorGreen = "rgb(0, 128, 0)";
|
||||
test(function() {
|
||||
var el = getElementByShadowIds(document, ["c-e", "part"]);
|
||||
assert_equals(window.getComputedStyle(el).color, colorGreen);
|
||||
}, "Part is not styled when host is not selected");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Shadow Parts - Host Stylesheet</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>
|
||||
<script>installCustomElement("custom-element", "custom-element-template");</script>
|
||||
<template id="custom-element-template">
|
||||
<style>
|
||||
::part(partp) { color: red; }
|
||||
span { color: green; }
|
||||
</style>
|
||||
<span id="part" part="partp">This text</span>
|
||||
</template>
|
||||
The following text should be green:
|
||||
<custom-element id="c-e"></custom-element>
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
const colorGreen = "rgb(0, 128, 0)";
|
||||
test(function() {
|
||||
var 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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Shadow Parts - Inner Host</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-outer::part(partp) { color: green; }</style>
|
||||
<script>installCustomElement("custom-element-inner", "custom-element-inner-template");</script>
|
||||
<template id="custom-element-inner-template">
|
||||
<style>span { color: blue; }</style>
|
||||
<span id="blue_part" part="partp">This text</span>
|
||||
</template>
|
||||
<script>installCustomElement("custom-element-outer", "custom-element-outer-template");</script>
|
||||
<template id="custom-element-outer-template">
|
||||
<style>span { color: red; }</style>
|
||||
<span id="green_part" part="partp">This text</span>
|
||||
The following text should be blue:
|
||||
<custom-element-inner id="c-e-inner"></custom-element-inner>
|
||||
</template>
|
||||
The following text should be green:
|
||||
<custom-element-outer id="c-e-outer"></custom-element-outer>
|
||||
<script type="text/javascript">
|
||||
"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"]);
|
||||
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"]);
|
||||
assert_equals(window.getComputedStyle(el).color, colorBlue);
|
||||
}, "Part in inner host is not styled by document style sheet");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Shadow Parts - Simple</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: green; }</style>
|
||||
<script>installCustomElement("custom-element", "custom-element-template");</script>
|
||||
<template id="custom-element-template">
|
||||
<style>span { color: red; }</style>
|
||||
<span id="part" part="partp">This text</span>
|
||||
</template>
|
||||
The following text should be green:
|
||||
<custom-element id="c-e"></custom-element>
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
const colorGreen = "rgb(0, 128, 0)";
|
||||
test(function() {
|
||||
var el = getElementByShadowIds(document, ["c-e", "part"]);
|
||||
assert_equals(window.getComputedStyle(el).color, colorGreen);
|
||||
}, "Part in selected host is styled");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
// Takes a root element and a list of ids of shadow host elements. Each id refers to a shadow host
|
||||
// inside the previous id's shadow tree.
|
||||
function getElementByShadowIds(root, ids) {
|
||||
for (var i = 0; ;i++) {
|
||||
var host = root.getElementById(ids[i]);
|
||||
if (host == null) {
|
||||
throw "No element found: i=" + i + " id=" + ids[i] + ". Root was " + root;
|
||||
}
|
||||
if (i == ids.length - 1) {
|
||||
return host;
|
||||
}
|
||||
root = host.shadowRoot;
|
||||
if (root == null) {
|
||||
throw "No shadowRoot found: i=" + i + " id=" + ids[i] + ". Host was " + host;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Installs a mininal custom element based on this template.
|
||||
function installCustomElement(element_name, template_id) {
|
||||
ceClass = class extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
var template = document
|
||||
.getElementById(template_id)
|
||||
.content;
|
||||
this
|
||||
.attachShadow({mode: 'open'})
|
||||
.appendChild(template.cloneNode(true));
|
||||
}
|
||||
};
|
||||
window.customElements.define(element_name, ceClass);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue