mirror of
https://github.com/servo/servo.git
synced 2025-08-06 06:00:15 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
WPT Sync Bot
cybai
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
|
|
@ -40,11 +40,6 @@ dialog {
|
|||
<script>
|
||||
"use strict";
|
||||
|
||||
function checkNotVerticallyCentered(dialog) {
|
||||
var centeredTop = (document.documentElement.clientHeight - dialog.offsetHeight) / 2;
|
||||
assert_not_equals(dialog.getBoundingClientRect().top, centeredTop);
|
||||
}
|
||||
|
||||
function checkVerticallyCentered(dialog) {
|
||||
var centeredTop = (document.documentElement.clientHeight - dialog.offsetHeight) / 2;
|
||||
// Using approx equals because getBoundingClientRect() and centeredTop
|
||||
|
|
@ -155,8 +150,8 @@ test(function() {
|
|||
dialog.remove();
|
||||
|
||||
relativeContainer.appendChild(dialog);
|
||||
checkVerticallyCentered(dialog);
|
||||
}, "Dialog should still be centered when removed, and re-added to the document.");
|
||||
assert_equals(relativeContainer.getBoundingClientRect().top, dialog.getBoundingClientRect().top);
|
||||
}, "Dialog should not still be centered when removed, and re-added to the document.");
|
||||
|
||||
test(function() {
|
||||
this.add_cleanup(reset);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.backdrop {
|
||||
position: absolute;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
Test ::backdrop used in descendant selectors. The test passes if there are two green boxes and no red.
|
||||
<div class="backdrop" style="top: 100px; left: 100px"></div>
|
||||
<div class="backdrop" style="top: 100px; left: 300px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="match" href="backdrop-descendant-selector-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<style>
|
||||
dialog {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
position: absolute;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
/* This shouldn't be matched, dialog is not the parent of ::backdrop.
|
||||
* It is given high specificity so we actually test something.
|
||||
*/
|
||||
#dialog-parent > #dialog > ::backdrop,
|
||||
#dialog-parent > #dialog ::backdrop {
|
||||
background: red;
|
||||
}
|
||||
|
||||
#dialog-parent > ::backdrop {
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
#backdrop-ancestor ::backdrop {
|
||||
top: 100px;
|
||||
left: 300px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
Test ::backdrop used in descendant selectors. The test passes if there are two green boxes and no red.
|
||||
|
||||
<div id="dialog-parent">
|
||||
<dialog id="dialog"></dialog>
|
||||
</div>
|
||||
<div id="backdrop-ancestor">
|
||||
<p><span><dialog></dialog></span></p>
|
||||
</div>
|
||||
<script>
|
||||
var dialogs = document.querySelectorAll('dialog');
|
||||
for (var i = 0; i < dialogs.length; ++i)
|
||||
dialogs[i].showModal();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
#backdrop {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
Test that ::backdrop does not inherit from anything. The test passes if there is
|
||||
a green box and no red.
|
||||
<div id="backdrop"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="backdrop-does-not-inherit-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<style>
|
||||
dialog {
|
||||
visibility: inherit;
|
||||
background: red;
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
visibility: inherit;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
Test that ::backdrop does not inherit from anything. The test passes if there is
|
||||
a green box and no red.
|
||||
<div style="visibility: hidden">
|
||||
<dialog></dialog>
|
||||
</div>
|
||||
<script>
|
||||
document.querySelector('dialog').showModal();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>Reference: Test that adding display: none; dynamically on ::backdrop makes it disappear</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<p>Test passes if there is no red.</p>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>Test that adding display: none; dynamically on ::backdrop makes it disappear</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<link rel="match" href="backdrop-dynamic-display-none-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<p>Test passes if there is no red.</p>
|
||||
<dialog></dialog>
|
||||
<style>
|
||||
dialog { visibility: hidden; }
|
||||
::backdrop { background-color: red; }
|
||||
.hidden-backdrop::backdrop {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
dialog = document.querySelector("dialog");
|
||||
dialog.showModal();
|
||||
requestAnimationFrame(() => {
|
||||
dialog.classList.add("hidden-backdrop");
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.backdrop {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
Test dynamic changes to ::backdrop style. The test passes if there is a green box below.
|
||||
<div class="backdrop"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="match" href="backdrop-dynamic-style-change-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<style>
|
||||
dialog {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.green::backdrop {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
Test dynamic changes to ::backdrop style. The test passes if there is a green box below.
|
||||
<dialog></dialog>
|
||||
<script>
|
||||
dialog = document.querySelector('dialog');
|
||||
dialog.showModal();
|
||||
dialog.classList.add('green');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
#backdrop {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
Test that position 'static' or 'relative' for ::backdrop computes to 'absolute'.
|
||||
The test passes if there is a single green box.
|
||||
<div id="backdrop"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="backdrop-in-flow-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<style>
|
||||
dialog {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
height: 100px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
#left::backdrop {
|
||||
position: static;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
#right::backdrop {
|
||||
position: relative;
|
||||
background: green;
|
||||
top: 100px;
|
||||
left: 150px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
Test that position 'static' or 'relative' for ::backdrop computes to 'absolute'.
|
||||
The test passes if there is a single green box.
|
||||
<dialog id="left"></dialog>
|
||||
<dialog id="right"></dialog>
|
||||
</div>
|
||||
<script>
|
||||
document.querySelector('#left').showModal();
|
||||
document.querySelector('#right').showModal();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#bottom-backdrop {
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
background-color: rgb(0, 50, 0);
|
||||
}
|
||||
|
||||
#bottom {
|
||||
top: 125px;
|
||||
left: 125px;
|
||||
height: 250px;
|
||||
width: 250px;
|
||||
background-color: rgb(0, 90, 0);
|
||||
}
|
||||
|
||||
#middle-backdrop {
|
||||
top: 150px;
|
||||
left: 150px;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-color: rgb(0, 130, 0);
|
||||
}
|
||||
|
||||
#middle {
|
||||
top: 175px;
|
||||
left: 175px;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
background-color: rgb(0, 170, 0);
|
||||
}
|
||||
|
||||
#top-backdrop {
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: rgb(0, 210, 0);
|
||||
}
|
||||
|
||||
#top {
|
||||
top: 225px;
|
||||
left: 225px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
Test for dialog::backdrop stacking order. The test passes if there are 6
|
||||
boxes enclosed in each other, becoming increasingly smaller and brighter
|
||||
green.
|
||||
<div id="bottom-backdrop"></div>
|
||||
<div id="bottom"></div>
|
||||
<div id="middle-backdrop"></div>
|
||||
<div id="middle"></div>
|
||||
<div id="top-backdrop"></div>
|
||||
<div id="top"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="backdrop-stacking-order-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<style>
|
||||
dialog {
|
||||
padding: 0px;
|
||||
border: none;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#bottom::backdrop {
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
background-color: rgb(0, 50, 0);
|
||||
z-index: 100; /* z-index has no effect. */
|
||||
}
|
||||
|
||||
#bottom {
|
||||
top: 125px;
|
||||
left: 125px;
|
||||
height: 250px;
|
||||
width: 250px;
|
||||
background-color: rgb(0, 90, 0);
|
||||
}
|
||||
|
||||
#middle::backdrop {
|
||||
top: 150px;
|
||||
left: 150px;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-color: rgb(0, 130, 0);
|
||||
z-index: -100; /* z-index has no effect. */
|
||||
}
|
||||
|
||||
#middle {
|
||||
top: 175px;
|
||||
left: 175px;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
background-color: rgb(0, 170, 0);
|
||||
}
|
||||
|
||||
#top::backdrop {
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: rgb(0, 210, 0);
|
||||
z-index: 0; /* z-index has no effect. */
|
||||
}
|
||||
|
||||
#top {
|
||||
top: 225px;
|
||||
left: 225px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background-color: rgb(0, 255, 0);
|
||||
z-index: -1000; /* z-index has no effect. */
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
Test for dialog::backdrop stacking order. The test passes if there are 6
|
||||
boxes enclosed in each other, becoming increasingly smaller and brighter
|
||||
green.
|
||||
<dialog id="top"></dialog>
|
||||
<dialog id="middle"></dialog>
|
||||
<dialog id="bottom"></dialog>
|
||||
<script>
|
||||
var topDialog = document.getElementById('top');
|
||||
var middleDialog = document.getElementById('middle');
|
||||
var bottomDialog = document.getElementById('bottom');
|
||||
topDialog.showModal();
|
||||
bottomDialog.showModal();
|
||||
topDialog.close(); // Just to shuffle the top layer order around a little.
|
||||
middleDialog.showModal();
|
||||
topDialog.showModal();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -16,11 +16,13 @@
|
|||
padding: 0;
|
||||
max-width: initial;
|
||||
max-height: initial;
|
||||
width: {{GET[dialog-width]}};
|
||||
height: {{GET[dialog-height]}};
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="container">
|
||||
<dialog style="width: 20px; height: 10px;">X</dialog> <!-- sync width and height with centering.html -->
|
||||
<dialog>X</dialog>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<meta charset=utf-8>
|
||||
<title>dialog element: centered alignment</title>
|
||||
<link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#centered-alignment">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#flow-content-3">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
|
|
@ -14,44 +14,56 @@
|
|||
const dialogWidth = 20;
|
||||
const dialogHeight = 10;
|
||||
|
||||
const widthOffset100 = 100 / 2 - dialogWidth / 2;
|
||||
const widthOffset40 = 40 / 2 - dialogWidth / 2;
|
||||
testDialogCentering("horizontal-tb", "", "", "tall viewport", 40, 100);
|
||||
testDialogCentering("horizontal-tb", "", "", "wide viewport", 100, 40);
|
||||
testDialogCentering("horizontal-tb", "", "", "square viewport", 100, 100);
|
||||
testDialogCentering("horizontal-tb", "", "", "dialog and viewport match", dialogWidth, dialogHeight);
|
||||
|
||||
const heightOffset100 = 100 / 2 - dialogHeight / 2;
|
||||
const heightOffset40 = 40 / 2 - dialogHeight / 2;
|
||||
testDialogCentering("vertical-rl", "", "", "tall viewport", 40, 100);
|
||||
testDialogCentering("vertical-lr", "", "", "tall viewport", 40, 100);
|
||||
|
||||
testDialogCentering("horizontal-tb", "", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);
|
||||
testDialogCentering("horizontal-tb", "", "", "wide viewport", 100, 40, widthOffset100, heightOffset40);
|
||||
testDialogCentering("horizontal-tb", "", "", "square viewport", 100, 100, widthOffset100, heightOffset100);
|
||||
testDialogCentering("horizontal-tb", "", "", "dialog and viewport match", dialogWidth, dialogHeight, 0, 0);
|
||||
testDialogCentering("vertical-rl", "", "horizontal-tb", "tall viewport", 40, 100);
|
||||
testDialogCentering("vertical-lr", "", "horizontal-tb", "tall viewport", 40, 100);
|
||||
|
||||
testDialogCentering("vertical-rl", "", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);
|
||||
testDialogCentering("vertical-lr", "", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);
|
||||
testDialogCentering("horizontal-tb", "vertical-rl", "", "tall viewport", 40, 100);
|
||||
testDialogCentering("vertical-rl", "horizontal-tb", "", "tall viewport", 40, 100);
|
||||
|
||||
testDialogCentering("vertical-rl", "", "horizontal-tb", "tall viewport", 40, 100, widthOffset40, heightOffset100);
|
||||
testDialogCentering("vertical-lr", "", "horizontal-tb", "tall viewport", 40, 100, widthOffset40, heightOffset100);
|
||||
testDialogCentering("horizontal-tb", "vertical-rl", "horizontal-tb", "tall viewport", 40, 100);
|
||||
testDialogCentering("vertical-rl", "horizontal-tb", "vertical-rl", "tall viewport", 40, 100);
|
||||
|
||||
testDialogCentering("horizontal-tb", "vertical-rl", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);
|
||||
testDialogCentering("vertical-rl", "horizontal-tb", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);
|
||||
function testDialogCentering(writingMode, containerWritingMode, dialogWritingMode, label, iframeWidth, iframeHeight) {
|
||||
const dialogSizesToTest = [["", ""], [dialogWidth.toString()+'px', dialogHeight.toString()+'px']];
|
||||
for (const dialogSizes of dialogSizesToTest) {
|
||||
const isDefaultSize = dialogSizes[0] == "";
|
||||
// This test doesn't make sense if the dialog sizes are default
|
||||
if (isDefaultSize && label == "dialog and viewport match") {
|
||||
continue;
|
||||
}
|
||||
|
||||
testDialogCentering("horizontal-tb", "vertical-rl", "horizontal-tb", "tall viewport", 40, 100, widthOffset40, heightOffset100);
|
||||
testDialogCentering("vertical-rl", "horizontal-tb", "vertical-rl", "tall viewport", 40, 100, widthOffset40, heightOffset100);
|
||||
async_test(t => {
|
||||
const iframe = document.createElement("iframe");
|
||||
iframe.src = `centering-iframe.sub.html?html-writing-mode=${writingMode}&container-writing-mode=${containerWritingMode}&dialog-writing-mode=${dialogWritingMode}&dialog-width=${dialogSizes[0]}&dialog-height=${dialogSizes[1]}`;
|
||||
iframe.width = iframeWidth;
|
||||
iframe.height = iframeHeight;
|
||||
iframe.onload = t.step_func_done(() => {
|
||||
const dialog = iframe.contentDocument.querySelector("dialog");
|
||||
const dialogRect = dialog.getBoundingClientRect();
|
||||
|
||||
function testDialogCentering(writingMode, containerWritingMode, dialogWritingMode, label, iframeWidth, iframeHeight, leftOffset, topOffset) {
|
||||
async_test(t => {
|
||||
const iframe = document.createElement("iframe");
|
||||
iframe.src = `centering-iframe.sub.html?html-writing-mode=${writingMode}&container-writing-mode=${containerWritingMode}&dialog-writing-mode=${dialogWritingMode}`;
|
||||
iframe.width = iframeWidth;
|
||||
iframe.height = iframeHeight;
|
||||
iframe.onload = t.step_func_done(() => {
|
||||
const dialog = iframe.contentDocument.querySelector("dialog");
|
||||
const dialogRect = dialog.getBoundingClientRect();
|
||||
const expectedLeftOffset = iframeWidth / 2 - dialogRect.width / 2;
|
||||
const expectedTopOffset = Math.max(iframeHeight / 2 - dialogRect.height / 2, 0);
|
||||
|
||||
assert_equals(dialogRect.left, leftOffset, 'left');
|
||||
assert_equals(dialogRect.top, topOffset, 'top');
|
||||
});
|
||||
document.body.appendChild(iframe);
|
||||
}, writingMode + (containerWritingMode ? ` (container ${containerWritingMode})` : "") +
|
||||
(dialogWritingMode ? ` (dialog ${dialogWritingMode})` : "") + `: ${label}`);
|
||||
if (isDefaultSize) {
|
||||
assert_approx_equals(dialogRect.left, expectedLeftOffset, 1/60);
|
||||
assert_approx_equals(dialogRect.top, expectedTopOffset, 1/60);
|
||||
} else {
|
||||
assert_equals(dialogRect.left, expectedLeftOffset);
|
||||
assert_equals(dialogRect.top, expectedTopOffset);
|
||||
}
|
||||
});
|
||||
document.body.appendChild(iframe);
|
||||
}, writingMode + (containerWritingMode ? ` (container ${containerWritingMode})` : "") +
|
||||
(dialogWritingMode ? ` (dialog ${dialogWritingMode})` : "") + `: ${label}` + `, default-sizes: ${isDefaultSize}`);
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://crbug.com/1206122">
|
||||
|
||||
<body onload=dlg.show()>
|
||||
<dialog id="dlg">
|
||||
<audio></audio>
|
||||
<video></video>
|
||||
</dialog>
|
||||
|
||||
This test passes if it does not crash.
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test cancel event is fired when the dialog is closed by user interaction</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=227534">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test cancel event is fired when the dialog is closed by user interaction</p>
|
||||
<dialog>
|
||||
<p>Hello World</p>
|
||||
</dialog>
|
||||
<script>
|
||||
setup({ single_test: true });
|
||||
|
||||
var hasCancelEventFired = false;
|
||||
var hasCloseEventFired = false;
|
||||
|
||||
const dialog = document.querySelector("dialog");
|
||||
|
||||
dialog.addEventListener("cancel", function(event) {
|
||||
assert_true(true, "cancel event is fired");
|
||||
assert_true(event.cancelable, "cancel event should be cancelable");
|
||||
assert_false(hasCancelEventFired, "cancel event should only be fired once");
|
||||
assert_false(hasCloseEventFired, "close event should be fired after cancel event");
|
||||
hasCancelEventFired = true;
|
||||
});
|
||||
|
||||
dialog.addEventListener("close", function() {
|
||||
assert_true(true, "close event is fired");
|
||||
assert_false(hasCloseEventFired, "close event should only be fired once");
|
||||
assert_true(hasCancelEventFired, "cancel event should be fired before close event");
|
||||
hasCloseEventFired = true;
|
||||
done();
|
||||
});
|
||||
|
||||
dialog.showModal();
|
||||
test_driver.send_keys(document.documentElement, "\uE00C"); // ESC key
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test cancel event with preventDefault on cancel event for dialog element</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=227534">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test cancel event with preventDefault on cancel event for dialog element</p>
|
||||
<dialog>
|
||||
<p>Hello World</p>
|
||||
</dialog>
|
||||
<script>
|
||||
setup({ single_test: true });
|
||||
|
||||
var hasCancelEventFired = false;
|
||||
|
||||
const dialog = document.querySelector("dialog");
|
||||
|
||||
const verify = () => {
|
||||
assert_true(hasCancelEventFired, "cancel is fired");
|
||||
done();
|
||||
};
|
||||
|
||||
dialog.addEventListener("cancel", function(event) {
|
||||
hasCancelEventFired = true;
|
||||
event.preventDefault();
|
||||
step_timeout(function() {
|
||||
verify();
|
||||
}, 0)
|
||||
});
|
||||
|
||||
dialog.addEventListener("close", function() {
|
||||
assert_true(false, "close event should not be fired");
|
||||
});
|
||||
|
||||
dialog.showModal();
|
||||
test_driver.send_keys(document.documentElement, "\uE00C"); // ESC key
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test dialog modal is closed by escape key with input focused</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=227534">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test dialog modal is closed by escape key with input focused</p>
|
||||
<dialog id="dialog">
|
||||
<p>Hello World</p>
|
||||
</dialog>
|
||||
|
||||
<dialog id="dialogWithAutofocus">
|
||||
<input autofocus/>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
setup({ single_test: true });
|
||||
|
||||
const triggerEscKey = () => {
|
||||
test_driver.send_keys(document.documentElement, "\uE00C"); // ESC key
|
||||
};
|
||||
|
||||
/* Make sure we still cancel the dialog even if the input element is focused */
|
||||
function runTestCancelWhenInputFocused() {
|
||||
const dialog = document.getElementById("dialogWithAutofocus");
|
||||
const input = document.querySelector("input");
|
||||
|
||||
dialog.addEventListener("close", function() {
|
||||
assert_false(dialog.open, "dialog with input autofocused is closed");
|
||||
done();
|
||||
});
|
||||
dialog.showModal();
|
||||
assert_true(input == document.activeElement, "input element should be focused");
|
||||
|
||||
triggerEscKey();
|
||||
}
|
||||
|
||||
const dialog = document.getElementById("dialog");
|
||||
|
||||
dialog.addEventListener("close", function() {
|
||||
assert_false(dialog.open, "dialog closed");
|
||||
step_timeout(function() {
|
||||
runTestCancelWhenInputFocused();
|
||||
}, 0);
|
||||
});
|
||||
|
||||
dialog.showModal();
|
||||
triggerEscKey();
|
||||
</script>
|
||||
</pre>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test dialog modal is closed by escape key with select focused</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=227534">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test dialog modal is closed by escape key with select focused</p>
|
||||
<dialog id="dialog">
|
||||
<select>
|
||||
<option value="one">one</option>
|
||||
<option value="two">two</option>
|
||||
</select>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
setup({ single_test: true });
|
||||
|
||||
const dialog = document.getElementById("dialog");
|
||||
const select = document.querySelector("select");
|
||||
|
||||
dialog.addEventListener("close", function() {
|
||||
assert_false(dialog.open, "dialog with select is closed");
|
||||
done();
|
||||
});
|
||||
dialog.showModal();
|
||||
assert_true(select == document.activeElement, "select element should be focused");
|
||||
|
||||
test_driver.send_keys(document.documentElement, "\uE00C"); // ESC key
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -69,7 +69,7 @@ promise_test(async () => {
|
|||
assert_false(dialog.open, "dialog should be closed now");
|
||||
assert_not_equals(dialog.returnValue, "", "returnValue shouldn't be empty string");
|
||||
assert_equals(dialog.returnValue, expectedReturnValue, "returnValue should be the offsets of the click");
|
||||
}, "input image button should return the coordianates");
|
||||
}, "input image button should return the coordinates");
|
||||
|
||||
promise_test(async () => {
|
||||
const dialog = document.querySelector('dialog');
|
||||
|
|
@ -99,5 +99,33 @@ promise_test(async () => {
|
|||
assert_equals(dialog.returnValue, "", "dialog's returnValue remains the same");
|
||||
}, "closing the dialog while submitting should stop the submission");
|
||||
|
||||
promise_test(async () => {
|
||||
const dialog = document.querySelector('dialog');
|
||||
dialog.returnValue = undefined;
|
||||
dialog.showModal();
|
||||
|
||||
let submitEvent = false;
|
||||
const dialogForm = document.getElementById('dialogForm');
|
||||
dialogForm.onsubmit = function() {
|
||||
submitEvent = true;
|
||||
assert_false(dialog.open, "dialog should be closed");
|
||||
assert_equals(dialog.returnValue, "", "dialog's returnValue remains the same");
|
||||
};
|
||||
|
||||
const button = document.querySelector('button');
|
||||
button.value = "sushi";
|
||||
button.onclick = function() {
|
||||
dialogForm.submit();
|
||||
assert_false(dialog.open, "dialog should be closed now");
|
||||
// The returnValue should be "" because there is no submitter
|
||||
assert_equals(dialog.returnValue, "", "returnValue shouldn be empty string");
|
||||
};
|
||||
|
||||
button.click();
|
||||
assert_true(submitEvent, "Should have submit event");
|
||||
assert_false(dialog.open, "dialog should be closed");
|
||||
assert_equals(dialog.returnValue, "", "dialog's returnValue remains the same");
|
||||
}, "calling form.submit() in click handler of submit button should start the submission synchronously");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test cancel event with preventDefault on keydown event for dialog element</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=227534">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test cancel event with preventDefault on keydown event for dialog element</p>
|
||||
<dialog>
|
||||
<p>Hello World</p>
|
||||
</dialog>
|
||||
<script>
|
||||
setup({ single_test: true });
|
||||
|
||||
var hasCancelEventFired = false;
|
||||
|
||||
const dialog = document.querySelector("dialog");
|
||||
|
||||
const verify = () => {
|
||||
assert_false(hasCancelEventFired, "cancel should not be fired");
|
||||
assert_true(hasKeydownEventFired, "document level keydown event should be fired");
|
||||
done();
|
||||
};
|
||||
|
||||
dialog.addEventListener("cancel", function(event) {
|
||||
hasCancelEventFired = true;
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", function(event) {
|
||||
hasKeydownEventFired = true;
|
||||
event.preventDefault();
|
||||
step_timeout(function() {
|
||||
verify();
|
||||
}, 0);
|
||||
});
|
||||
dialog.showModal();
|
||||
test_driver.send_keys(document.documentElement, "\uE00C"); // ESC key
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<script>
|
||||
const dialog = document.createElement("dialog");
|
||||
dialog.show();
|
||||
</script>
|
||||
|
|
@ -27,4 +27,17 @@
|
|||
d2.open = false;
|
||||
assert_false(d2.hasAttribute("open"));
|
||||
}, "On setting, the content open attribute must be removed if the IDL open attribute is set to false, and must be present if the IDL open attribute is set to true.");
|
||||
|
||||
async_test(function(t){
|
||||
d2.open = true;
|
||||
assert_true(d2.hasAttribute("open"));
|
||||
d2.onclose = t.unreached_func("close event should not be fired when just setting the open attribute");
|
||||
d2.open = false;
|
||||
assert_false(d2.hasAttribute("open"));
|
||||
|
||||
// close event is async, give it a chance to be fired
|
||||
t.step_timeout(function() {
|
||||
t.done();
|
||||
}, 0);
|
||||
}, "On setting it to false, the close event should not be fired");
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
Test that ::backdrop is not shown for non-open or non-modal dialogs.
|
||||
The test passes if there is no red shown.
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="dialogs-with-no-backdrop-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dialog-element">
|
||||
<style>
|
||||
dialog::backdrop {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
#display-none-backdrop::backdrop {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
Test that ::backdrop is not shown for non-open or non-modal dialogs.
|
||||
The test passes if there is no red shown.
|
||||
<dialog id="never-opened-dialog"></dialog>
|
||||
<dialog id="display-none-dialog" style="display: none"></dialog>
|
||||
<dialog id="non-modal-dialog" style="visibility: hidden"></dialog>
|
||||
<dialog id="display-none-backdrop" style="visibility: hidden"></dialog>
|
||||
<dialog id="closed-dialog"></dialog>
|
||||
<dialog id="removed-dialog"></dialog>
|
||||
<script>
|
||||
document.getElementById('display-none-dialog').showModal();
|
||||
document.getElementById('non-modal-dialog').show();
|
||||
document.getElementById('display-none-backdrop').showModal();
|
||||
|
||||
var closedDialog = document.getElementById('closed-dialog');
|
||||
closedDialog.showModal();
|
||||
closedDialog.close();
|
||||
|
||||
var removedDialog = document.getElementById('removed-dialog');
|
||||
removedDialog.showModal();
|
||||
removedDialog.parentNode.removeChild(removedDialog);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<style>
|
||||
#non-modal {
|
||||
position: static;
|
||||
}
|
||||
</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>
|
||||
<dialog id="non-modal" open></dialog>
|
||||
<dialog id="modal"></dialog>
|
||||
<script>
|
||||
document.querySelector('#modal').showModal();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<link rel="match" href="dont-share-style-to-top-layer-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<style>
|
||||
dialog {
|
||||
position: static;
|
||||
}
|
||||
</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>
|
||||
<dialog open></dialog>
|
||||
<dialog id="modal"></dialog>
|
||||
<script>
|
||||
document.querySelector('#modal').showModal();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.green {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Bug <a href="http://webkit.org/b/106538">106538</a>: Top layer fails for inline elements</p>
|
||||
<p>This tests that position 'static' no longer computes to 'absolute' for an
|
||||
element that has been removed from the top layer. The test passes if you see
|
||||
a single line of text.</p>
|
||||
<span class="green">This is the span.</span>
|
||||
<span class="green">This is the dialog following it.</span>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="match" href="element-removed-from-top-layer-has-original-position-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<style>
|
||||
.green {
|
||||
color: green;
|
||||
}
|
||||
|
||||
#right-dialog {
|
||||
display: inline;
|
||||
position: static;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Bug <a href="http://webkit.org/b/106538">106538</a>: Top layer fails for inline elements</p>
|
||||
<p>This tests that position 'static' no longer computes to 'absolute' for an
|
||||
element that has been removed from the top layer. The test passes if you see
|
||||
a single line of text.</p>
|
||||
<span class="green">This is the span.</span>
|
||||
<dialog class="green" id="right-dialog">This is the dialog following it.</dialog>
|
||||
<script>
|
||||
var dialog = document.getElementById('right-dialog');
|
||||
dialog.showModal();
|
||||
dialog.close();
|
||||
dialog.show();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=urf-8>
|
||||
<meta name=viewport content="width=device-width,initial-scale=1">
|
||||
<title>Test focus is moved to the previously focused element when dialog is closed</title>
|
||||
<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>
|
||||
<input />
|
||||
<dialog>
|
||||
<button id="button1">This is a button1</button>
|
||||
<button id="button2">This is a button2</button>
|
||||
<button id="button3">This is a button3</button>
|
||||
</dialog>
|
||||
<script>
|
||||
|
||||
// Test focus is moved to the previously focused element
|
||||
function test_move_to_previously_focused(showModal) {
|
||||
const input = document.querySelector("input");
|
||||
input.focus();
|
||||
const dialog = document.querySelector('dialog');
|
||||
if (showModal) {
|
||||
dialog.showModal();
|
||||
} else {
|
||||
dialog.show();
|
||||
}
|
||||
dialog.close();
|
||||
|
||||
assert_equals(document.activeElement, input);
|
||||
}
|
||||
|
||||
// Test focus is moved to the previously focused element with some complex dialog usage
|
||||
async function test_move_to_previously_focused_with_complex_dialog_usage(showModal) {
|
||||
const input = document.querySelector("input");
|
||||
input.focus();
|
||||
const dialog = document.querySelector('dialog');
|
||||
if (showModal) {
|
||||
dialog.showModal();
|
||||
} else {
|
||||
dialog.show();
|
||||
}
|
||||
|
||||
const button1 = document.getElementById("button1");
|
||||
const button2 = document.getElementById("button2");
|
||||
const button3 = document.getElementById("button3");
|
||||
|
||||
await test_driver.click(button1);
|
||||
await test_driver.click(button2);
|
||||
await test_driver.click(button3);
|
||||
|
||||
dialog.close();
|
||||
|
||||
assert_equals(document.activeElement, input);
|
||||
}
|
||||
|
||||
// Test focus is moved to <body> if the previously focused
|
||||
// element can't be focused
|
||||
function test_move_to_body_if_fails(showModal) {
|
||||
const input = document.querySelector("input");
|
||||
input.focus();
|
||||
const dialog = document.querySelector('dialog');
|
||||
if (showModal) {
|
||||
dialog.showModal();
|
||||
} else {
|
||||
dialog.show();
|
||||
}
|
||||
dialog.close();
|
||||
input.remove();
|
||||
assert_equals(document.activeElement, document.body);
|
||||
document.body.appendChild(input);
|
||||
}
|
||||
|
||||
// Test focus is moved to shadow host if the previously
|
||||
// focused element is a shadow node.
|
||||
function test_move_to_shadow_host(showModal) {
|
||||
const shadowHost = document.createElement("div");
|
||||
|
||||
const shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.appendChild(document.createElement("input"));
|
||||
|
||||
document.body.appendChild(shadowHost);
|
||||
const inputElement = shadowRoot.querySelector("input");
|
||||
inputElement.focus();
|
||||
|
||||
assert_equals(document.activeElement, shadowHost);
|
||||
assert_equals(shadowRoot.activeElement, inputElement);
|
||||
|
||||
const dialog = document.querySelector('dialog');
|
||||
if (showModal) {
|
||||
dialog.showModal();
|
||||
} else {
|
||||
dialog.show();
|
||||
}
|
||||
dialog.close();
|
||||
|
||||
assert_equals(document.activeElement, shadowHost);
|
||||
assert_equals(shadowRoot.activeElement, inputElement);
|
||||
}
|
||||
|
||||
// Test moving the focus doesn't scroll the viewport
|
||||
function test_move_focus_dont_scroll_viewport(showModal) {
|
||||
const outViewPortButton = document.createElement("button");
|
||||
outViewPortButton.style.top = (window.innerHeight + 10).toString() + "px";
|
||||
outViewPortButton.style.position = "absolute";
|
||||
document.body.appendChild(outViewPortButton);
|
||||
|
||||
outViewPortButton.focus();
|
||||
// Since the outViewPortButton is focused, so the viewport should be
|
||||
// scrolled to it
|
||||
assert_true(document.documentElement.scrollTop > 0 );
|
||||
|
||||
const dialog = document.querySelector('dialog');
|
||||
if (showModal) {
|
||||
dialog.showModal();
|
||||
} else {
|
||||
dialog.show();
|
||||
}
|
||||
|
||||
window.scrollTo(0, 0);
|
||||
assert_equals(document.documentElement.scrollTop, 0);
|
||||
|
||||
dialog.close();
|
||||
assert_equals(document.documentElement.scrollTop, 0);
|
||||
|
||||
assert_equals(document.activeElement, outViewPortButton);
|
||||
}
|
||||
|
||||
test(() => {
|
||||
test_move_to_previously_focused(true);
|
||||
test_move_to_previously_focused(false);
|
||||
}, 'Focus should be moved to the previously focused element(Simple dialog usage)');
|
||||
|
||||
promise_test(async () => {
|
||||
await test_move_to_previously_focused_with_complex_dialog_usage(true);
|
||||
await test_move_to_previously_focused_with_complex_dialog_usage(false);
|
||||
}, 'Focus should be moved to the previously focused element(Complex dialog usage)');
|
||||
|
||||
test(() => {
|
||||
test_move_to_body_if_fails(true);
|
||||
test_move_to_body_if_fails(false);
|
||||
}, 'Focus should be moved to the body if the previously focused element is removed');
|
||||
|
||||
test(() => {
|
||||
test_move_to_shadow_host(true);
|
||||
test_move_to_shadow_host(false);
|
||||
}, 'Focus should be moved to the shadow DOM host if the previouly focused element is a shadow DOM node');
|
||||
|
||||
test(() => {
|
||||
test_move_focus_dont_scroll_viewport(true);
|
||||
test_move_focus_dont_scroll_viewport(false);
|
||||
}, 'Focus should not scroll if the previously focused element is outside the viewport');
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body p, span {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test that inert nodes are not painted as being selected. The test passes if
|
||||
none of the text outside the dialog is highlighted when selected.</p>
|
||||
|
||||
<p>Although not shown as selected, the inert nodes are in window.getSelection()
|
||||
and copied to the clipboard, which is the same behavior as user-select:
|
||||
none (crbug.com/147490).</p>
|
||||
|
||||
<br><span>This text shouldn't be highlighted as selected.</span>
|
||||
|
||||
<dialog>
|
||||
<div id="selectable">I'm selectable.</div>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
dialog = document.querySelector('dialog');
|
||||
dialog.showModal();
|
||||
selectable = document.querySelector('#selectable');
|
||||
window.getSelection().selectAllChildren(selectable);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="match" href="inert-node-is-not-highlighted-ref.html">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#inert-subtrees">
|
||||
<style>
|
||||
::backdrop {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test that inert nodes are not painted as being selected. The test passes if
|
||||
none of the text outside the dialog is highlighted when selected.</p>
|
||||
|
||||
<p>Although not shown as selected, the inert nodes are in window.getSelection()
|
||||
and copied to the clipboard, which is the same behavior as user-select:
|
||||
none (crbug.com/147490).</p>
|
||||
|
||||
<br> <!-- Needed to the trigger the bug. -->
|
||||
This text shouldn't be highlighted as selected.
|
||||
|
||||
<dialog>
|
||||
<div id="selectable">I'm selectable.</div>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
dialog = document.querySelector('dialog');
|
||||
dialog.showModal();
|
||||
document.execCommand('SelectAll');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.dialog-default-ua-style {
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
border: solid;
|
||||
padding: 1em;
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#dialog {
|
||||
margin: auto;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
top: 100px;
|
||||
z-index: 1000;
|
||||
background: green;
|
||||
}
|
||||
|
||||
#backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.1);
|
||||
z-index: 100;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
Test for the default user agent style of dialog::backdrop. The test passes if
|
||||
there is a green box, above a very lightly translucent gray box spanning the
|
||||
viewport.
|
||||
<div id="backdrop"></div>
|
||||
<div class="dialog-default-ua-style" id="dialog"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="modal-dialog-backdrop-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#user-agent-level-style-sheet-defaults">
|
||||
<style>
|
||||
dialog {
|
||||
top: 100px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
Test for the default user agent style of dialog::backdrop. The test passes if
|
||||
there is a green box, above a very lightly translucent gray box spanning the
|
||||
viewport.
|
||||
<dialog></dialog>
|
||||
<script>
|
||||
document.querySelector('dialog').showModal();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>Reference: Test that display: contents; on modal dialog & ::backdrop acts like display: block</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<p>Test passes if there is a green dialog</p>
|
||||
<p>Dialog is display:block</p>
|
||||
<p>Dialog::backdrop is display:block</p>
|
||||
<dialog>Dialog Contents</dialog>
|
||||
<style>
|
||||
dialog {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.querySelector("dialog").showModal();
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>Test that display: contents; on modal dialog & ::backdrop acts like display: block</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
|
||||
<link rel="match" href="modal-dialog-display-contents-ref.html">
|
||||
<p>Test passes if there is a green dialog</p>
|
||||
<p>Dialog is display:<span id="computed-value"></span></p>
|
||||
<p>Dialog::backdrop is display:<span id="computed-value-backdrop"></span></p>
|
||||
<dialog>Dialog Contents</dialog>
|
||||
<style>
|
||||
dialog {
|
||||
display: contents;
|
||||
background-color: green;
|
||||
}
|
||||
dialog::backdrop {
|
||||
display: contents;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
dialog = document.querySelector("dialog");
|
||||
dialog.showModal();
|
||||
document.getElementById("computed-value").textContent = getComputedStyle(dialog).display;
|
||||
document.getElementById("computed-value-backdrop").textContent = getComputedStyle(dialog, "::backdrop").display;
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
#dialog {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
#dialog-before {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#dialog-after {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
#dialog-backdrop {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 300px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
Test for a modal dialog with ::before, ::after, and ::backdrop. The test passes
|
||||
if there are two green boxes, one with the texts "::before" and "::after" in it.
|
||||
<div id="dialog">
|
||||
<div id="dialog-before">::before</div>
|
||||
<div id="dialog-after">::after</div>
|
||||
</div>
|
||||
<div id="dialog-backdrop"></div>
|
||||
<script>
|
||||
document.querySelector('dialog').showModal();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="modal-dialog-generated-content-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<style>
|
||||
dialog {
|
||||
padding: 0px;
|
||||
border: none;
|
||||
margin: 0px;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
dialog::before {
|
||||
content: '::before';
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
dialog::after {
|
||||
content: '::after';
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 300px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: green;
|
||||
content: 'THIS TEXT SHOULD NOT BE SEEN';
|
||||
}
|
||||
|
||||
dialog::backdrop::before {
|
||||
content: '::backdrop::before';
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
background: red;
|
||||
}
|
||||
dialog::backdrop::after {
|
||||
content: '::backdrop::after';
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
Test for a modal dialog with ::before, ::after, and ::backdrop. The test passes
|
||||
if there are two green boxes, one with the texts "::before" and "::after" in it.
|
||||
<dialog></dialog>
|
||||
<script>
|
||||
document.querySelector('dialog').showModal();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
dialog {
|
||||
background: green;
|
||||
border-color: green;
|
||||
}
|
||||
div {
|
||||
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPAQMAAAABGAcJAAAAA1BMVEUAgACc+aWRAAAADElEQVR42mNgIAEAAAAtAAH7KhMqAAAAAElFTkSuQmCC);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Bug <a href="http://webkit.org/b/103477">103477</a>: Make
|
||||
NodeRenderingContext::parentRenderer and nextRenderer top layer aware
|
||||
<p>The test passes if you see a green square near the top and green rectangle in the center of the viewport.
|
||||
<div></div>
|
||||
<dialog id="dialog"></dialog>
|
||||
<script>
|
||||
document.getElementById('dialog').showModal();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="match" href="modal-dialog-in-replaced-renderer-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<style>
|
||||
dialog {
|
||||
background: green;
|
||||
border-color: green;
|
||||
}
|
||||
div {
|
||||
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPAQMAAAABGAcJAAAAA1BMVEUAgACc+aWRAAAADElEQVR42mNgIAEAAAAtAAH7KhMqAAAAAElFTkSuQmCC);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Bug <a href="http://webkit.org/b/103477">103477</a>: Make
|
||||
NodeRenderingContext::parentRenderer and nextRenderer top layer aware
|
||||
<p>The test passes if you see a green square near the top and green rectangle in the center of the viewport.
|
||||
<div>
|
||||
<dialog id="dialog"></dialog>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('dialog').showModal();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
dialog {
|
||||
background: green;
|
||||
border-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Bug <a href="http://webkit.org/b/103477">103477</a>: Make
|
||||
NodeRenderingContext::parentRenderer and nextRenderer top layer aware
|
||||
<p>The test passes if you see a green rectangle in the center of the viewport.
|
||||
<dialog id="dialog"></dialog>
|
||||
<script>
|
||||
document.getElementById('dialog').showModal();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="match" href="modal-dialog-in-table-column-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<style>
|
||||
dialog {
|
||||
background: green;
|
||||
border-color: green;
|
||||
}
|
||||
div {
|
||||
display: table-column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Bug <a href="http://webkit.org/b/103477">103477</a>: Make
|
||||
NodeRenderingContext::parentRenderer and nextRenderer top layer aware
|
||||
<p>The test passes if you see a green rectangle in the center of the viewport.
|
||||
<div>
|
||||
<dialog id="dialog"></dialog>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('dialog').showModal();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
dialog {
|
||||
background: green;
|
||||
border-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Bug <a href="http://webkit.org/b/103477">103477</a>: Make
|
||||
NodeRenderingContext::parentRenderer and nextRenderer top layer aware
|
||||
<p>The test passes if you see a green rectangle in the center of the viewport.
|
||||
<dialog id="dialog"></dialog>
|
||||
<script>
|
||||
document.getElementById('dialog').showModal();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="match" href="modal-dialog-sibling-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<style>
|
||||
dialog {
|
||||
background: green;
|
||||
border-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Bug <a href="http://webkit.org/b/103477">103477</a>: Make
|
||||
NodeRenderingContext::parentRenderer and nextRenderer top layer aware
|
||||
<p>The test passes if you see a green rectangle in the center of the viewport.
|
||||
<div style="display: none" id="div"></div>
|
||||
<dialog id="dialog"></dialog>
|
||||
<script>
|
||||
document.getElementById('dialog').showModal();
|
||||
document.getElementById('dialog').offsetTop; // force a layout/renderer creation
|
||||
document.getElementById('div').style.display = 'block';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="resources/dialog.css">
|
||||
<style>
|
||||
.pseudodialog {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#bottomDialog {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#topDialog {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=105489">105489</a>: Elements must be reattached when inserted/removed from top layer
|
||||
<p>The test passes if you see a green rectangle stacked on top of a blue rectangle.
|
||||
<div id="bottomDialog" class="pseudodialog"></div>
|
||||
<div id="topDialog" class="pseudodialog"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="match" href="removed-element-is-removed-from-top-layer-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<style>
|
||||
dialog {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#bottomDialog {
|
||||
background-color: blue;
|
||||
top: 231px;
|
||||
}
|
||||
|
||||
#topDialog {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=105489">105489</a>: Elements must be reattached when inserted/removed from top layer
|
||||
<p>The test passes if you see a green rectangle stacked on top of a blue rectangle.
|
||||
<dialog id="bottomDialog"></dialog>
|
||||
<dialog id="topDialog"></dialog>
|
||||
<script>
|
||||
document.getElementById('topDialog').showModal();
|
||||
var bottomDialog = document.getElementById('bottomDialog');
|
||||
bottomDialog.showModal();
|
||||
bottomDialog.offsetTop; // force a layout
|
||||
var parent = bottomDialog.parentNode;
|
||||
parent.removeChild(bottomDialog);
|
||||
parent.appendChild(bottomDialog);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
.pseudodialog {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
margin: auto;
|
||||
border: solid;
|
||||
padding: 1em;
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="resources/dialog.css">
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
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 class="pseudodialog" style="position: absolute; top: 100px; height: 250px; width: 90%; background-color: yellow">
|
||||
This dialog should be onscreen with a width of 90% of the page. It is the child of an narrow element
|
||||
positioned off screen, but the containing block of a top layer element is the initial containing block, so its
|
||||
position and percent lengths are relative to that.
|
||||
</div>
|
||||
<div class="pseudodialog" style="position: absolute; top: 200px; left: 0px; height: 100px; background-color: cyan">
|
||||
This dialog should be unaffected by its ancestor with overflow. It should not be clipped.
|
||||
</div>
|
||||
<div class="pseudodialog" style="position: absolute; top: 250px; left: 0px; background-color: magenta">
|
||||
This dialog should be unaffected by its ancestor with opacity.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="match" href="top-layer-containing-block-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<style>
|
||||
::backdrop {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
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">
|
||||
This dialog should be unaffected by its ancestor with opacity.
|
||||
</dialog>
|
||||
</div>
|
||||
<div style="position: absolute; overflow: hidden; width: 500px; height: 150px; top: 400px; left: 300px">
|
||||
<dialog id="unclippedDialog" style="position: absolute; top: 200px; left: 0px; height: 100px; background-color: cyan">
|
||||
This dialog should be unaffected by its ancestor with overflow. It should not be clipped.
|
||||
</dialog>
|
||||
</div>
|
||||
<div style="position: absolute; top: 1000px; left: 1000px; width: 20px;">
|
||||
<dialog id="bottomDialog" style="position: absolute; top: 100px; height: 250px; width: 90%; background-color: yellow">
|
||||
This dialog should be onscreen with a width of 90% of the page. It is the child of an narrow element
|
||||
positioned off screen, but the containing block of a top layer element is the initial containing block, so its
|
||||
position and percent lengths are relative to that.
|
||||
</dialog>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('bottomDialog').showModal();
|
||||
document.getElementById('unclippedDialog').showModal();
|
||||
document.getElementById('opaqueDialog').showModal();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="resources/dialog.css">
|
||||
<style>
|
||||
.pseudodialog {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
This tests that a top layer element is not rendered if it, or an ancestor, has display: none.
|
||||
It passes if you see a green rectangle stacked on top of a blue rectangle, and see no red rectangles.
|
||||
|
||||
<div class="pseudodialog" style="top: 50px; background-color: blue"></div>
|
||||
<div class="pseudodialog" style="top: 100px; left: 50px; background-color: green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="match" href="top-layer-display-none-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<style>
|
||||
dialog {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: red;
|
||||
top: 200px;
|
||||
}
|
||||
|
||||
#bottomDialog {
|
||||
background-color: blue;
|
||||
top: 50px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#topDialog {
|
||||
background-color: green;
|
||||
top: 100px;
|
||||
left: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
This tests that a top layer element is not rendered if it, or an ancestor, has display: none.
|
||||
It passes if you see a green rectangle stacked on top of a blue rectangle, and see no red rectangles.
|
||||
|
||||
<dialog id="hiddenDialog" class="red" style="display: none;"></dialog>
|
||||
<div id="container">
|
||||
<div>
|
||||
<dialog id="displayNoneChild1" class="red"></dialog>
|
||||
<dialog id="displayNoneChild2" class="red"></dialog>
|
||||
</div>
|
||||
</div>
|
||||
<dialog id="bottomDialog"></dialog>
|
||||
<dialog id="topDialog"></dialog>
|
||||
<script>
|
||||
document.getElementById('hiddenDialog').showModal();
|
||||
document.getElementById('displayNoneChild1').showModal();
|
||||
document.getElementById('container').style.display = 'none';
|
||||
document.getElementById('displayNoneChild2').showModal();
|
||||
|
||||
// Test that stacking works even if an element is added to the top layer when it has no renderer.
|
||||
document.getElementById('bottomDialog').showModal();
|
||||
document.getElementById('topDialog').showModal();
|
||||
document.getElementById('bottomDialog').style.display = 'block';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.pseudodialog {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
margin: auto;
|
||||
border: solid;
|
||||
padding: 1em;
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
This tests that top layer elements are stacked correctly even if nested in the DOM tree.
|
||||
The test passes if you see no red rectangles and see 3 rectangles stacked in the following order (from bottom to top): yellow, blue, green.
|
||||
|
||||
<div class="pseudodialog" style="top: 100px; background-color: yellow"></div>
|
||||
<div class="pseudodialog" style="top: 150px; left: 50px; background-color: blue"></div>
|
||||
<div class="pseudodialog" style="top: 200px; left: 100px; background-color: green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="match" href="top-layer-nesting-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<style>
|
||||
dialog {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#bottomDialog {
|
||||
background-color: yellow;
|
||||
top: 100px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#middleDialog {
|
||||
background-color: blue;
|
||||
top: 150px;
|
||||
left: 50px;
|
||||
z-index: -500;
|
||||
}
|
||||
|
||||
#topDialog {
|
||||
background-color: green;
|
||||
top: 200px;
|
||||
left: 100px;
|
||||
z-index: -1000;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: red;
|
||||
top: 250px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
This tests that top layer elements are stacked correctly even if nested in the DOM tree.
|
||||
The test passes if you see no red rectangles and see 3 rectangles stacked in the following order (from bottom to top): yellow, blue, green.
|
||||
|
||||
<dialog id="topDialog">
|
||||
<dialog id="middleDialog">
|
||||
<dialog id="bottomDialog">
|
||||
<dialog id="hiddenDialog" class="red">
|
||||
<dialog id="hiddenDialogChild" class="red"></dialog>
|
||||
</dialog>
|
||||
</dialog>
|
||||
</dialog>
|
||||
</dialog>
|
||||
<script>
|
||||
document.getElementById('hiddenDialogChild').showModal();
|
||||
document.getElementById('hiddenDialog').showModal();
|
||||
document.getElementById('bottomDialog').showModal();
|
||||
document.getElementById('middleDialog').showModal();
|
||||
document.getElementById('topDialog').showModal();
|
||||
document.getElementById('hiddenDialog').close();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>Reference: Test that parent opacity does not affect top layer elements</title>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
dialog {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>PASS if you see a green square</p>
|
||||
<dialog></dialog>
|
||||
<script>
|
||||
document.querySelector("dialog").showModal();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>Test that parent opacity does not affect top layer elements</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<link rel="match" href="top-layer-parent-opacity-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=229317">
|
||||
<style>
|
||||
#parent {
|
||||
opacity: 0;
|
||||
}
|
||||
dialog {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>PASS if you see a green square</p>
|
||||
<div id="parent">
|
||||
<dialog></dialog>
|
||||
</div>
|
||||
<script>
|
||||
document.querySelector("dialog").showModal();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="resources/dialog.css">
|
||||
<style>
|
||||
.pseudodialog {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=105489">105489</a>: Elements must be reattached when inserted/removed from top layer
|
||||
<p>The test passes if you see a green rectangle stacked on top of a blue rectangle.
|
||||
|
||||
<div class="pseudodialog" style="top: 100px; background-color: blue"></div>
|
||||
<div class="pseudodialog" style="top: 150px; left: 50px; background-color: green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="match" href="top-layer-stacking-correct-order-remove-readd-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dialog-element">
|
||||
<style>
|
||||
dialog {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#bottomDialog {
|
||||
background-color: blue;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
#topDialog {
|
||||
background-color: green;
|
||||
top: 150px;
|
||||
left: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=105489">105489</a>: Elements must be reattached when inserted/removed from top layer
|
||||
<p>The test passes if you see a green rectangle stacked on top of a blue rectangle.
|
||||
|
||||
<dialog id="topDialog"></dialog>
|
||||
<dialog id="bottomDialog"></dialog>
|
||||
<script>
|
||||
var topDialog = document.getElementById('topDialog');
|
||||
var bottomDialog = document.getElementById('bottomDialog');
|
||||
topDialog.showModal();
|
||||
bottomDialog.showModal();
|
||||
topDialog.offsetTop; // force a layout
|
||||
topDialog.close();
|
||||
topDialog.showModal();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="resources/dialog.css">
|
||||
<style>
|
||||
.pseudodialog {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
This tests top layer element stacking order after dynamically calling show/close and removal from the DOM tree.
|
||||
The test passes if you see a green rectangle stacked on top of a blue rectangle, and see no red rectangles.
|
||||
|
||||
<div class="pseudodialog" style="top: 50px; background-color: blue"></div>
|
||||
<div class="pseudodialog" style="top: 100px; left: 50px; background-color: green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="match" href="top-layer-stacking-dynamic-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dialog-element">
|
||||
<style>
|
||||
dialog {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: red;
|
||||
top: 200px;
|
||||
}
|
||||
|
||||
#bottomDialog {
|
||||
background-color: blue;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
#topDialog {
|
||||
background-color: green;
|
||||
top: 100px;
|
||||
left: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
This tests top layer element stacking order after dynamically calling show/close and removal from the DOM tree.
|
||||
The test passes if you see a green rectangle stacked on top of a blue rectangle, and see no red rectangles.
|
||||
|
||||
<dialog id="topDialog"></dialog>
|
||||
<dialog id="bottomDialog"></dialog>
|
||||
<dialog id="removedDialog" class="red">
|
||||
<dialog id="removedDialogChild" class="red"></dialog>
|
||||
</dialog>
|
||||
<script>
|
||||
document.getElementById('topDialog').showModal();
|
||||
var removedDialog = document.getElementById('removedDialog');
|
||||
removedDialog.showModal();
|
||||
document.getElementById('bottomDialog').showModal();
|
||||
document.getElementById('removedDialogChild').showModal();
|
||||
removedDialog.parentNode.removeChild(removedDialog);
|
||||
document.getElementById('topDialog').close();
|
||||
document.getElementById('topDialog').showModal();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="resources/dialog.css">
|
||||
</head>
|
||||
<style>
|
||||
.box {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
.container {
|
||||
perspective: 500px;
|
||||
border: 1px solid black;
|
||||
background-color: magenta;
|
||||
}
|
||||
.transformed {
|
||||
transform: rotateY(45deg);
|
||||
background-color: cyan;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="pseudodialog" style="position: fixed; top: 10px; z-index:3000">
|
||||
This white box is the topmost modal dialog. It should be on top of everything.
|
||||
</div>
|
||||
<div style="position: absolute; top: 0px; z-index: 3; background-color: red; left: 0; right: 0; height: 200px;"></div>
|
||||
<div class="pseudodialog" style="position: absolute; top: 50px; background-color: green; width: 75%; height: 400px; z-index:2000; overflow: auto;">
|
||||
This green box is also a modal dialog. It should be rendered above the red and yellow regions.
|
||||
<div class="container box">
|
||||
<div class="transformed box">A transform within the dialog's subtree.</div>
|
||||
</div>
|
||||
<div class="box" style="position: absolute; top:300px; z-index: 2; background-color: cyan">
|
||||
This shows z-index stacking within the dialog's subtree. The cyan box should be on top of the magenta one.
|
||||
</div>
|
||||
<div class="box" style="position: absolute; top:350px; left:50px; z-index: 1; background-color: magenta"></div>
|
||||
<div style="position: fixed; top: 90px; left: 30px; background-color: green">This is part of the green dialog.</div>
|
||||
</div>
|
||||
<div style="position: absolute; top: 100px; left: 0px; right: 0px; height: 200em; background-color: yellow; z-index:1000">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- This tests that top layer elements are rendered above z-indexed elements
|
||||
and stacked in the correct order amongst themselves. Also, layer features like
|
||||
transforms and z-index are tested inside a top layer element subtree. -->
|
||||
<html>
|
||||
<head>
|
||||
<link rel="match" href="top-layer-stacking-ref.html">
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
|
||||
<style>
|
||||
.box {
|
||||
height:150px;
|
||||
width:150px;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
perspective: 500px;
|
||||
border: 1px solid black;
|
||||
background-color: magenta;
|
||||
}
|
||||
.transformed {
|
||||
transform: rotateY(45deg);
|
||||
background-color: cyan;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<dialog id="hiddenDialog" style="display: none; color: red">This should not be displayed.</dialog>
|
||||
<dialog id="topDialog" style="position: fixed; top: 10px; z-index: -10;">
|
||||
This white box is the topmost modal dialog. It should be on top of everything.
|
||||
</dialog>
|
||||
<div style="position: absolute; top: 0px; z-index: 3; background-color: red; left: 0; right: 0; height: 200px;">
|
||||
<dialog id="bottomDialog" style="position: absolute; top: 50px; background-color: green; width: 75%; height: 400px;">
|
||||
This green box is also a modal dialog. It should be rendered above the red and yellow regions.
|
||||
<div class="container box">
|
||||
<div class="transformed box">A transform within the dialog's subtree.</div>
|
||||
</div>
|
||||
<div class="box" style="position: absolute; top:300px; z-index: 2; background-color: cyan">
|
||||
This shows z-index stacking within the dialog's subtree. The cyan box should be on top of the magenta one.
|
||||
</div>
|
||||
<div class="box" style="position: absolute; top:350px; left:50px; z-index: 1; background-color: magenta"></div>
|
||||
<div style="position: fixed; top: 90px; left: 30px; background-color: green">This is part of the green dialog.</div>
|
||||
</dialog>
|
||||
</div>
|
||||
<div style="position: absolute; top: 100px; left: 0px; right: 0px; height: 200em; background-color: yellow; z-index:1000">
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('bottomDialog').showModal();
|
||||
document.getElementById('topDialog').showModal();
|
||||
document.getElementById('hiddenDialog').showModal();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue