mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision b'7af9d6ec48ab04043a2bea85a3599904a1a19efa'
This commit is contained in:
WPT Sync Bot
Josh Matthews
parent
8050c95e31
commit
87be1008de
2742 changed files with 142451 additions and 40667 deletions
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>Popup anchor nesting</title>
|
||||
<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 src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-actions.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- This example has the anchor (b1) for one popup (p1)
|
||||
which contains a separate popup (p2) which is anchored
|
||||
by a separate anchor (b2). -->
|
||||
<button id=b1 onclick='p1.show()'>Popup 1
|
||||
<popup id=p2 anchor=b2>
|
||||
<span id=inside2>Inside popup 2</span>
|
||||
</popup>
|
||||
</button>
|
||||
<popup id=p1 anchor=b1>This is popup 1</popup>
|
||||
<button id=b2 onclick='p2.show()'>Popup 2</button>
|
||||
|
||||
<style>
|
||||
#p1 { top:50px; }
|
||||
#p2 { top:50px; left:250px; }
|
||||
popup { border: 5px solid red; }
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
function clickOn(element) {
|
||||
const actions = new test_driver.Actions();
|
||||
return actions.pointerMove(0, 0, {origin: element})
|
||||
.pointerDown({button: actions.ButtonType.LEFT})
|
||||
.pointerUp({button: actions.ButtonType.LEFT})
|
||||
.send();
|
||||
}
|
||||
|
||||
const popup1 = document.querySelector('#p1');
|
||||
const button1 = document.querySelector('#b1');
|
||||
const popup2 = document.querySelector('#p2');
|
||||
|
||||
(async function() {
|
||||
setup({ explicit_done: true });
|
||||
|
||||
popup1.show();
|
||||
assert_true(popup1.open);
|
||||
popup2.show();
|
||||
assert_true(popup2.open);
|
||||
assert_false(popup1.open,'Popups are not nested, so popup1 should close');
|
||||
await clickOn(button1);
|
||||
test(t => {
|
||||
// Button1 is the anchor for popup1, and an ancestor of popup2.
|
||||
// Since popup2 is open, but not popup1, button1 should not be
|
||||
// the anchor of any open popup. So popup2 should be closed.
|
||||
assert_false(popup2.open);
|
||||
},'Nested popups (inside anchor elements) do not affect light dismiss');
|
||||
|
||||
done();
|
||||
})();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<meta charset="utf-8" />
|
||||
<title>Popup light dismiss on scroll</title>
|
||||
<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>
|
||||
|
||||
<div id=scroller>
|
||||
Scroll me<br><br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
|
||||
ut labore et dolore magna aliqua. Enim ut sem viverra aliquet eget sit amet tellus. Massa
|
||||
sed elementum tempus egestas sed sed risus pretium. Felis bibendum ut tristique et egestas
|
||||
quis. Tortor dignissim convallis aenean et. Eu mi bibendum neque egestas congue quisque
|
||||
</div>
|
||||
|
||||
<popup id=popup1>This is popup 1<div id=anchor></div></popup>
|
||||
<popup id=popup2 anchor=anchor>This is popup 2</popup>
|
||||
<button onclick='popup1.show();popup2.show();'>Open popups</button>
|
||||
|
||||
<style>
|
||||
#popup1 { top:50px; left: 50px; }
|
||||
#popup2 { top:150px; left: 50px; }
|
||||
#scroller {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
overflow-y: scroll;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
async_test(t => {
|
||||
popup1.addEventListener('hide',e => {
|
||||
assert_false(popup2.open);
|
||||
t.done();
|
||||
})
|
||||
assert_false(popup1.open);
|
||||
assert_false(popup2.open);
|
||||
popup1.show();
|
||||
popup2.show();
|
||||
assert_true(popup1.open);
|
||||
assert_true(popup2.open);
|
||||
scroller.scrollTo(0, 100);
|
||||
},'Scrolling light-dismisses all popups');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>Popup light dismiss behavior</title>
|
||||
<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 src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-actions.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<button id=b1 onclick='p1.show()'>Popup 1</button>
|
||||
<span id=outside>Outside all popups</span>
|
||||
<popup id=p1 anchor=b1>
|
||||
<span id=inside1>Inside popup 1</span>
|
||||
<button id=b2 onclick='p2.show()'>Popup 2</button>
|
||||
</popup>
|
||||
<popup id=p2 anchor=b2>
|
||||
<span id=inside2>Inside popup 2</span>
|
||||
</popup>
|
||||
|
||||
<style>
|
||||
#p1 { top:50px; }
|
||||
#p2 { top:50px; left:250px; }
|
||||
popup { border: 5px solid red; }
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
function clickOn(element) {
|
||||
const actions = new test_driver.Actions();
|
||||
return actions.pointerMove(0, 0, {origin: element})
|
||||
.pointerDown({button: actions.ButtonType.LEFT})
|
||||
.pointerUp({button: actions.ButtonType.LEFT})
|
||||
.send();
|
||||
}
|
||||
|
||||
const popup1 = document.querySelector('#p1');
|
||||
const button1 = document.querySelector('#b1');
|
||||
const popup2 = document.querySelector('#p2');
|
||||
const outside = document.querySelector('#outside');
|
||||
const inside1 = document.querySelector('#inside1');
|
||||
const inside2 = document.querySelector('#inside2');
|
||||
|
||||
(async function() {
|
||||
setup({ explicit_done: true });
|
||||
|
||||
let popup1HideCount = 0;
|
||||
popup1.addEventListener('hide',(e) => {
|
||||
++popup1HideCount;
|
||||
e.preventDefault(); // 'hide' should not be cancellable.
|
||||
});
|
||||
let popup2HideCount = 0;
|
||||
popup2.addEventListener('hide',(e) => {
|
||||
++popup2HideCount;
|
||||
e.preventDefault(); // 'hide' should not be cancellable.
|
||||
});
|
||||
|
||||
assert_false(popup1.open);
|
||||
popup1.show();
|
||||
let p1HideCount = popup1HideCount;
|
||||
assert_true(popup1.open);
|
||||
await clickOn(outside);
|
||||
test(t => {
|
||||
assert_false(popup1.open);
|
||||
assert_equals(popup1HideCount,p1HideCount+1);
|
||||
},'Clicking outside a popup will dismiss the popup');
|
||||
|
||||
assert_false(popup1.open);
|
||||
popup1.show();
|
||||
p1HideCount = popup1HideCount;
|
||||
await clickOn(inside1);
|
||||
test(t => {
|
||||
assert_true(popup1.open);
|
||||
assert_equals(popup1HideCount,p1HideCount);
|
||||
},'Clicking inside a popup does not close that popup');
|
||||
|
||||
popup2.show();
|
||||
p1HideCount = popup1HideCount;
|
||||
let p2HideCount = popup2HideCount;
|
||||
await clickOn(inside2);
|
||||
test(t => {
|
||||
assert_true(popup1.open);
|
||||
assert_true(popup2.open);
|
||||
assert_equals(popup1HideCount,p1HideCount,'popup1');
|
||||
assert_equals(popup2HideCount,p2HideCount,'popup2');
|
||||
},'Clicking inside a child popup shouldn\'t close either popup');
|
||||
|
||||
popup2.show();
|
||||
p1HideCount = popup1HideCount;
|
||||
p2HideCount = popup2HideCount;
|
||||
await clickOn(inside1);
|
||||
test(t => {
|
||||
assert_true(popup1.open);
|
||||
assert_equals(popup1HideCount,p1HideCount);
|
||||
assert_false(popup2.open);
|
||||
assert_equals(popup2HideCount,p2HideCount+1);
|
||||
},'Clicking inside a parent popup should close child popup');
|
||||
|
||||
p1HideCount = popup1HideCount;
|
||||
await clickOn(button1);
|
||||
test(t => {
|
||||
assert_true(popup1.open);
|
||||
assert_equals(popup1HideCount,p1HideCount);
|
||||
},'Clicking on anchor element shouldn\'t close its popup');
|
||||
|
||||
done();
|
||||
})();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel=author title="Mason Freed" href="mailto:masonfreed@chromium.org">
|
||||
|
||||
<popup id=p1>This is popup 1<div id=anchor2></div></popup>
|
||||
<popup id=p2 anchor=anchor2>This is popup 2<div id=anchor3></div></popup>
|
||||
<popup id=p3 anchor=anchor3>This is popup 3</popup>
|
||||
|
||||
<style>
|
||||
popup#p2 {
|
||||
top: 100px;
|
||||
}
|
||||
popup#p3 {
|
||||
top:200px;
|
||||
}
|
||||
popup {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
border: 1px solid;
|
||||
padding: 1em;
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.querySelector('#p1').show();
|
||||
document.querySelector('#p2').show();
|
||||
document.querySelector('#p3').show();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!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-open-overflow-display-ref.tentative.html">
|
||||
|
||||
<div id=container>
|
||||
<popup id=p1>This is popup 1<div id=anchor2></div></popup>
|
||||
<popup id=p2 anchor=anchor2>This is popup 2<div id=anchor3></div></popup>
|
||||
<popup id=p3 anchor=anchor3>This is popup 3</popup>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#container {
|
||||
overflow:hidden;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 50px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
popup#p2 {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
}
|
||||
popup#p3 {
|
||||
position: relative;
|
||||
top:200px;
|
||||
}
|
||||
popup {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
border: 1px solid;
|
||||
padding: 1em;
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.querySelector('#p1').show();
|
||||
document.querySelector('#p2').show();
|
||||
document.querySelector('#p3').show();
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue