mirror of
https://github.com/servo/servo
synced 2026-05-11 09:26:59 +02:00
52 lines
3.0 KiB
HTML
52 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<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">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<div id="log"></div>
|
|
|
|
<script>
|
|
"use strict";
|
|
|
|
// Be sure to sync with centering-iframe.html
|
|
const DIALOG_WIDTH = 20;
|
|
const DIALOG_HEIGHT = 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);
|
|
|
|
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);
|
|
|
|
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", "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("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);
|
|
|
|
function testDialogCentering(writingMode, containerWritingMode, dialogWritingMode, label, iframeWidth, iframeHeight, property, numericValue) {
|
|
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");
|
|
assert_equals(iframe.contentWindow.getComputedStyle(dialog)[property], numericValue + "px");
|
|
});
|
|
document.body.appendChild(iframe);
|
|
}, writingMode + (containerWritingMode ? ` (container ${containerWritingMode})` : "") +
|
|
(dialogWritingMode ? ` (dialog ${dialogWritingMode})` : "") + `: ${label}`);
|
|
}
|
|
</script>
|