mirror of
https://github.com/servo/servo.git
synced 2025-08-05 21:50:18 +01:00
Update web-platform-tests to revision 8d1253647cfe3809ddf58a4ad7c9da5f26985d7e
This commit is contained in:
WPT Sync Bot
parent
553ff20468
commit
48c420fdb5
440 changed files with 6186 additions and 3542 deletions
|
|
@ -15,8 +15,8 @@ body {
|
|||
dialog {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#absolute-div {
|
||||
|
|
@ -41,12 +41,12 @@ dialog {
|
|||
"use strict";
|
||||
|
||||
function checkNotVerticallyCentered(dialog) {
|
||||
var centeredTop = (window.innerHeight - dialog.offsetHeight) / 2;
|
||||
var centeredTop = (document.documentElement.clientHeight - dialog.offsetHeight) / 2;
|
||||
assert_not_equals(dialog.getBoundingClientRect().top, centeredTop);
|
||||
}
|
||||
|
||||
function checkVerticallyCentered(dialog) {
|
||||
var centeredTop = (window.innerHeight - dialog.offsetHeight) / 2;
|
||||
var centeredTop = (document.documentElement.clientHeight - dialog.offsetHeight) / 2;
|
||||
// Using approx equals because getBoundingClientRect() and centeredTop
|
||||
// are calculated by different parts of the engine. Due to the loss
|
||||
// of precision, the numbers might not equal exactly.
|
||||
|
|
@ -74,22 +74,6 @@ test(function() {
|
|||
checkVerticallyCentered(dialog);
|
||||
}, "showModal() should center in the viewport");
|
||||
|
||||
test(function() {
|
||||
this.add_cleanup(reset);
|
||||
|
||||
assert_equals(window.getComputedStyle(dialog).top, 'auto');
|
||||
assert_equals(window.getComputedStyle(dialog).bottom, 'auto');
|
||||
|
||||
dialog.style.height = '20px';
|
||||
dialog.showModal();
|
||||
|
||||
assert_not_equals(window.getComputedStyle(dialog).top, 'auto');
|
||||
assert_not_equals(window.getComputedStyle(dialog).bottom, 'auto');
|
||||
|
||||
// Set back original value to 'height'.
|
||||
dialog.style.height = 'auto';
|
||||
}, "The dialog is a positioned element, so the top and bottom should not have style auto.");
|
||||
|
||||
test(function() {
|
||||
this.add_cleanup(reset);
|
||||
|
||||
|
|
@ -122,7 +106,7 @@ test(function() {
|
|||
assert_equals(dialog.getBoundingClientRect().top, 0);
|
||||
|
||||
// Set back original value to 'height'.
|
||||
dialog.style.height = 'auto';
|
||||
dialog.style.height = 'fit-content';
|
||||
}, "A tall dialog should be positioned at the top of the viewport.");
|
||||
|
||||
test(function() {
|
||||
|
|
@ -167,13 +151,12 @@ test(function() {
|
|||
relativeContainer.appendChild(dialog);
|
||||
|
||||
dialog.showModal();
|
||||
assert_not_equals(dialog.getBoundingClientRect().top, relativeContainer.getBoundingClientRect().top);
|
||||
checkVerticallyCentered(dialog);
|
||||
dialog.remove();
|
||||
|
||||
relativeContainer.appendChild(dialog);
|
||||
assert_equals(dialog.parentNode, relativeContainer);
|
||||
assert_equals(dialog.getBoundingClientRect().top, relativeContainer.getBoundingClientRect().top);
|
||||
}, "Dialog should lose centering when removed from the document.");
|
||||
checkVerticallyCentered(dialog);
|
||||
}, "Dialog should still be centered when removed, and re-added to the document.");
|
||||
|
||||
test(function() {
|
||||
this.add_cleanup(reset);
|
||||
|
|
@ -186,7 +169,7 @@ test(function() {
|
|||
assert_equals(dialog.getBoundingClientRect().top, expectedTop);
|
||||
|
||||
// Set back original value to 'top'.
|
||||
dialog.style.top = 'auto';
|
||||
dialog.style.top = '0';
|
||||
}, "Dialog's specified position should survive after close() and showModal().");
|
||||
|
||||
test(function() {
|
||||
|
|
@ -194,43 +177,7 @@ test(function() {
|
|||
|
||||
dialog.showModal();
|
||||
dialog.removeAttribute('open');
|
||||
window.scroll(0, window.scrollY * 2);
|
||||
checkNotVerticallyCentered(dialog);
|
||||
dialog.showModal();
|
||||
checkVerticallyCentered(dialog);
|
||||
}, "Dialog should be recentered if showModal() is called after removing 'open'.");
|
||||
|
||||
test(function() {
|
||||
this.add_cleanup(reset);
|
||||
|
||||
dialog.remove();
|
||||
absoluteContainer.appendChild(dialog);
|
||||
absoluteContainer.style.display = 'none';
|
||||
dialog.showModal();
|
||||
absoluteContainer.style.display = 'block';
|
||||
// Since dialog's containing block is the ICB, it's statically positioned after <body>.
|
||||
assert_equals(dialog.getBoundingClientRect().top, document.body.getBoundingClientRect().bottom);
|
||||
}, "Dialog should not be centered if showModal() was called when an ancestor had display 'none'.");
|
||||
|
||||
test(function() {
|
||||
this.add_cleanup(reset);
|
||||
|
||||
var offset = 50;
|
||||
dialog.style.top = offset + 'px';
|
||||
dialog.showModal();
|
||||
assert_equals(dialog.getBoundingClientRect().top + window.scrollY, offset);
|
||||
// Set back original value to 'top'.
|
||||
dialog.style.top = 'auto';
|
||||
}, "A dialog with specified 'top' should be positioned as usual");
|
||||
|
||||
test(function() {
|
||||
this.add_cleanup(reset);
|
||||
|
||||
var offset = 50;
|
||||
dialog.style.bottom = offset + 'px';
|
||||
dialog.showModal();
|
||||
assert_equals(dialog.getBoundingClientRect().bottom + window.scrollY, window.innerHeight - offset);
|
||||
// Set back original value to 'bottom'.
|
||||
dialog.style.bottom = 'auto';
|
||||
}, "A dialog with specified 'bottom' should be positioned as usual");
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@
|
|||
writing-mode: {{GET[dialog-writing-mode]}};
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
max-width: initial;
|
||||
max-height: initial;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,30 +11,33 @@
|
|||
"use strict";
|
||||
|
||||
// Be sure to sync with centering-iframe.html
|
||||
const DIALOG_WIDTH = 20;
|
||||
const DIALOG_HEIGHT = 10;
|
||||
const dialogWidth = 20;
|
||||
const dialogHeight = 10;
|
||||
|
||||
testDialogCentering("horizontal-tb", "", "", "tall viewport", 40, 100, "top", 100 / 2 - DIALOG_HEIGHT / 2);
|
||||
testDialogCentering("horizontal-tb", "", "", "wide viewport", 100, 40, "top", 40 / 2 - DIALOG_HEIGHT / 2);
|
||||
testDialogCentering("horizontal-tb", "", "", "square viewport", 100, 100, "top", 100 / 2 - DIALOG_HEIGHT / 2);
|
||||
testDialogCentering("horizontal-tb", "", "", "dialog and viewport match", DIALOG_WIDTH, DIALOG_HEIGHT, "top", 0);
|
||||
testDialogCentering("horizontal-tb", "", "", "dialog bigger than viewport", 100, DIALOG_HEIGHT / 2, "top", 0);
|
||||
const widthOffset100 = 100 / 2 - dialogWidth / 2;
|
||||
const widthOffset40 = 40 / 2 - dialogWidth / 2;
|
||||
|
||||
testDialogCentering("vertical-rl", "", "", "tall viewport", 40, 100, "left", 40 / 2 - DIALOG_WIDTH / 2);
|
||||
testDialogCentering("vertical-lr", "", "", "tall viewport", 40, 100, "right", 40 / 2 - DIALOG_WIDTH / 2);
|
||||
testDialogCentering("vertical-lr", "", "", "dialog bigger than viewport", DIALOG_WIDTH / 2, 100, "right", 0);
|
||||
const heightOffset100 = 100 / 2 - dialogHeight / 2;
|
||||
const heightOffset40 = 40 / 2 - dialogHeight / 2;
|
||||
|
||||
testDialogCentering("vertical-rl", "", "horizontal-tb", "tall viewport", 40, 100, "left", 40 / 2 - DIALOG_WIDTH / 2);
|
||||
testDialogCentering("vertical-lr", "", "horizontal-tb", "tall viewport", 40, 100, "right", 40 / 2 - DIALOG_WIDTH / 2);
|
||||
testDialogCentering("vertical-lr", "", "horizontal-tb", "dialog bigger than viewport", DIALOG_WIDTH / 2, 100, "right", 0);
|
||||
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("horizontal-tb", "vertical-rl", "", "tall viewport", 40, 100, "right", 40 / 2 - DIALOG_WIDTH / 2);
|
||||
testDialogCentering("vertical-rl", "horizontal-tb", "", "tall viewport", 40, 100, "top", 100 / 2 - DIALOG_HEIGHT / 2);
|
||||
testDialogCentering("vertical-rl", "", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);
|
||||
testDialogCentering("vertical-lr", "", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);
|
||||
|
||||
testDialogCentering("horizontal-tb", "vertical-rl", "horizontal-tb", "tall viewport", 40, 100, "right", 40 / 2 - DIALOG_WIDTH / 2);
|
||||
testDialogCentering("vertical-rl", "horizontal-tb", "vertical-rl", "tall viewport", 40, 100, "top", 100 / 2 - DIALOG_HEIGHT / 2);
|
||||
testDialogCentering("vertical-rl", "", "horizontal-tb", "tall viewport", 40, 100, widthOffset40, heightOffset100);
|
||||
testDialogCentering("vertical-lr", "", "horizontal-tb", "tall viewport", 40, 100, widthOffset40, heightOffset100);
|
||||
|
||||
function testDialogCentering(writingMode, containerWritingMode, dialogWritingMode, label, iframeWidth, iframeHeight, property, numericValue) {
|
||||
testDialogCentering("horizontal-tb", "vertical-rl", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);
|
||||
testDialogCentering("vertical-rl", "horizontal-tb", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);
|
||||
|
||||
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);
|
||||
|
||||
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}`;
|
||||
|
|
@ -42,19 +45,10 @@ function testDialogCentering(writingMode, containerWritingMode, dialogWritingMod
|
|||
iframe.height = iframeHeight;
|
||||
iframe.onload = t.step_func_done(() => {
|
||||
const dialog = iframe.contentDocument.querySelector("dialog");
|
||||
const dialogStyle = iframe.contentWindow.getComputedStyle(dialog);
|
||||
assert_equals(dialogStyle[property], numericValue + "px");
|
||||
assert_equals(dialogStyle['inset-inline-start'], "0px");
|
||||
assert_equals(dialogStyle['inset-inline-end'], "0px");
|
||||
const dialogRect = dialog.getBoundingClientRect();
|
||||
|
||||
const dialogWM = dialogWritingMode || containerWritingMode || writingMode || "horizontal-tb";
|
||||
if (dialogWM.startsWith("vertical")) {
|
||||
assert_equals(dialogStyle['top'], "0px");
|
||||
assert_equals(dialogStyle['bottom'], "0px");
|
||||
} else {
|
||||
assert_equals(dialogStyle['left'], "0px");
|
||||
assert_equals(dialogStyle['right'], "0px");
|
||||
}
|
||||
assert_equals(dialogRect.left, leftOffset, 'left');
|
||||
assert_equals(dialogRect.top, topOffset, 'top');
|
||||
});
|
||||
document.body.appendChild(iframe);
|
||||
}, writingMode + (containerWritingMode ? ` (container ${containerWritingMode})` : "") +
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dialog {
|
||||
padding : 0;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body style="height: 10000px; width: 10000px">
|
||||
<div style="position: absolute; top: 5000px; left: 5000px; width: 20px;">
|
||||
<dialog style="top: 1200px; left: 1200px; right: auto; height: 100px; width: 50%;">
|
||||
</dialog>
|
||||
</div>
|
||||
<script>
|
||||
"use strict";
|
||||
function checkPosition(dialog) {
|
||||
assert_equals(dialog.offsetParent, null);
|
||||
assert_equals(dialog.offsetTop, 1200);
|
||||
assert_equals(dialog.offsetLeft, 1200);
|
||||
// Since dialog's 'width' is '50%', the expected width is half of the
|
||||
// viewport width, but viewport width may be odd.
|
||||
var expectedWidth = document.documentElement.clientWidth / 2;
|
||||
assert_approx_equals(dialog.clientWidth, expectedWidth, 0.5);
|
||||
}
|
||||
|
||||
test(function() {
|
||||
// The dialog should be onscreen with a width of 50% of the viewport. It is the child of a
|
||||
// narrow element positioned off screen, but its containing block is the initial containing
|
||||
// block, so its position and percent lengths are relative to that.
|
||||
window.scroll(1000, 1000);
|
||||
var dialog = document.querySelector('dialog');
|
||||
dialog.showModal();
|
||||
checkPosition(dialog);
|
||||
dialog.close();
|
||||
}, "Tests modal dialog's containing block is the initial containing block");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue