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

Update web-platform-tests to revision b'd1192ca239e944dc6cdbcd079e1c16227e08e30c'

Browse source
This commit is contained in:
WPT Sync Bot 2023-02-02 01:51:40 +00:00
parent 69b272b4e1
commit ec63c43030
233 changed files with 5065 additions and 1252 deletions
Download patch file Download diff file Expand all files Collapse all files

1
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html
View file

@ -6,6 +6,7 @@ dialog {
padding: 0px;
border: none;
margin: 0px;
outline: none;
}
#bottom::backdrop {

58
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/child-sequential-focus.html Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://github.com/whatwg/html/pull/8199">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<dialog autofocus id=autofocusdialog data-description="dialog element with autofocus should get initial focus.">
<button>focusable button</button>
<button autofocus class=target>autofocusable button</button>
</dialog>
<dialog id=keyboardfocusdialog data-description="Only keyboard-focusable elements should get dialog initial focus.">
<button tabindex="-1">mouse focusable button</button>
<button class=target>keyboard focusable button</button>
</dialog>
<dialog id=autofocuswithoutkeyboarddialog data-description="Autofocus takes precedence over keyboard-focusable requirement.">
<button>keyboard focusable button</button>
<button tabindex="-1" autofocus class=target>mouse focusable autofocus button</button>
</dialog>
<dialog id=subtree data-description="Only keyboard-focusable elements should get dialog initial focus including in subtrees.">
<div>
<button tabindex="-1">mouse focusable button</button>
<button class=target>keyboard focusable button</button>
</div>
</dialog>
<dialog id=nestedbuttons data-description="Only keyboard-focusable elements should get dialog initial focus including in nested buttons.">
<button tabindex="-1">
<span>mouse focusable button</span>
<button tabindex="-1">nested mouse focusable button</button>
</button>
<button class=target>keyboard focusable button</button>
</dialog>
<script>
document.querySelectorAll('dialog').forEach(dialog => {
test(t => {
const target = dialog.querySelector('.target');
t.add_cleanup
t.add_cleanup(() => {
if (dialog.open)
dialog.close();
});
dialog.showModal();
assert_equals(document.activeElement,
dialog.hasAttribute('autofocus') ? dialog : target,
'showModal: the target element did not receive initial focus.');
dialog.close();
dialog.show();
assert_equals(document.activeElement, target, 'show: the target element did not receive initial focus.');
dialog.close();
}, dialog.dataset.description);
});
</script>

112
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html
View file

@ -9,21 +9,21 @@
We focus this one between each test, to ensure that for non-modal dialogs,
if there is no focus delegate, it stays focused (instead of causing focus to reset to the body).
-->
<button tabindex="-1" id="focus-between-tests">Focus between tests</button>
<button id="focus-between-tests">Focus between tests</button>
<dialog data-description="No autofocus, no delegatesFocus, no siblings">
<template class="turn-into-shadow-tree">
<button disabled>Non-focusable</button>
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="No autofocus, no delegatesFocus, sibling before">
<button tabindex="-1" class="focus-me">Focusable</button>
<button class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree">
<button disabled>Non-focusable</button>
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
@ -31,25 +31,25 @@
<dialog data-description="No autofocus, no delegatesFocus, sibling after">
<template class="turn-into-shadow-tree">
<button disabled>Non-focusable</button>
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
<button tabindex="-1" class="focus-me">Focusable</button>
<button class="focus-me">Focusable</button>
</dialog>
<dialog data-description="No autofocus, yes delegatesFocus, no siblings">
<template class="turn-into-shadow-tree delegates-focus">
<button disabled>Non-focusable</button>
<button tabindex="-1" class="focus-me">Focusable</button>
<button class="focus-me">Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="No autofocus, yes delegatesFocus, sibling before">
<button tabindex="-1" class="focus-me">Focusable</button>
<button class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree delegates-focus">
<button disabled>Non-focusable</button>
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
@ -57,26 +57,26 @@
<dialog data-description="No autofocus, yes delegatesFocus, sibling after">
<template class="turn-into-shadow-tree delegates-focus">
<button disabled>Non-focusable</button>
<button tabindex="-1" class="focus-me">Focusable</button>
<button class="focus-me">Focusable</button>
<button disabled>Non-focusable</button>
</template>
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
</dialog>
<dialog data-description="Autofocus before, no delegatesFocus">
<button tabindex="-1" autofocus class="focus-me">Focusable</button>
<button autofocus class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree">
<button disabled>Non-focusable</button>
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="Autofocus before, yes delegatesFocus">
<button tabindex="-1" autofocus class="focus-me">Focusable</button>
<button autofocus class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree delegates-focus">
<button disabled>Non-focusable</button>
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
@ -84,34 +84,34 @@
<dialog data-description="Autofocus after, no delegatesFocus">
<template class="turn-into-shadow-tree">
<button disabled>Non-focusable</button>
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
<button tabindex="-1" autofocus class="focus-me">Focusable</button>
<button autofocus class="focus-me">Focusable</button>
</dialog>
<dialog data-description="Autofocus after, yes delegatesFocus">
<template class="turn-into-shadow-tree delegates-focus">
<button disabled>Non-focusable</button>
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
<button tabindex="-1" autofocus class="focus-me">Focusable</button>
<button autofocus class="focus-me">Focusable</button>
</dialog>
<dialog data-description="Autofocus on shadow host, yes delegatesFocus, no siblings">
<template class="turn-into-shadow-tree delegates-focus autofocus">
<button disabled>Non-focusable</button>
<button tabindex="-1" class="focus-me">Focusable</button>
<button class="focus-me">Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="Autofocus on shadow host, yes delegatesFocus, sibling before">
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
<template class="turn-into-shadow-tree delegates-focus autofocus">
<button disabled>Non-focusable</button>
<button tabindex="-1" class="focus-me">Focusable</button>
<button class="focus-me">Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
@ -119,25 +119,25 @@
<dialog data-description="Autofocus on shadow host, yes delegatesFocus, sibling after">
<template class="turn-into-shadow-tree delegates-focus autofocus">
<button disabled>Non-focusable</button>
<button tabindex="-1" class="focus-me">Focusable</button>
<button class="focus-me">Focusable</button>
<button disabled>Non-focusable</button>
</template>
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
</dialog>
<dialog data-description="Autofocus on shadow host, no delegatesFocus, no siblings">
<template class="turn-into-shadow-tree autofocus">
<button disabled>Non-focusable</button>
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="Autofocus on shadow host, no delegatesFocus, sibling before">
<button tabindex="-1" class="focus-me">Focusable</button>
<button class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree autofocus">
<button disabled>Non-focusable</button>
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
@ -145,91 +145,91 @@
<dialog data-description="Autofocus on shadow host, no delegatesFocus, sibling after">
<template class="turn-into-shadow-tree autofocus">
<button disabled>Non-focusable</button>
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
<button tabindex="-1" class="focus-me">Focusable</button>
<button class="focus-me">Focusable</button>
</dialog>
<dialog data-description="Autofocus inside shadow tree, yes delegatesFocus, no siblings">
<template class="turn-into-shadow-tree delegates-focus">
<button tabindex="-1">Focusable</button>
<button tabindex="-1" autofocus class="focus-me">Focusable</button>
<button>Focusable</button>
<button autofocus class="focus-me">Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="Autofocus inside shadow tree, yes delegatesFocus, sibling before">
<button tabindex="-1" class="focus-me">Focusable</button>
<button class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree delegates-focus">
<button tabindex="-1">Focusable</button>
<button tabindex="-1" autofocus>Focusable</button>
<button>Focusable</button>
<button autofocus>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="Autofocus inside shadow tree, yes delegatesFocus, sibling after">
<template class="turn-into-shadow-tree delegates-focus">
<button tabindex="-1">Focusable</button>
<button tabindex="-1" autofocus class="focus-me">Focusable</button>
<button>Focusable</button>
<button autofocus class="focus-me">Focusable</button>
<button disabled>Non-focusable</button>
</template>
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
</dialog>
<dialog data-description="Autofocus inside shadow tree, no delegatesFocus, no siblings">
<template class="turn-into-shadow-tree">
<button tabindex="-1">Focusable</button>
<button tabindex="-1" autofocus>Focusable</button>
<button>Focusable</button>
<button autofocus>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="Autofocus inside shadow tree, no delegatesFocus, sibling before">
<button tabindex="-1" class="focus-me">Focusable</button>
<button class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree">
<button tabindex="-1">Focusable</button>
<button tabindex="-1" autofocus>Focusable</button>
<button>Focusable</button>
<button autofocus>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="Autofocus inside shadow tree, no delegatesFocus, sibling after">
<template class="turn-into-shadow-tree">
<button tabindex="-1">Focusable</button>
<button tabindex="-1" autofocus>Focusable</button>
<button>Focusable</button>
<button autofocus>Focusable</button>
<button disabled>Non-focusable</button>
</template>
<button tabindex="-1" class="focus-me">Focusable</button>
<button class="focus-me">Focusable</button>
</dialog>
<dialog data-description="Two shadow trees, both delegatesFocus, first tree doesn't have autofocus element, second does">
<template class="turn-into-shadow-tree delegates-focus">
<button disabled>Non-focusable</button>
<button tabindex="-1" class="focus-me">Focusable</button>
<button class="focus-me">Focusable</button>
<button disabled>Non-focusable</button>
</template>
<template class="turn-into-shadow-tree delegates-focus">
<button tabindex="-1" autofocus>Focusable</button>
<button autofocus>Focusable</button>
</template>
</dialog>
<dialog data-description="No autofocus, no delegatesFocus, slotted target">
<template class="turn-into-shadow-tree">
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
<slot></slot>
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
</template>
<button tabindex="-1" class="focus-me">Focusable</button>
<button class="focus-me">Focusable</button>
</dialog>
<dialog data-description="Shadowroot on child, no autofocus, no delegatesFocus">
<div>
<template class="turn-into-shadow-tree">
<button tabindex="-1">Focusable</button>
<button>Focusable</button>
</template>
</div>
<button tabindex="-1" class="focus-me">Focusable</button>
<button class="focus-me">Focusable</button>
</dialog>
<script>
@ -264,12 +264,8 @@ for (const dialog of document.querySelectorAll("dialog")) {
assert_equals(document.activeElement, shadowHost);
assert_equals(shadowHost.shadowRoot.activeElement, expectedFocusInsideShadowTree);
} else {
// There is no focus delegate. Expected result depends on show() vs. showModal().
if (method === "show") {
assert_equals(document.activeElement, focusBetweenTests);
} else {
assert_equals(document.activeElement, document.body);
}
// There is no focus delegate. The dialog element should be focused.
assert_equals(document.activeElement, dialog);
}
}
}, `${method}: ${dialog.dataset.description}`);

2
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-prevent-autofocus.html
View file

@ -14,7 +14,7 @@ promise_test(async () => {
input.autofocus = true;
document.body.insertBefore(input, dialog);
await waitUntilStableAutofocusState();
assert_equals(document.activeElement, document.body,
assert_not_equals(document.activeElement, input,
'Non-dialog autofocus processing should be skipped.');
}, 'After showing a dialog, non-dialog autofocus processing won\'t work.');
</script>

2
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal.html
View file

@ -116,7 +116,7 @@
d6.showModal();
this.add_cleanup(function() { d6.close(); });
assert_true(d6.open);
assert_equals(document.activeElement, document.body);
assert_equals(document.activeElement, d6);
}, "opening dialog without focusable children");
test(function(){

3
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer-ref.html
View file

@ -1,5 +1,8 @@
<!doctype html>
<style>
dialog {
outline: none;
}
#non-modal {
position: static;
}

3
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer.html
View file

@ -5,6 +5,9 @@
dialog {
position: static;
}
#modal {
outline: none;
}
</style>
<p>Test that a non-top layer element doesn't share style with a top layer
element. The test passes if you see two boxes.</p>

1
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/element-removed-from-top-layer-has-original-position.html
View file

@ -14,6 +14,7 @@
border: none;
padding: 0;
margin: 0;
outline: none;
}
</style>
</head>

3
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-contain-ancestor.html
View file

@ -8,6 +8,9 @@
::backdrop {
display: none;
}
#dialog {
outline: none;
}
</style>
</head>
<body>

3
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-fo-ancestor.html
View file

@ -8,6 +8,9 @@
::backdrop {
display: none;
}
#dialog {
outline: none;
}
</style>
</head>
<body>

3
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-transformed-ancestor.html
View file

@ -8,6 +8,9 @@
::backdrop {
display: none;
}
#dialog {
outline: none;
}
</style>
</head>
<body>

3
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-will-change-ancestor.html
View file

@ -8,6 +8,9 @@
::backdrop {
display: none;
}
#dialog {
outline: none;
}
</style>
</head>
<body>

9
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/inert-label-focus.html
View file

@ -39,12 +39,15 @@ promise_test(async () => {
document.querySelector('#text').focus();
label = document.querySelector('label');
submit = document.querySelector('#submit');
label.focus();
assert_equals(document.activeElement, document.querySelector('#submit'),
assert_equals(document.activeElement, 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.');
assert_not_equals(document.activeElement, label,
'Clicking the label should not focus the label.');
assert_not_equals(document.activeElement, submit,
'Clicking the label should not focus the submit input.');
}, 'Tests focusing of an inert label for a non-inert target.');
</script>

5
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html
View file

@ -7,6 +7,11 @@
<script src="/resources/testharnessreport.js"></script>
</head>
<body id="body" tabindex="1">
<style>
dialog {
outline: none;
}
</style>
<dialog id="top-dialog" tabindex="1" style="width: 100px; top: 30px"><button id="top-dialog-button">I get focus</button></dialog>
<dialog id="bottom-dialog" tabindex="-1" style="width: 100px; bottom: 30px"><button id="bottom-dialog-button">I don't get focus.</button></dialog>
<div id="container">

1
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop.html
View file

@ -7,6 +7,7 @@ dialog {
height: 100px;
width: 100px;
background: green;
outline: none;
}
</style>
<body>

1
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-generated-content.html
View file

@ -11,6 +11,7 @@ dialog {
height: 100px;
width: 100px;
background: green;
outline: none;
}
dialog::before {

4
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps.html
View file

@ -10,10 +10,10 @@ promise_test(() => {
outerButton = document.getElementById('outer-button');
assert_equals(document.activeElement, outerButton);
// Test that focus goes to body if the dialog has no focusable elements, including itself
// Test that focus goes to the dialog if the dialog has no focusable elements
var outerDialog = document.getElementById('outer-dialog');
outerDialog.showModal();
assert_equals(document.activeElement, document.body);
assert_equals(document.activeElement, outerDialog);
// Test that an autofocus element in the dialog gets focus.
var dialog = document.getElementById('dialog');

2
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-containing-block.html
View file

@ -14,7 +14,7 @@
This tests that a modal dialog's containing block is in the initial containing block and that it is unaffected by
ancestor elements with overflow or opacity.
<div style="position: absolute; top: 400px; opacity: 0.3">
<dialog id="opaqueDialog" style="position: absolute; top: 250px; left: 0px; background-color: magenta">
<dialog id="opaqueDialog" style="position: absolute; top: 250px; left: 0px; background-color: magenta; outline: none">
This dialog should be unaffected by its ancestor with opacity.
</dialog>
</div>

1
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-display-none.html
View file

@ -7,6 +7,7 @@
dialog {
height: 150px;
width: 150px;
outline: none;
}
::backdrop {

1
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting.html
View file

@ -7,6 +7,7 @@
dialog {
height: 150px;
width: 150px;
outline: none;
}
::backdrop {

1
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-clip.html
View file

@ -15,6 +15,7 @@ body { background: red; }
dialog::backdrop,
dialog {
background: green;
outline: none;
}
</style>
<body>

1
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-filter.html
View file

@ -16,6 +16,7 @@ dialog::backdrop,
dialog {
background: green;
position: absolute;
outline: none;
}
</style>
<body>

1
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-mask.html
View file

@ -16,6 +16,7 @@ body { background: red; }
dialog::backdrop,
dialog {
background: green;
outline: none;
}
</style>
<body>

1
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-opacity.html
View file

@ -16,6 +16,7 @@ body { background: red; }
dialog::backdrop,
dialog {
background: green;
outline: none;
}
</style>
<body>

1
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-clip.html
View file

@ -21,6 +21,7 @@ dialog::backdrop,
dialog {
background: green;
position: absolute;
outline: none;
}
</style>
<body>

1
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-hidden.html
View file

@ -20,6 +20,7 @@ body { background: red; }
dialog::backdrop,
dialog {
background: green;
outline: none;
}
</style>
<body>

1
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-scroll.html
View file

@ -21,6 +21,7 @@ dialog::backdrop,
dialog {
background: green;
position: absolute;
outline: none;
}
</style>
<body>

1
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-transform.html
View file

@ -15,6 +15,7 @@ body { background: red; }
dialog::backdrop,
dialog {
background: green;
outline: none;
}
</style>
<body>

1
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd.html
View file

@ -8,6 +8,7 @@
dialog {
height: 100px;
width: 100px;
outline: none;
}
::backdrop {

1
tests/wpt/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-dynamic.html
View file

@ -8,6 +8,7 @@
dialog {
height: 150px;
width: 150px;
outline: none;
}
::backdrop {