Merge 21f3078 into 63d40d1

web-platform-tests · Mar 23, 2017 · 190a5d5 · 190a5d5
2 parents 63d40d1 + 21f3078
commit 190a5d5
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 0 deletions.
diff --git a/html/semantics/interactive-elements/the-dialog-element/centering-iframe.sub.html b/html/semantics/interactive-elements/the-dialog-element/centering-iframe.sub.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>dialog element centered frame</title>
+<style>
+  html {
+    writing-mode: {{GET[html-writing-mode]}}
+  }
+
+  #container {
+    writing-mode: {{GET[container-writing-mode]}}
+  }
+
+  dialog {
+    writing-mode: {{GET[dialog-writing-mode]}};
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+</style>
+
+<div id="container">
+  <dialog style="width: 20px; height: 10px;">X</dialog> <!-- sync width and height with centering.html -->
+</div>
+
+<script>
+"use strict";
+document.querySelector("dialog").showModal();
+</script>
diff --git a/html/semantics/interactive-elements/the-dialog-element/centering.html b/html/semantics/interactive-elements/the-dialog-element/centering.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>dialog element: centered alignment</title>
+<link rel="author" title="Domenic Denicola" href="mailto:[email protected]">
+<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>