diff options
Diffstat (limited to 'testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0')
12 files changed, 540 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/dialog-display.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/dialog-display.html new file mode 100644 index 0000000000..48b0e33d94 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/dialog-display.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>dialog: display</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + dialog { position: static } +</style> +<dialog open id=dialog></dialog> +<script> +test(function() { + assert_equals(getComputedStyle(document.getElementById('dialog')).display, 'block'); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/dialog.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/dialog.html new file mode 100644 index 0000000000..3588e03670 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/dialog.html @@ -0,0 +1,115 @@ +<!doctype html> +<title>The dialog element</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + #ref-element { + padding-top: 1em; + background-color: white; + color: black; + border: solid; + } +</style> +<!-- +HTML used to have a style rule with `@media screen and (max-width: 540px)`. +That was removed in https://github.com/whatwg/html/pull/2459 +--> +<div><iframe style="width: 540px" src="support/dialog-framed.html"></iframe></div> +<div><iframe style="width: 538px" src="support/dialog-framed.html"></iframe></div> +<div id=ref-element></div> +<script> +setup(() => { + const refStyle = getComputedStyle(document.getElementById('ref-element')); + window.ref1em = refStyle.paddingTop; + window.refWhite = refStyle.backgroundColor; + window.refBlack = refStyle.color; + window.refMediumBorder = refStyle.borderTopWidth; + window.iframeHeight = 150; + const bodyTopMargin = 8; + window.dialogSize = parseFloat(ref1em) * 2 + parseFloat(refMediumBorder) * 2; + window.normalBottomDistance = iframeHeight - bodyTopMargin - dialogSize; +}, {explicit_done: true}); + +onload = () => { + for (let iframe of document.querySelectorAll('iframe')) { + const win = iframe.contentWindow; + const styleAttr = iframe.getAttribute('style'); + const iframeWidth = parseInt(styleAttr.split(' ')[1]); + const horizontalDistance = iframeWidth / 2 - dialogSize / 2; + const verticalDistance = iframeHeight / 2 - dialogSize / 2; + test(() => { + const style = win.getComputedStyle(win.dialogClosed); + assert_equals(style.position, 'absolute', 'position'); + assert_equals(style.display, 'none', 'display'); + assert_equals(style.overflow, 'visible', 'overflow'); + assert_equals(style.top, 'auto', 'top'); + assert_equals(style.right, '0px', 'right'); + assert_equals(style.bottom, 'auto', 'bottom'); + assert_equals(style.left, '0px', 'left'); + assert_equals(style.width, 'fit-content', 'width'); + assert_equals(style.height, 'fit-content', 'height'); + assert_equals(style.maxWidth, 'none', 'max-width'); + assert_equals(style.maxHeight, 'none', 'max-height'); + assert_equals(style.marginTop, 'auto', 'marginTop'); + assert_equals(style.marginRight, 'auto', 'marginRight'); + assert_equals(style.marginBottom, 'auto', 'marginBottom'); + assert_equals(style.marginLeft, 'auto', 'marginLeft'); + assertCommon(style); + }, `Closed dialog in ${styleAttr} iframe`); + + test(() => { + const style = win.getComputedStyle(win.dialogOpen); + assert_equals(style.position, 'absolute', 'position'); + assert_equals(style.display, 'block', 'display'); + assert_equals(style.overflow, 'visible', 'overflow'); + assert_equals(style.top, '8px', 'top'); + assert_equals(style.right, '0px', 'right'); + assert_equals(style.bottom, normalBottomDistance + 'px', 'bottom'); + assert_equals(style.left, '0px', 'left'); + assert_equals(style.width, '0px', 'width'); + assert_equals(style.height, '0px', 'height'); + assert_equals(style.maxWidth, 'none', 'max-width'); + assert_equals(style.maxHeight, 'none', 'max-height'); + assert_equals(style.marginTop, '0px', 'marginTop'); + assert_equals(style.marginRight, horizontalDistance + 'px', 'marginRight'); + assert_equals(style.marginBottom, '0px', 'marginBottom'); + assert_equals(style.marginLeft, horizontalDistance + 'px', 'marginLeft'); + assertCommon(style); + }, `Open dialog in ${styleAttr} iframe`); + + test(() => { + const style = win.getComputedStyle(win.dialogModal); + assert_equals(style.position, 'fixed', 'position'); + assert_equals(style.display, 'block', 'display'); + assert_equals(style.overflow, 'auto', 'overflow'); + assert_equals(style.top, '0px', 'top'); + assert_equals(style.right, '0px', 'right'); + assert_equals(style.bottom, '0px', 'bottom'); + assert_equals(style.left, '0px', 'left'); + assert_equals(style.width, '0px', 'width'); + assert_equals(style.height, '0px', 'height'); + assert_equals(style.maxWidth, 'calc(100% - 38px)', 'max-width'); + assert_equals(style.maxHeight, 'calc(100% - 38px)', 'max-height'); + assert_equals(style.marginTop, verticalDistance + 'px', 'marginTop'); + assert_equals(style.marginRight, horizontalDistance + 'px', 'marginRight'); + assert_equals(style.marginBottom, verticalDistance + 'px', 'marginBottom'); + assert_equals(style.marginLeft, horizontalDistance + 'px', 'marginLeft'); + assertCommon(style); + }, `Modal dialog in ${styleAttr} iframe`); + } + done(); +}; + +function assertCommon(style) { + assert_equals(style.borderTopStyle, 'solid', 'borderTopStyle'); + assert_equals(style.borderRightStyle, 'solid', 'borderRightStyle'); + assert_equals(style.borderBottomStyle, 'solid', 'borderBottomStyle'); + assert_equals(style.borderLeftStyle, 'solid', 'borderLeftStyle'); + assert_equals(style.paddingTop, ref1em, 'paddingTop'); + assert_equals(style.paddingRight, ref1em, 'paddingRight'); + assert_equals(style.paddingBottom, ref1em, 'paddingBottom'); + assert_equals(style.paddingLeft, ref1em, 'paddingLeft'); + assert_equals(style.backgroundColor, refWhite, 'backgroundColor'); + assert_equals(style.color, refBlack, 'color'); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/div-align-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/div-align-ref.html new file mode 100644 index 0000000000..da8e4d0dc1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/div-align-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +.test { width: 50px; background-color: yellow; } +.center { text-align: center; } +.center .test { margin: 0 auto; } +.left { text-align: left; } +.left .test { margin-right: auto; } +.right { text-align: right; } +.right .test { margin-left: auto; } +.rtl { direction: rtl; } +.ltr { direction: ltr; } +.left .margin { margin-left: 1em; } +.right .margin { margin-right: 1em; } +</style> +</head> +<body> +<!-- Centered tests --> +<div class=center> +<div class=test>t א</div> +<div class="test rtl">t א</div> +<div class="test margin">t א</div> +</div> + +<div class=center> +<div class="test left">t א</div> +<div class="test right">t א</div> +</div> + +<div class=left> +<div class=center> +<div class=test>t א</div> +</div> +</div> + +<!-- Left-aligned tests --> +<div class=left> +<div class=test>t א</div> +<div class="test rtl">t א</div> +<div class="test margin">t א</div> +</div> + +<div class="left rtl"> +<div class=test>t א</div> +<div class="test ltr">t א</div> +<div class="test margin">t א</div> +</div> + +<div class=left> +<div class="test center">t א</div> +<div class="test right">t א</div> +</div> + +<!-- Right-aligned tests --> +<div class=right> +<div class=test>t א</div> +<div class="test rtl">t א</div> +<div class="test margin">t א</div> +</div> + +<div class="right rtl"> +<div class=test>t א</div> +<div class="test ltr">t א</div> +<div class="test margin">t א</div> +</div> + +<div class=right> +<div class="test left">t א</div> +<div class="test center">t א</div> +</div> + +</body> +</html> + diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/div-align.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/div-align.html new file mode 100644 index 0000000000..b96fbaeda1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/div-align.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<link rel="match" href="div-align-ref.html"> +<style> +.test { width: 50px; background-color: yellow; } +.rtl { direction: rtl; } +.ltr { direction: ltr; } +[align=left] .margin { margin-left: 1em } +[align=right] .margin { margin-right: 1em } +</style> +</head> +<body> +<!-- Centered tests --> +<div align=center> +<div class=test>t א</div> +<div class="test rtl">t א</div> +<div class="test margin">t א</div> +</div> + +<div align=center> +<div class=test align=left>t א</div> +<div class=test align=right>t א</div> +</div> + +<div align=left> +<div align=center> +<div class=test>t א</div> +</div> +</div> + +<!-- Left-aligned tests --> +<div align=left> +<div class=test>t א</div> +<div class="test rtl">t א</div> +<div class="test margin">t א</div> +</div> + +<div align=left class=rtl> +<div class=test>t א</div> +<div class="test ltr">t א</div> +<div class="test margin">t א</div> +</div> + +<div align=left> +<div class=test align=center>t א</div> +<div class=test align=right>t א</div> +</div> + +<!-- Right-aligned tests --> +<div align=right> +<div class=test>t א</div> +<div class="test rtl">t א</div> +<div class="test margin">t א</div> +</div> + +<div align=right class=rtl> +<div class=test>t א</div> +<div class="test ltr">t א</div> +<div class="test margin">t א</div> +</div> + +<div align=right> +<div class=test align=left>t א</div> +<div class=test align=center>t א</div> +</div> + +</body> +</html> + diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/figure-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/figure-ref.html new file mode 100644 index 0000000000..a87141be11 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/figure-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>The figure element</title> +<link rel=author title=Ms2ger href=ms2ger@gmail.com> +<link rel=help href=https://html.spec.whatwg.org/multipage/#the-figure-element> +<style> +body > div { margin: 1em 40px; } +</style> +<div> +<div>Caption</div> +Figure +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/figure.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/figure.html new file mode 100644 index 0000000000..943f38c3e0 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/figure.html @@ -0,0 +1,9 @@ +<!doctype html> +<title>The figure element</title> +<link rel="match" href="figure-ref.html"> +<link rel=author title=Ms2ger href=ms2ger@gmail.com> +<link rel=help href=https://html.spec.whatwg.org/multipage/#the-figure-element> +<figure> +<figcaption>Caption</figcaption> +Figure +</figure> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/form-margin-quirk.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/form-margin-quirk.html new file mode 100644 index 0000000000..7f6618bb78 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/form-margin-quirk.html @@ -0,0 +1,20 @@ +<!-- quirks --> +<title>form margin quirk</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +form { writing-mode: vertical-lr; } +#ref { margin: 0 1em 0 0; } +</style> +<form id=form></form> +<div id=ref></div> +<script> +test(() => { + const formStyle = getComputedStyle(document.getElementById('form')); + const refStyle = getComputedStyle(document.getElementById('ref')); + assert_equals(formStyle.marginTop, refStyle.marginTop, 'marginTop'); + assert_equals(formStyle.marginRight, refStyle.marginRight, 'marginRight'); + assert_equals(formStyle.marginBottom, refStyle.marginBottom, 'marginBottom'); + assert_equals(formStyle.marginLeft, refStyle.marginLeft, 'marginLeft'); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/search-styles-iso-8859-8.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/search-styles-iso-8859-8.html new file mode 100644 index 0000000000..343e97f504 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/search-styles-iso-8859-8.html @@ -0,0 +1,54 @@ +<!doctype html> +<meta charset="ISO-8859-8"> +<title>default styles for the search element, ISO-8859-8</title> +<meta name="viewport" content="width=device-width"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/rendering/support/test-ua-stylesheet.js"></script> +<style> +/* Specify this bogus namespace, so the rules in this stylesheet only apply to the `fakeClone`d elements in #refs, not the HTML elements in #tests. */ +@namespace url(urn:not-html); + +address, blockquote, center, dialog, div, figure, figcaption, footer, form, +header, hr, legend, listing, main, p, plaintext, pre, search, xmp { + display: block; +} + +address, blockquote, center, div, figure, figcaption, footer, form, header, hr, +legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2, +h3, h4, h5, h6, hgroup, nav, section, search, table, caption, colgroup, col, +thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, output, +[dir=ltr i], [dir=rtl i], [dir=auto i], * /* only apply to the bogus namespace */ { + unicode-bidi: isolate; +} + +</style> + +<div id="log"></div> + +<div id="tests"> + <search></search> +</div> + +<div id="refs"></div> + +<script> + test(() => { + assert_equals(document.characterSet, "ISO-8859-8") + }, "Verify document.characterSet is ISO-8859-8"); + + const props = [ + 'display', + 'margin-top', + 'margin-right', + 'margin-bottom', + 'margin-left', + 'padding-top', + 'padding-right', + 'padding-bottom', + 'padding-left', + 'unicode-bidi', + ]; + runUAStyleTests(props); + +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/search-styles.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/search-styles.html new file mode 100644 index 0000000000..8c8badd170 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/search-styles.html @@ -0,0 +1,49 @@ +<!doctype html> +<title>default styles for the search element</title> +<meta name="viewport" content="width=device-width"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/rendering/support/test-ua-stylesheet.js"></script> +<style> +/* Specify this bogus namespace, so the rules in this stylesheet only apply to the `fakeClone`d elements in #refs, not the HTML elements in #tests. */ +@namespace url(urn:not-html); + +address, blockquote, center, dialog, div, figure, figcaption, footer, form, +header, hr, legend, listing, main, p, plaintext, pre, search, xmp { + display: block; +} + +address, blockquote, center, div, figure, figcaption, footer, form, header, hr, +legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2, +h3, h4, h5, h6, hgroup, nav, section, search, table, caption, colgroup, col, +thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, output, +[dir=ltr i], [dir=rtl i], [dir=auto i] { + unicode-bidi: isolate; +} + +</style> + +<div id="log"></div> + +<div id="tests"> + <search></search> +</div> + +<div id="refs"></div> + +<script> + const props = [ + 'display', + 'margin-top', + 'margin-right', + 'margin-bottom', + 'margin-left', + 'padding-top', + 'padding-right', + 'padding-bottom', + 'padding-left', + 'unicode-bidi', + ]; + runUAStyleTests(props); + +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-focusable.tentative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-focusable.tentative.html new file mode 100644 index 0000000000..b6d2449e89 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-focusable.tentative.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title>CSS Test (Display): <slot> elements should be focusable</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2632"> +<link rel="help" href="https://github.com/whatwg/html/issues/1837"> +<link rel="help" href="https://github.com/whatwg/html/pull/9425"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1366037"> +<!-- + + This requirement is not particularly clear from current specs, + so this test is tentative. See issues above. + +--> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<body> + +<script> + + function do_test(slot_style, description) { + test( + function() { + let host = document.createElement("div"); + document.body.appendChild(host); + var root = host.attachShadow({mode:"open"}); + root.innerHTML = ` + <style> + slot { --test-value: slot-not-focused; } + slot:focus { --test-value: slot-is-focused; } + </style> + <slot tabindex="1" style="${slot_style}"></slot> + `; + let slot = root.querySelector("slot"); + let cs = getComputedStyle(slot); + assert_not_equals(root.activeElement, slot, "precondition"); + assert_equals(cs.getPropertyValue("--test-value"), "slot-not-focused", "precondition (style)"); + slot.focus(); + assert_equals(root.activeElement, slot, "slot is now focused"); + assert_equals(cs.getPropertyValue("--test-value"), "slot-is-focused", "slot is now focused (style)"); + document.body.removeChild(host); + }, `slot element with ${description} should be focusable`); + } + + do_test("display: block", "display: block"); + do_test("", "default style"); + +</script> + diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-tabbable.tentative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-tabbable.tentative.html new file mode 100644 index 0000000000..22c2324d02 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-tabbable.tentative.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<title>CSS Test (Display): <slot> elements should be tabbable</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2632"> +<link rel="help" href="https://github.com/whatwg/html/issues/1837"> +<link rel="help" href="https://github.com/whatwg/html/pull/9425"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1366037"> +<!-- + + This requirement is not particularly clear from current specs, + so this test is tentative. See issues above. + +--> +<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> + +<body> + +<div id="before" tabindex="1" style="height: 10px"></div> + +<script> + + function do_test(slot_style, description) { + promise_test( + async () => { + let before = document.getElementById("before"); + before.focus(); + let host = document.createElement("div"); + document.body.appendChild(host); + var root = host.attachShadow({mode:"open"}); + root.innerHTML = ` + <style> + slot { --test-value: slot-not-focused; } + slot:focus { --test-value: slot-is-focused; } + </style> + <slot tabindex="1" style="${slot_style}"></slot> + `; + let slot = root.querySelector("slot"); + let cs = getComputedStyle(slot); + assert_equals(document.activeElement, before, "precondition"); + assert_not_equals(root.activeElement, slot, "precondition"); + assert_equals(cs.getPropertyValue("--test-value"), "slot-not-focused", "precondition (style)"); + await test_driver.send_keys(before, "\uE004"); + assert_equals(root.activeElement, slot, "slot is now focused"); + assert_equals(cs.getPropertyValue("--test-value"), "slot-is-focused", "slot is now focused (style)"); + document.body.removeChild(host); + }, `slot element with ${description} should be focusable`); + } + + do_test("display: block", "display: block"); + do_test("", "default style"); + +</script> + diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/support/dialog-framed.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/support/dialog-framed.html new file mode 100644 index 0000000000..f9c414c246 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/support/dialog-framed.html @@ -0,0 +1,13 @@ +<!doctype html> +<style> + html { color: red } +</style> +<dialog id=dialog-closed></dialog> +<dialog id=dialog-open open></dialog> +<dialog id=dialog-modal></dialog> +<script> +window.dialogClosed = document.getElementById('dialog-closed'); +window.dialogOpen = document.getElementById('dialog-open'); +window.dialogModal = document.getElementById('dialog-modal'); +dialogModal.showModal(); +</script> |