mirror of
https://github.com/servo/servo.git
synced 2025-08-15 02:15:33 +01:00
Auto merge of #22743 - ferjm:shadowdom, r=emilio
Partial ShadowDOM support This is just an early WIP, not to take it very seriously yet. - [X] `./mach build -d` does not report any errors - [X] `./mach test-tidy` does not report any errors - [x] These changes fix #22719 - [x] There are tests for these changes <!-- Reviewable:start --> --- This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/22743) <!-- Reviewable:end -->
This commit is contained in:
bors-servo
GitHub
commit
799490a02e
75 changed files with 2081 additions and 702 deletions
|
|
@ -30,10 +30,10 @@ macro_rules! sizeof_checker (
|
|||
|
||||
// Update the sizes here
|
||||
sizeof_checker!(size_event_target, EventTarget, 56);
|
||||
sizeof_checker!(size_node, Node, 200);
|
||||
sizeof_checker!(size_element, Element, 448);
|
||||
sizeof_checker!(size_htmlelement, HTMLElement, 464);
|
||||
sizeof_checker!(size_div, HTMLDivElement, 464);
|
||||
sizeof_checker!(size_span, HTMLSpanElement, 464);
|
||||
sizeof_checker!(size_text, Text, 232);
|
||||
sizeof_checker!(size_characterdata, CharacterData, 232);
|
||||
sizeof_checker!(size_node, Node, 184);
|
||||
sizeof_checker!(size_element, Element, 392);
|
||||
sizeof_checker!(size_htmlelement, HTMLElement, 408);
|
||||
sizeof_checker!(size_div, HTMLDivElement, 408);
|
||||
sizeof_checker!(size_span, HTMLSpanElement, 408);
|
||||
sizeof_checker!(size_text, Text, 216);
|
||||
sizeof_checker!(size_characterdata, CharacterData, 216);
|
||||
|
|
|
|||
|
|
@ -1272,6 +1272,3 @@
|
|||
[CSSStyleDeclaration interface: sheet.cssRules[2\].cssRules[0\].style must inherit property "cssFloat" with the proper type]
|
||||
expected: FAIL
|
||||
|
||||
[ShadowRoot interface: attribute styleSheets]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -998,30 +998,6 @@
|
|||
[Unscopable handled correctly for append([object Object\],[object Object\]) on DocumentFragment]
|
||||
expected: FAIL
|
||||
|
||||
[ShadowRoot interface: existence and properties of interface object]
|
||||
expected: FAIL
|
||||
|
||||
[ShadowRoot interface object length]
|
||||
expected: FAIL
|
||||
|
||||
[ShadowRoot interface object name]
|
||||
expected: FAIL
|
||||
|
||||
[ShadowRoot interface: existence and properties of interface prototype object]
|
||||
expected: FAIL
|
||||
|
||||
[ShadowRoot interface: existence and properties of interface prototype object's "constructor" property]
|
||||
expected: FAIL
|
||||
|
||||
[ShadowRoot interface: existence and properties of interface prototype object's @@unscopables property]
|
||||
expected: FAIL
|
||||
|
||||
[ShadowRoot interface: attribute mode]
|
||||
expected: FAIL
|
||||
|
||||
[ShadowRoot interface: attribute host]
|
||||
expected: FAIL
|
||||
|
||||
[Element interface: existence and properties of interface prototype object's @@unscopables property]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -7301,6 +7301,18 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/partial_shadow_dom_layout_style.html": [
|
||||
[
|
||||
"mozilla/partial_shadow_dom_layout_style.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/mozilla/partial_shadow_dom_layout_style_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/remove_link_styles.html": [
|
||||
[
|
||||
"mozilla/remove_link_styles.html",
|
||||
|
|
@ -10844,6 +10856,11 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/partial_shadow_dom_layout_style_ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/poster.png": [
|
||||
[
|
||||
{}
|
||||
|
|
@ -13515,6 +13532,12 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/partial_shadow_dom.html": [
|
||||
[
|
||||
"mozilla/partial_shadow_dom.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"mozilla/postmessage_closed.html": [
|
||||
[
|
||||
"mozilla/postmessage_closed.html",
|
||||
|
|
@ -20283,7 +20306,7 @@
|
|||
"testharness"
|
||||
],
|
||||
"mozilla/interfaces.html": [
|
||||
"a2b9fd23948319fabc0b5fff550b9565704b6678",
|
||||
"c7e1929c626007e2ef3cdf9f2276620aa995c5b7",
|
||||
"testharness"
|
||||
],
|
||||
"mozilla/interfaces.js": [
|
||||
|
|
@ -20430,6 +20453,18 @@
|
|||
"5aff666995fe6cd1d4e84e63a9f6019d04387f8e",
|
||||
"testharness"
|
||||
],
|
||||
"mozilla/partial_shadow_dom.html": [
|
||||
"74e308f94036a6dbf5c4223cd3d229f49ffceb4e",
|
||||
"testharness"
|
||||
],
|
||||
"mozilla/partial_shadow_dom_layout_style.html": [
|
||||
"822e86bc07103351a5ceb2203fd9b6bee0c6367d",
|
||||
"reftest"
|
||||
],
|
||||
"mozilla/partial_shadow_dom_layout_style_ref.html": [
|
||||
"bf40d2cc35b6b2c1e32afffa0651cb1b26e41fe8",
|
||||
"support"
|
||||
],
|
||||
"mozilla/poster.png": [
|
||||
"33834c3ef095fa9c0080017e1b65b2eb8413eac4",
|
||||
"support"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
[partial_shadow_dom.html]
|
||||
prefs: [dom.shadowdom.enabled:true]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[partial_shadow_dom_layout_style.html]
|
||||
prefs: [dom.shadowdom.enabled:true]
|
||||
|
|
@ -202,6 +202,7 @@ test_interfaces([
|
|||
"Request",
|
||||
"Response",
|
||||
"Screen",
|
||||
"ShadowRoot",
|
||||
"Storage",
|
||||
"StorageEvent",
|
||||
"StyleSheet",
|
||||
|
|
|
|||
41
tests/wpt/mozilla/tests/mozilla/partial_shadow_dom.html
Normal file
41
tests/wpt/mozilla/tests/mozilla/partial_shadow_dom.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="header" class="header">Not in the shadows</h1>
|
||||
<div id="host">
|
||||
</div>
|
||||
<script>
|
||||
test(function() {
|
||||
// Attach shadow.
|
||||
var host = document.getElementById('host');
|
||||
var shadowRoot = host.attachShadow();
|
||||
assert_not_equals(shadowRoot, null);
|
||||
assert_equals(shadowRoot.host, host);
|
||||
assert_equals(shadowRoot.mode, 'closed');
|
||||
|
||||
assert_equals(document.body.getElementsByTagName('h1').length, 1);
|
||||
assert_equals(document.body.getElementsByClassName('header').length, 1);
|
||||
assert_equals(document.getElementById('header').textContent, "Not in the shadows");
|
||||
assert_equals(document.querySelectorAll('h1').length, 1);
|
||||
assert_equals(document.body.childNodes.length, 6);
|
||||
|
||||
// Append child to shadow tree and check that its content is encapsulated.
|
||||
var shadowChild = document.createElement('h1');
|
||||
shadowChild.classList.add('header');
|
||||
shadowChild.setAttribute('id', 'header');
|
||||
shadowChild.textContent = 'In the shadows';
|
||||
shadowRoot.appendChild(shadowChild);
|
||||
assert_equals(document.body.getElementsByTagName('h1').length, 1);
|
||||
assert_equals(document.body.getElementsByClassName('header').length, 1);
|
||||
assert_equals(document.querySelectorAll('h1').length, 1);
|
||||
assert_equals(document.body.childNodes.length, 6);
|
||||
assert_equals(shadowRoot.querySelectorAll('h1').length, 1);
|
||||
assert_equals(shadowRoot.getElementById('header').textContent, "In the shadows");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>Partial Shadow DOM support - layout & style</title>
|
||||
<link rel="match" href="partial_shadow_dom_layout_style_ref.html">
|
||||
<style>
|
||||
h1 { color: red; }
|
||||
</style>
|
||||
<h1>Not in the shadows</h1>
|
||||
<div id="host">
|
||||
</div>
|
||||
<script>
|
||||
var host = document.getElementById('host');
|
||||
var shadowRoot = host.attachShadow({ mode: 'closed' });
|
||||
var shadowChild = document.createElement('h1');
|
||||
shadowChild.textContent = 'In the shadows';
|
||||
shadowRoot.appendChild(shadowChild);
|
||||
var shadowStyles = document.createElement('style');
|
||||
shadowStyles.textContent = 'h1 { color: blue; }';
|
||||
shadowRoot.appendChild(shadowStyles);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Partial Shadow DOM support - layout & style</title>
|
||||
<style>
|
||||
h1 { color: red; }
|
||||
.blue { color: blue; }
|
||||
</style>
|
||||
<h1>Not in the shadows</h1>
|
||||
<div id="host">
|
||||
<h1 class='blue'>In the shadows</h1>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue