centering.html (3268B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>dialog element: centered alignment</title> 4 <link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me"> 5 <link rel="help" href="https://html.spec.whatwg.org/#flow-content-3"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <div id="log"></div> 9 10 <script> 11 "use strict"; 12 13 // Be sure to sync with centering-iframe.html 14 const dialogWidth = 20; 15 const dialogHeight = 10; 16 17 testDialogCentering("horizontal-tb", "", "", "tall viewport", 40, 100); 18 testDialogCentering("horizontal-tb", "", "", "wide viewport", 100, 40); 19 testDialogCentering("horizontal-tb", "", "", "square viewport", 100, 100); 20 testDialogCentering("horizontal-tb", "", "", "dialog and viewport match", dialogWidth, dialogHeight); 21 22 testDialogCentering("vertical-rl", "", "", "tall viewport", 40, 100); 23 testDialogCentering("vertical-lr", "", "", "tall viewport", 40, 100); 24 25 testDialogCentering("vertical-rl", "", "horizontal-tb", "tall viewport", 40, 100); 26 testDialogCentering("vertical-lr", "", "horizontal-tb", "tall viewport", 40, 100); 27 28 testDialogCentering("horizontal-tb", "vertical-rl", "", "tall viewport", 40, 100); 29 testDialogCentering("vertical-rl", "horizontal-tb", "", "tall viewport", 40, 100); 30 31 testDialogCentering("horizontal-tb", "vertical-rl", "horizontal-tb", "tall viewport", 40, 100); 32 testDialogCentering("vertical-rl", "horizontal-tb", "vertical-rl", "tall viewport", 40, 100); 33 34 function testDialogCentering(writingMode, containerWritingMode, dialogWritingMode, label, iframeWidth, iframeHeight) { 35 const dialogSizesToTest = [["", ""], [dialogWidth.toString()+'px', dialogHeight.toString()+'px']]; 36 for (const dialogSizes of dialogSizesToTest) { 37 const isDefaultSize = dialogSizes[0] == ""; 38 // This test doesn't make sense if the dialog sizes are default 39 if (isDefaultSize && label == "dialog and viewport match") { 40 continue; 41 } 42 43 async_test(t => { 44 const iframe = document.createElement("iframe"); 45 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]}`; 46 iframe.width = iframeWidth; 47 iframe.height = iframeHeight; 48 iframe.onload = t.step_func_done(() => { 49 const dialog = iframe.contentDocument.querySelector("dialog"); 50 const dialogRect = dialog.getBoundingClientRect(); 51 52 const expectedLeftOffset = iframeWidth / 2 - dialogRect.width / 2; 53 const expectedTopOffset = Math.max(iframeHeight / 2 - dialogRect.height / 2, 0); 54 55 if (isDefaultSize) { 56 assert_approx_equals(dialogRect.left, expectedLeftOffset, 1/60); 57 assert_approx_equals(dialogRect.top, expectedTopOffset, 1/60); 58 } else { 59 assert_equals(dialogRect.left, expectedLeftOffset); 60 assert_equals(dialogRect.top, expectedTopOffset); 61 } 62 }); 63 document.body.appendChild(iframe); 64 }, writingMode + (containerWritingMode ? ` (container ${containerWritingMode})` : "") + 65 (dialogWritingMode ? ` (dialog ${dialogWritingMode})` : "") + `: ${label}` + `, default-sizes: ${isDefaultSize}`); 66 67 } 68 } 69 </script>