зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1744355 [wpt PR 31887] - Port chrome-only dialog tests to WPT part 3, a=testonly
Automatic update from web-platform-tests Port chrome-only dialog tests to WPT part 3 Bug: 1240798 Change-Id: Id1e38606a8ec0b59fa5172baa7649d31979267f5 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3315600 Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#949223} -- wpt-commits: 96a05d37bd706aec4fe5f089da81b908fcfb08f8 wpt-pr: 31887
This commit is contained in:
Joey Arhar
moz-wptsync-bot
Родитель
55baec5684
Коммит
5de463ad90
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=author href="mailto:falken@chromium.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
|
||||
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=241699">
|
||||
<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>
|
||||
|
||||
<p>
|
||||
To test manually, click on all the "Click me"s.
|
||||
The test fails if you see red.
|
||||
</p>
|
||||
|
||||
<style>
|
||||
dialog {
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<a id="a" href="javascript:void(0)">Click me</a>
|
||||
<button id="button">Click me</button>
|
||||
<div id="div" style="background-color: blue; width: 50px; height: 50px">Click meeee</div>
|
||||
<span id="span">Click me</span>
|
||||
<div id="dialog-parent" style="width: 50px; height: 50px">
|
||||
<span id="dialog-sibling">Click meeee</span>
|
||||
<dialog></dialog>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
promise_test(async () => {
|
||||
async function clickOn(element) {
|
||||
let absoluteTop = 0;
|
||||
let absoluteLeft = 0;
|
||||
for (let parentNode = element; parentNode; parentNode = parentNode.offsetParent) {
|
||||
absoluteLeft += parentNode.offsetLeft;
|
||||
absoluteTop += parentNode.offsetTop;
|
||||
}
|
||||
|
||||
const x = absoluteLeft + element.offsetWidth / 2;
|
||||
const y = absoluteTop + element.offsetHeight / 2;
|
||||
const actions = new test_driver.Actions()
|
||||
.pointerMove(x, y)
|
||||
.pointerDown()
|
||||
.pointerUp()
|
||||
.pointerMove(0, 0);
|
||||
await actions.send();
|
||||
}
|
||||
|
||||
function eventFiredOnInertElement(e) {
|
||||
e.target.style.background = 'red';
|
||||
inertElementFiredOn = true;
|
||||
}
|
||||
|
||||
inertElements = ['a', 'button', 'div', 'span']
|
||||
inertElements.forEach(function(id) {
|
||||
element = document.getElementById(id);
|
||||
element.addEventListener('click', eventFiredOnInertElement);
|
||||
element.addEventListener('mousemove', eventFiredOnInertElement);
|
||||
});
|
||||
|
||||
document.addEventListener('click', function(e) {
|
||||
document.firedOn = true;
|
||||
});
|
||||
|
||||
document.getElementById('dialog-parent').addEventListener('click', function(e) {
|
||||
e.target.firedOn = true;
|
||||
});
|
||||
|
||||
document.querySelector('dialog').showModal();
|
||||
for (const id of inertElements) {
|
||||
expectedTarget = document;
|
||||
if (id == 'dialog-sibling')
|
||||
expectedTarget = document.getElementById('dialog-parent')
|
||||
element = document.getElementById(id);
|
||||
inertElementFiredOn = false;
|
||||
expectedTarget.firedOn = false;
|
||||
await clickOn(element);
|
||||
assert_false(inertElementFiredOn, 'clicking on ' + id);
|
||||
assert_true(expectedTarget.firedOn, 'clicking on ' + id);
|
||||
}
|
||||
}, 'Tests that inert inlines do not receive mouse events.');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=author href="mailto:falken@chromium.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
|
||||
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=242848">
|
||||
<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>
|
||||
|
||||
<label for="submit">Label for Submit</label>
|
||||
<dialog>
|
||||
<input id="text" type="text">
|
||||
<input id="submit" type="submit">
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
promise_test(async () => {
|
||||
async function clickOn(element) {
|
||||
let absoluteTop = 0;
|
||||
let absoluteLeft = 0;
|
||||
for (let parentNode = element; parentNode; parentNode = parentNode.offsetParent) {
|
||||
absoluteLeft += parentNode.offsetLeft;
|
||||
absoluteTop += parentNode.offsetTop;
|
||||
}
|
||||
|
||||
const x = absoluteLeft + element.offsetWidth / 2;
|
||||
const y = absoluteTop + element.offsetHeight / 2;
|
||||
const actions = new test_driver.Actions()
|
||||
.pointerMove(x, y)
|
||||
.pointerDown()
|
||||
.pointerUp()
|
||||
.pointerMove(0, 0);
|
||||
await actions.send();
|
||||
}
|
||||
|
||||
document.querySelector('dialog').showModal();
|
||||
document.querySelector('#text').focus();
|
||||
|
||||
label = document.querySelector('label');
|
||||
label.focus();
|
||||
assert_equals(document.activeElement, document.querySelector('#submit'),
|
||||
'label.focus() should send focus to the target.');
|
||||
|
||||
await clickOn(label);
|
||||
assert_equals(document.activeElement, document.body,
|
||||
'Clicking the label should be the same as clicking the document body.');
|
||||
}, 'Tests focusing of an inert label for a non-inert target.');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=author href="mailto:falken@chromium.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
|
||||
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=252071">
|
||||
<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>
|
||||
|
||||
<span id="not-editable" contenteditable>I'm not editable while the dialog is showing.</span>
|
||||
<dialog>
|
||||
<span id="editable" contenteditable>I'm editable.</span>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
promise_test(async () => {
|
||||
async function clickOn(element) {
|
||||
let absoluteTop = 0;
|
||||
let absoluteLeft = 0;
|
||||
for (let parentNode = element; parentNode; parentNode = parentNode.offsetParent) {
|
||||
absoluteLeft += parentNode.offsetLeft;
|
||||
absoluteTop += parentNode.offsetTop;
|
||||
}
|
||||
|
||||
const x = absoluteLeft + element.offsetWidth / 2;
|
||||
const y = absoluteTop + element.offsetHeight / 2;
|
||||
const actions = new test_driver.Actions()
|
||||
.pointerMove(x, y)
|
||||
.pointerDown()
|
||||
.pointerUp()
|
||||
.pointerMove(0, 0);
|
||||
await actions.send();
|
||||
}
|
||||
|
||||
dialog = document.querySelector('dialog');
|
||||
dialog.showModal();
|
||||
notEditable = document.querySelector('#not-editable');
|
||||
editable = document.querySelector('#editable');
|
||||
|
||||
await clickOn(notEditable);
|
||||
oldValue = notEditable.textContent;
|
||||
await (new test_driver.Actions().keyDown('a').keyUp('a').send());
|
||||
assert_equals(notEditable.textContent, oldValue);
|
||||
|
||||
await clickOn(editable);
|
||||
oldValue = editable.textContent;
|
||||
await (new test_driver.Actions().keyDown('a').keyUp('a').send());
|
||||
assert_not_equals(editable.textContent, oldValue);
|
||||
|
||||
notEditable.remove();
|
||||
editable.remove();
|
||||
}, 'Test that inert nodes cannot be edited. The test passes if the only text you can edit is in the dialog.');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=author href="mailto:falken@chromium.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
|
||||
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=252071">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
Here is a text node you can't select while the dialog is open.
|
||||
<dialog>I'm selectable.</dialog>
|
||||
|
||||
<script>
|
||||
test(() => {
|
||||
const dialog = document.querySelector('dialog');
|
||||
dialog.showModal();
|
||||
document.execCommand('SelectAll');
|
||||
assert_equals(window.getSelection().toString(), "I'm selectable.");
|
||||
}, 'Test that inert nodes cannot be selected. The test passes if the only text you can select is inside the dialog.');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=author href="mailto:falken@chromium.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
|
||||
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=329407">
|
||||
<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>
|
||||
|
||||
<style>
|
||||
#ancestor {
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
top: 200px;
|
||||
left: 100px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
dialog {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="ancestor">
|
||||
<dialog></dialog>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
promise_test(async () => {
|
||||
async function clickOn(element) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const actions = new test_driver.Actions()
|
||||
.pointerMove(rect.left + rect.width / 2, rect.top + rect.height / 2)
|
||||
.pointerDown()
|
||||
.pointerUp();
|
||||
await actions.send();
|
||||
}
|
||||
|
||||
const div = document.querySelector('#ancestor');
|
||||
const dialog = document.querySelector('dialog');
|
||||
dialog.showModal();
|
||||
|
||||
const handledEvent = {};
|
||||
document.addEventListener('click', function(event) {
|
||||
handledEvent['document'] = true;
|
||||
});
|
||||
|
||||
document.body.addEventListener('click', function(event) {
|
||||
handledEvent['body'] = true;
|
||||
// body should get a event only via bubbling.
|
||||
if (event.target != dialog) {
|
||||
assert_unreached('body was targeted for an click event');
|
||||
div.style.backgroundColor = 'red';
|
||||
}
|
||||
});
|
||||
|
||||
div.addEventListener('click', function(event) {
|
||||
handledEvent['div'] = true;
|
||||
// div should get a event only via bubbling.
|
||||
if (event.target != dialog) {
|
||||
assert_unreached('div was targeted for an click event');
|
||||
div.style.backgroundColor = 'red';
|
||||
}
|
||||
});
|
||||
|
||||
dialog.addEventListener('click', function(event) {
|
||||
handledEvent['dialog'] = true;
|
||||
dialog.style.backgroundColor = 'green';
|
||||
if (event.target != dialog) {
|
||||
assert_unreached('dialog was not targeted for a click event');
|
||||
dialog.style.backgroundColor = 'red';
|
||||
}
|
||||
});
|
||||
|
||||
const nodes = [ 'document', 'body', 'div', 'dialog' ];
|
||||
nodes.map(function(node) { handledEvent[node] = false; });
|
||||
await clickOn(div);
|
||||
assert_true(handledEvent.document, 'Clicking on ancestor.');
|
||||
assert_false(handledEvent.body, 'Clicking on ancestor.');
|
||||
assert_false(handledEvent.dialog, 'Clicking on ancestor.');
|
||||
assert_false(handledEvent.div, 'Clicking on ancestor.');
|
||||
handledEvent.document = false;
|
||||
|
||||
await clickOn(dialog);
|
||||
assert_true(handledEvent.document, 'Clicking on dialog.');
|
||||
assert_true(handledEvent.body, 'Clicking on dialog.');
|
||||
assert_true(handledEvent.dialog, 'Clicking on dialog.');
|
||||
assert_true(handledEvent.div, 'Clicking on dialog.');
|
||||
}, 'Test that ancestors of modal dialog are inert.');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=author href="mailto:falken@chromium.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
|
||||
<link rel=help href="https://bugs.webkit.org/show_bug.cgi?id=110952">
|
||||
<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>
|
||||
|
||||
<p>
|
||||
To test manually, move the mouse to the blue box, click, and then move the
|
||||
mouse outside. Then repeat for the red box. The test succeeds if both boxes
|
||||
turn green
|
||||
</p>
|
||||
|
||||
<style>
|
||||
#inert-div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
dialog {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#dialog-div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="inert-div"></div>
|
||||
<dialog id="dialog">
|
||||
<div id="dialog-div"></div>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
promise_test(async () => {
|
||||
async function clickOn(element) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const actions = new test_driver.Actions()
|
||||
.pointerMove(rect.left + rect.width / 2, rect.top + rect.height / 2)
|
||||
.pointerDown()
|
||||
.pointerUp()
|
||||
.pointerMove(0, 0);
|
||||
await actions.send();
|
||||
}
|
||||
|
||||
dialog.showModal();
|
||||
|
||||
inertDivHandledEvent = false;
|
||||
inertDiv = document.getElementById('inert-div');
|
||||
eventFiredOnInertNode = function(event) {
|
||||
inertDivHandledEvent = true;
|
||||
inertDiv.style.backgroundColor = 'red';
|
||||
};
|
||||
|
||||
events = ['mousedown', 'mouseup', 'click', 'mousemove', 'mouseover', 'mouseout'];
|
||||
dialogDiv = document.getElementById('dialog-div');
|
||||
handledEvents = {};
|
||||
handledEvents.dialogDiv = {};
|
||||
eventFiredOnDialog = function(event) {
|
||||
handledEvents.dialogDiv[event.type] = true;
|
||||
if (Object.keys(handledEvents.dialogDiv).length == events.length)
|
||||
dialogDiv.style.backgroundColor = 'green';
|
||||
};
|
||||
|
||||
handledEvents.document = {};
|
||||
expectedEventCountForDocument = events.length - 1; // document won't get 'mouseout'
|
||||
eventFiredOnDocument = function(event) {
|
||||
handledEvents.document[event.type] = true;
|
||||
if (Object.keys(handledEvents.document).length == document.expectedEventCount && !inertDivHandledEvent) {
|
||||
inertDiv.style.backgroundColor = 'green';
|
||||
}
|
||||
};
|
||||
|
||||
for (let i = 0; i < events.length; ++i) {
|
||||
inertDiv.addEventListener(events[i], eventFiredOnInertNode);
|
||||
dialogDiv.addEventListener(events[i], eventFiredOnDialog);
|
||||
document.addEventListener(events[i], eventFiredOnDocument);
|
||||
}
|
||||
|
||||
await clickOn(inertDiv);
|
||||
assert_false(inertDivHandledEvent, 'Clicking on inert box');
|
||||
assert_equals(Object.keys(handledEvents.document).length, expectedEventCountForDocument, 'Clicking on inert box');
|
||||
|
||||
await clickOn(dialogDiv);
|
||||
assert_false(inertDivHandledEvent, 'Clicking on non-inert box');
|
||||
assert_equals(Object.keys(handledEvents.dialogDiv).length, events.length, 'Clicking on non-inert box');
|
||||
}, 'Ensure that mouse events are not dispatched to an inert node.');
|
||||
</script>
|
||||
Загрузка…
Ссылка в новой задаче