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

Update web-platform-tests to revision 1a7d6fcf01f28389b557b20951808a8adfef7e2d

Browse source
This commit is contained in:
WPT Sync Bot 2021-01-29 08:21:06 +00:00
parent cabd254509
commit 7b73751e5d
101 changed files with 1496 additions and 219 deletions
Download patch file Download diff file Expand all files Collapse all files

18
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-popup-element/popup-inside-display-none.tentative.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=author title="Mason Freed" href="mailto:masonfreed@chromium.org">
<link rel=help href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md">
<link rel=match href="popup-hidden-display-ref.tentative.html">
No popup should be displayed here.<p>
<div style="display:none">
<popup>This content should be hidden</popup>
</div>
<script>
const popup = document.querySelector('popup');
popup.show();
if (!popup.open)
document.body.appendChild(document.createTextNode('FAIL'));
</script>

165
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-popup-element/popup-shadow-dom.tentative.html Normal file
View file

@ -0,0 +1,165 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<link rel=help href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
function ensureShadowDom(host) {
host.querySelectorAll('my-element').forEach(host => {
if (host.shadowRoot)
return; // Declarative Shadow DOM is enabled
const template = host.firstElementChild;
assert_true(template instanceof HTMLTemplateElement);
const shadow = host.attachShadow({mode: 'open'});
shadow.appendChild(template.content);
template.remove();
})
}
function findPopups(root) {
let popups = [];
if (!root)
return popups;
if (root instanceof HTMLPopupElement)
popups.push(root);
popups.push(...findPopups(root.shadowRoot));
root.childNodes.forEach(child => {
popups.push(...findPopups(child));
})
return popups;
}
function getPopupReferences(testId) {
const testRoot = document.querySelector(`#${testId}`);
assert_true(!!testRoot);
ensureShadowDom(testRoot);
return findPopups(testRoot);
}
function popupVisible(popup) {
const style = getComputedStyle(popup);
return !!(style.display !== "none" && style.visibility !== "hidden" &&
(popup.offsetWidth || popup.offsetHeight || popup.getClientRects().length));
}
function showPopup(testId,popupNum) {
getPopupReferences(testId)[popupNum].show();
}
</script>
<div id=test1>
<button onclick='showPopup("test1",0)'>Test1 Popup</button>
<my-element>
<template shadowroot=open>
<popup>
<p>This should show, even though it is inside shadow DOM.</p>
</popup>
</template>
</my-element>
</div>
<script>
test(function() {
const popup = getPopupReferences('test1')[0];
popup.show();
assert_true(popup.open);
assert_true(popupVisible(popup));
}, "Popups located inside shadow DOM can still be shown");
</script>
<div id=test2>
<button id=t2b1 onclick='showPopup("test2",0)'>Test 2 Popup 1</button>
<popup anchor=t2b1 style="top: 400px;">
<p>Popup 1</p>
<button id=t2b2 onclick='showPopup("test2",1)'>Test 2 Popup 2</button>
<my-element>
<template shadowroot=open>
<popup anchor=t2b2 style="top: 400px;">
<p>This popup can never be visible:</p>
<p>Hiding this popup will hide *all* open popups,</p>
<p>because t2b2 doesn't exist in this context.</p>
<p>And since popup 1 is not shown, it is display:none,</p>
<p>which means no child content is shown at all.</p>
</popup>
</template>
</my-element>
</popup>
</div>
<script>
test(function() {
const [popup1,popup2] = getPopupReferences('test2');
popup1.show();
assert_true(popup1.open);
assert_true(popupVisible(popup1));
popup2.show();
assert_false(popup1.open); // P1 was closed by P2
assert_true(popup2.open); // P2 thinks it is open
assert_false(popupVisible(popup1)); // But neither is visible
assert_false(popupVisible(popup2));
}, "anchor references do not cross shadow boundaries");
</script>
<div id=test3>
<my-element>
<template shadowroot=open>
<button id=t3b1 onclick='showPopup("test3",0)'>Test 3 Popup 1</button>
<popup anchor=t3b1>
<p>This popup will be hidden when popup2 shows.</p>
<slot></slot>
</popup>
</template>
<button id=t3b2 onclick='showPopup("test3",1)'>Test 3 Popup 2</button>
</my-element>
<popup anchor=t3b2>Popup 2</popup>
</div>
<script>
test(function() {
const [popup1,popup2] = getPopupReferences('test3');
popup1.show();
assert_true(popup1.open);
assert_true(popupVisible(popup1));
// Showing popup2 will close popup1, since it is not a DOM
// tree ancestor of popup2's anchor button.
popup2.show();
assert_true(popup2.open);
assert_true(popupVisible(popup2));
assert_false(popup1.open);
assert_false(popupVisible(popup1));
popup2.hide();
}, "anchor references use the DOM tree not the flat tree");
</script>
<div id=test4>
<button id=t4b1 onclick='showPopup("test4",0)'>Test 4 Popup 1</button>
<popup anchor=t4b1>
<p>This should not get hidden when popup2 opens.</p>
<my-element>
<template shadowroot=open>
<button id=t4b2 onclick='showPopup("test4",1)'>Test 4 Popup 2</button>
<popup anchor=t4b2>
<p>This should not hide popup1.</p>
</popup>
</template>
</my-element>
</popup>
</div>
<script>
test(function() {
const [popup1,popup2] = getPopupReferences('test4');
popup1.show();
popup2.show();
// Both 1 and 2 should be open at this point.
assert_true(popup1.open);
assert_true(popupVisible(popup1));
assert_true(popup2.open);
assert_true(popupVisible(popup2));
// This should hide both of them.
popup1.hide();
assert_false(popup2.open);
assert_false(popupVisible(popup2));
}, "The popup stack is preserved across shadow-inclusive ancestors");
</script>