diff options
Diffstat (limited to 'testing/web-platform/tests/html/rendering/non-replaced-elements')
319 files changed, 8238 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> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change-ref.html new file mode 100644 index 0000000000..478b8db485 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change-ref.html @@ -0,0 +1,2 @@ +<!doctype html> +<input type="datetime-local"> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change.html new file mode 100644 index 0000000000..f8590ee561 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change.html @@ -0,0 +1,9 @@ +<!doctype html> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1797139"> +<link rel="match" href="datetime-dynamic-type-change-ref.html"> +<input type="date"> +<script> + onload = function() { + document.querySelector("input").type = "datetime-local"; + } +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-computed.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-computed.html new file mode 100644 index 0000000000..1bee40359a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-computed.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>used value and computed value of 'line-height' on input elements as text entry widgets</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-input-element-as-a-text-entry-widget"> +<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"> +<link rel="help" href="https://drafts.css-houdini.org/css-typed-om/#computed-stylepropertymapreadonly-objects"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + input { line-height: 1px; } +</style> +<p><input type=text value=text> +<p><input type=tel value=tel> +<p><input type=search value=search> +<p><input type=url value=url> +<p><input type=email value=email> +<p><input type=password value=password></p> +<script> +const inputs = document.querySelectorAll('input'); +for (const input of inputs) { + test(() => { + const usedLineHeight = getComputedStyle(input).lineHeight; + assert_not_equals(usedLineHeight, '1px', 'usedLineHeight'); + assert_not_equals(usedLineHeight, 'normal', 'usedLineHeight'); + }, `getComputedStyle(<input type=${input.type}>).lineHeight should return a used value that is no smaller than 'normal' (but should not literally be 'normal')`); + test(() => { + const computedLineHeight = input.computedStyleMap().get('line-height'); + assert_equals(computedLineHeight.value, 1, 'computedLineHeight.value'); + assert_equals(computedLineHeight.unit, 'px', 'computedLineHeight.unit'); + }, `<input type=${input.type}>.computedStyleMap().get('line-height') should not be affected by the used value clamping`); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-ref.html new file mode 100644 index 0000000000..abf50b8728 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>Reference for 'line-height' smaller than 'normal' on input elements as text entry widgets</title> +<style> + input { font-size: 60px; width: 240px; } + .appearance-none { appearance: none; } +</style> +<p><input type=text value=text> <input type=text value=text class=appearance-none> +<p><input type=tel value=tel> <input type=tel value=tel class=appearance-none> +<p><input type=search value=search> <input type=search value=search class=appearance-none> +<p><input type=url value=url> <input type=url value=url class=appearance-none> +<p><input type=email value=email> <input type=email value=email class=appearance-none> +<p><input type=password value=password> <input type=password value=password class=appearance-none> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height.html new file mode 100644 index 0000000000..bfcd3665be --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>'line-height' smaller than 'normal' on input elements as text entry widgets</title> +<link rel="match" href="input-line-height-ref.html"> +<style> + input { font-size: 60px; line-height: 40px; width: 240px; } + .appearance-none { appearance: none; } +</style> +<p><input type=text value=text> <input type=text value=text class=appearance-none> +<p><input type=tel value=tel> <input type=tel value=tel class=appearance-none> +<p><input type=search value=search> <input type=search value=search class=appearance-none> +<p><input type=url value=url> <input type=url value=url class=appearance-none> +<p><input type=email value=email> <input type=email value=email class=appearance-none> +<p><input type=password value=password> <input type=password value=password class=appearance-none> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height-ref.html new file mode 100644 index 0000000000..856146dec4 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height-ref.html @@ -0,0 +1,2 @@ +<!doctype html> +<input placeholder=Foo> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height.html new file mode 100644 index 0000000000..7af4e65b09 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>line-height has no effect on placeholder</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1714631"> +<link rel="match" href="input-placeholder-line-height-ref.html"> +<style> + input::placeholder { + line-height: 0; + } +</style> +<input placeholder=Foo> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/placeholder-opacity-default.tentative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/placeholder-opacity-default.tentative.html new file mode 100644 index 0000000000..39ad44cfc0 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/placeholder-opacity-default.tentative.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>Placeholder Test: opacity default value</title> + <link rel="author" title="Karl Dubost" href="mailto:kdubost@mozilla.com" + /> + <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#placeholder-pseudo" + /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <input + id="opacity" + placeholder="::placeholder should have default opacity: 1" + /> + <script> + test(function () { + var target = document.getElementById("opacity"); + assert_equals(getComputedStyle(target, '::placeholder').opacity, "1"); + }, "Default opacity value is '1'"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/resets.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/resets.html new file mode 100644 index 0000000000..db21188ee3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/resets.html @@ -0,0 +1,118 @@ +<!doctype html> +<title>default style resets</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> +/* Have some non-initial values on the parent so we can tell the difference whether the UA stylesheet uses 'initial' keyword. */ +#tests, #refs { + letter-spacing: 5px; + word-spacing: 5px; + line-height: 5px; + text-transform: uppercase; + text-indent: 5px; + text-shadow: 0 0 5px transparent; + text-align: right; +} +</style> +<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); + +input, select, button, textarea { + letter-spacing: initial; + word-spacing: initial; + line-height: initial; + text-transform: initial; + text-indent: initial; + text-shadow: initial; +} +input, select, textarea { + text-align: initial; +} +input[type=reset i], input[type=button i], input[type=submit i], button { + text-align: center; +} +input[type=radio i], input[type=checkbox i], input[type=reset i], input[type=button i], +input[type=submit i], input[type=color i], input[type=search i], select, button { + box-sizing: border-box; +} +input, button { + display: inline-block; +} +input:not([type=image i], [type=range i], [type=checkbox i], [type=radio i]) { + overflow: clip; + overflow-clip-margin: 0; +} +/* in spec prose: */ select, textarea, meter, progress { + display: inline-block; +} +input[type=hidden i] { display: none !important; } +marquee { + text-align: initial; +} +table { display: table; box-sizing: border-box; } +caption { display: table-caption; } +colgroup, colgroup[hidden] { display: table-column-group; } +col, col[hidden] { display: table-column; } +thead, thead[hidden] { display: table-header-group; } +tbody, tbody[hidden] { display: table-row-group; } +tfoot, tfoot[hidden] { display: table-footer-group; } +tr, tr[hidden] { display: table-row; } +td, th { display: table-cell; } +table { + text-indent: initial; +} +</style> + +<div id="tests"> + <input type="hidden"> + <input type="text"> + <input type="search"> + <input type="tel"> + <input type="url"> + <input type="email"> + <input type="password"> + <input type="date"> + <input type="month"> + <input type="week"> + <input type="time"> + <input type="datetime-local"> + <input type="number"> + <input type="range"> + <input type="color"> + <input type="checkbox"> + <input type="radio"> + <input type="file"> + <input type="submit"> + <input type="image"> + <input type="reset"> + <input type="button"> + <select><optgroup><option></select> + <select multiple></select> + <optgroup></optgroup> + <option></option> + <button></button> + <textarea></textarea> + <table><tbody><tr><td></table> + <marquee></marquee> +</div> + +<div id="refs"></div> + +<script> + const props = ['letter-spacing', + 'word-spacing', + 'line-height', + 'text-transform', + 'text-indent', + 'text-shadow', + 'text-align', + 'display', + 'overflow', + 'overflow-clip-margin', + 'box-sizing']; + runUAStyleTests(props); + +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-fixedpos-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-fixedpos-crash.html new file mode 100644 index 0000000000..47046f6c25 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-fixedpos-crash.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel=author href="https://mozilla.org" title="Mozilla"> +<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1741776"> +<style> +#a { + rotate: 1deg 1 0 44; + filter: drop-shadow(81px 6px 0px red); +} +</style> +<script> +window.onload = function() { + document.getElementById("b").appendChild(document.getElementById("c")); +} +</script> +<select id="a" multiple="multiple"> + <option id="b">x</option> +</select> +<div id="c" style="position: fixed; top: 0; left: 0;"> + x +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001-ref.html new file mode 100644 index 0000000000..c59a6e1d98 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001-ref.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Reference for sizing of select elements, with wide vs. empty option selected</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + select { + color: transparent; + margin: 1px; + } + div.customBorder > select { + /* This class is to let us test select elements *without* native theming + (for browsers that have both native and non-native controls): */ + border: 3px solid black; + } + </style> +</head> +<body> + <div> + <select> + <option>some wide option</option> + </select> + <br> + <select> + <option>some wide option</option> + </select> + <br> + <select> + <option>some wide option</option> + </select> + <br> + <select> + <option>some wide option</option> + </select> + </div> + + <!-- This is the same as above, but now with a custom border on the + select elements: --> + <div class="customBorder"> + <select> + <option>some wide option</option> + </select> + <br> + <select> + <option>some wide option</option> + </select> + <br> + <select> + <option>some wide option</option> + </select> + <br> + <select> + <option>some wide option</option> + </select> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001.html new file mode 100644 index 0000000000..e8db3eae1d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Test for sizing of select elements, with wide vs. empty option selected</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#list-box"> + <link rel="match" href="select-sizing-001-ref.html"> + <style> + select { + color: transparent; + margin: 1px; + } + div.customBorder > select { + /* This class is to let us test select elements *without* native theming + (for browsers that have both native and non-native controls): */ + border: 3px solid black; + } + </style> +</head> +<body> + <div> + <!-- Wide thing is 2nd, and not selected: --> + <select> + <option></option> + <option>some wide option</option> + </select> + <br> + <!-- Wide thing is 2nd, and selected: --> + <select> + <option></option> + <option selected>some wide option</option> + </select> + <br> + <!-- Wide thing is 1st, and selected (implicitly): --> + <select> + <option>some wide option</option> + <option></option> + </select> + <br> + <!-- Wide thing is 1st, and not selected: --> + <select> + <option>some wide option</option> + <option selected></option> + </select> + </div> + + <!-- This is the same as above, but now with a custom border on the + select elements: --> + <div class="customBorder"> + <!-- Wide thing is 2nd, and not selected: --> + <select> + <option></option> + <option>some wide option</option> + </select> + <br> + <!-- Wide thing is 2nd, and selected: --> + <select> + <option></option> + <option selected>some wide option</option> + </select> + <br> + <!-- Wide thing is 1st, and selected (implicitly): --> + <select> + <option>some wide option</option> + <option></option> + </select> + <br> + <!-- Wide thing is 1st, and not selected: --> + <select> + <option>some wide option</option> + <option selected></option> + </select> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform-ref.html new file mode 100644 index 0000000000..5dc26a78db --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<body> + <span>THIS TEXT SHOULD BE UPPER-CASE.</span><br /> + + <input type="text" value="this text should be lower-case."><br /> + + <select> + <option>this text should be lower-case.</option> + </select><br /> + <select multiple> + <option>this text should be lower-case.</option> + </select><br /> + <select multiple> + <optgroup label="this text should be lower-case."> + <option>this text should be lower-case.</option> + </optgroup> + </select><br /> + + <select> + <option>THIS TEXT SHOULD BE UPPER-CASE.</option> + </select><br /> + <select multiple> + <option>THIS TEXT SHOULD BE UPPER-CASE.</option> + </select><br /> + <select multiple> + <optgroup label="THIS TEXT SHOULD BE UPPER-CASE."> + <option>THIS TEXT SHOULD BE UPPER-CASE.</option> + </optgroup> + </select><br /> + + <button>this text should be lower-case.</button><br /> + + <textarea>this text should be lower-case.</textarea><br /> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform.html new file mode 100644 index 0000000000..f57f092982 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <link rel="match" href="text-transform-ref.html"> +</head> +<body style="text-transform: uppercase;"> + <span>this text should be upper-case.</span><br /> + + <input type="text" value="this text should be lower-case."><br /> + + <select> + <option>this text should be lower-case.</option> + </select><br /> + <select multiple> + <option>this text should be lower-case.</option> + </select><br /> + <select multiple> + <optgroup label="this text should be lower-case."> + <option>this text should be lower-case.</option> + </optgroup> + </select><br /> + + <select style="text-transform: uppercase;"> + <option>this text should be upper-case.</option> + </select><br /> + <select multiple style="text-transform: uppercase;"> + <option>this text should be upper-case.</option> + </select><br /> + <select multiple style="text-transform: uppercase;"> + <optgroup label="this text should be upper-case."> + <option>this text should be upper-case.</option> + </optgroup> + </select><br /> + + <button>this text should be lower-case.</button><br /> + + <textarea>this text should be lower-case.</textarea><br /> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display-ref.html new file mode 100644 index 0000000000..8093efe5e8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display-ref.html @@ -0,0 +1,47 @@ +<!doctype html> +<html> +<title>Reference: toggle 'display' test</title> + +<div id="tests"> + <input type="hidden"> + <input type="text"> + <input type="text" value="a"> + <input type="search"> + <input type="search" value="a"> + <input type="tel"> + <input type="tel" value="123456789"> + <input type="url"> + <input type="url" value="http://a"> + <input type="email"> + <input type="email" value="a"> + <input type="password"> + <input type="password" value="a"> + <input type="date"> + <input type="month"> + <input type="week"> + <input type="time"> + <input type="datetime-local"> + <input type="number"> + <input type="range"> + <input type="color"> + <input type="checkbox"> + <input type="radio"> + <input type="file"> + <input type="submit"> + <input type="image"> + <input type="reset"> + <input type="button"> + <input type="button" value="a"> + <select><optgroup><option></select> + <select><optgroup><option>a</select> + <select multiple></select> + <select multiple><optgroup>a</optgroup><option>b</option></select> + <optgroup></optgroup> + <option></option> + <button></button> + <button>a</button> + <textarea></textarea> + <textarea>a</textarea> +</div> + +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display.html new file mode 100644 index 0000000000..127679b2ad --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display.html @@ -0,0 +1,64 @@ +<!doctype html> +<html class="reftest-wait"> +<title>toggle 'display' test</title> +<meta charset="utf-8"> +<link rel="match" href="toggle-display-ref.html"> + +<div id="tests"> + <input type="hidden"> + <input type="text"> + <input type="text" value="a"> + <input type="search"> + <input type="search" value="a"> + <input type="tel"> + <input type="tel" value="123456789"> + <input type="url"> + <input type="url" value="http://a"> + <input type="email"> + <input type="email" value="a"> + <input type="password"> + <input type="password" value="a"> + <input type="date"> + <input type="month"> + <input type="week"> + <input type="time"> + <input type="datetime-local"> + <input type="number"> + <input type="range"> + <input type="color"> + <input type="checkbox"> + <input type="radio"> + <input type="file"> + <input type="submit"> + <input type="image"> + <input type="reset"> + <input type="button"> + <input type="button" value="a"> + <select><optgroup><option></select> + <select><optgroup><option>a</select> + <select multiple></select> + <select multiple><optgroup>a</optgroup><option>b</option></select> + <optgroup></optgroup> + <option></option> + <button></button> + <button>a</button> + <textarea></textarea> + <textarea>a</textarea> +</div> + +<script> +window.onload = () => { + requestAnimationFrame(() => { + requestAnimationFrame(() => { + let tests = document.querySelector('#tests'); + tests.style.display = 'none'; + requestAnimationFrame(() => { + tests.style.display = ''; + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); +} +</script> + +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/hidden-elements.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/hidden-elements.html new file mode 100644 index 0000000000..e1bcf508e5 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/hidden-elements.html @@ -0,0 +1,52 @@ +<!doctype html> +<link rel=help href="https://html.spec.whatwg.org/#hidden-elements"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div hidden></div> +<embed hidden> +<embed hidden=until-found> +<script> +const kNotHiddenElementLocalNames = [ + "source", "track", +]; + +const kHiddenElementLocalNames = [ + "area", "base", "basefont", "datalist", "head", "link", "meta", "noembed", + "noframes", "param", "rp", "script", "style", "template", "title", +]; + +for (let name of kNotHiddenElementLocalNames) { + test(function() { + let element = document.createElement(name); + document.body.appendChild(element); + assert_equals(getComputedStyle(element).display, "inline"); + }, `${name} should not be hidden`); +} + +for (let name of kHiddenElementLocalNames) { + test(function() { + let element = document.createElement(name); + document.body.appendChild(element); + assert_equals(getComputedStyle(element).display, "none"); + }, `${name} should be hidden`); +} + +test(function() { + assert_equals(getComputedStyle(document.querySelector("div[hidden]")).display, "none"); +}, `div[hidden] element should be hidden`); + +test(function() { + const el = document.querySelector("embed[hidden='']"); + assert_equals(getComputedStyle(el).display, "inline"); + assert_equals(getComputedStyle(el).width, "0px"); + assert_equals(getComputedStyle(el).height, "0px"); +}, `embed[hidden=''] element should be inline 0x0`); + +test(function() { + const el = document.querySelector("embed[hidden='until-found']"); + assert_equals(getComputedStyle(el).display, "inline"); + assert_equals(getComputedStyle(el).width, "0px"); + assert_equals(getComputedStyle(el).height, "0px"); + assert_equals(getComputedStyle(el).contentVisibility, "visible"); +}, `embed[hidden='until-found'] element should be inline 0x0`); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/TODO-lists.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/TODO-lists.html new file mode 100644 index 0000000000..6d79efc384 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/TODO-lists.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<ol><div><li>A</div></ol> +<ol><div><li>A</div> <li>B</ol> +<ol><div><li>A</div><div><li>B</div></ol> +<ol reversed><div><li>A</div> <li>B</ol> +<ol><div style=display:list-item>A</div><li>B</ol> +<ol reversed><div style=display:list-item>A</div><li>B</ol> +<ol reversed> + <div><li>Two</li></div> + <li>One</li> + <li>Zero</li> +</ol> +<ol reversed> + <li>Three</li> + <li style="display: none"></li> + <li>Two</li> +</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/dir-type-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/dir-type-ref.html new file mode 100644 index 0000000000..710b39ceca --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/dir-type-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Test reference</title> +<dir> + <li>A +</dir> +<dir> + <li>B +</dir> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/dir-type.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/dir-type.html new file mode 100644 index 0000000000..d1f0ae3fe3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/dir-type.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset="utf-8"> +<title><dir> doesn't map the type and start attributes to CSS</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1831863"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.com" title="Mozilla"> +<link rel="match" href="dir-type-ref.html"> +<dir type="square"> + <li>A +</dir> +<dir type="decimal" start="5"> + <li>B +</dir> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-text-align.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-text-align.html new file mode 100644 index 0000000000..0fc01f275c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-text-align.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>text-align: match-parent on li</title> +<meta name="viewport" content="width=device-width"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<ul dir=rtl><li dir=ltr></li></ul> +<ul dir=ltr><li dir=rtl></li></ul> +<script> + test(() => { + const li = document.querySelector('li[dir=ltr]'); + assert_equals(getComputedStyle(li).textAlign, 'right'); + }, '<ul dir=rtl><li dir=ltr>'); + + test(() => { + const li = document.querySelector('li[dir=rtl]'); + assert_equals(getComputedStyle(li).textAlign, 'left'); + }, '<ul dir=ltr><li dir=rtl>'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported-ref.html new file mode 100644 index 0000000000..0de7ff329c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported-ref.html @@ -0,0 +1,45 @@ +<!doctype html> +<meta charset=utf-8> +<title>li@type: supported types</title> +<style> + .decimal { list-style-type: decimal; } + .lower-alpha { list-style-type: lower-alpha; } + .upper-alpha { list-style-type: upper-alpha; } + .lower-roman { list-style-type: lower-roman; } + .upper-roman { list-style-type: upper-roman; } + .disc { list-style-type: disc; } + .circle { list-style-type: circle; } + .square { list-style-type: square; } + .none { list-style-type: none; } +</style> +<li class="decimal">first item</li> +<li class="lower-alpha">second item</li> +<li class="upper-alpha">third item</li> +<li class="lower-roman">fourth item</li> +<li class="upper-roman">fifth item</li> +<li class="disc">sixth item</li> +<li class="circle">seventh item</li> +<li class="square">eighth item</li> +<li class="none">ninth item</li> +<ol> + <li class="decimal">first ordered item</li> + <li class="lower-alpha">second ordered item</li> + <li class="upper-alpha">third ordered item</li> + <li class="lower-roman">fourth ordered item</li> + <li class="upper-roman">fifth ordered item</li> + <li class="disc">sixth ordered item</li> + <li class="circle">seventh ordered item</li> + <li class="square">eighth ordered item</li> + <li class="none">ninth ordered item</li> +</ol> +<ul> + <li class="decimal">first unordered item</li> + <li class="lower-alpha">second unordered item</li> + <li class="upper-alpha">third unordered item</li> + <li class="lower-roman">fourth unordered item</li> + <li class="upper-roman">fifth unordered item</li> + <li class="disc">sixth unordered item</li> + <li class="circle">seventh unordered item</li> + <li class="square">eighth unordered item</li> + <li class="none">ninth unordered item</li> +</ul> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported-xhtml.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported-xhtml.xhtml new file mode 100644 index 0000000000..7a7640e03f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported-xhtml.xhtml @@ -0,0 +1,40 @@ +<?xml version="1.0" encoding="UTF-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>li@type: supported types</title> +<link rel="match" href="li-type-supported-ref.html"/> +</head> +<body> +<li type="1">first item</li> +<li type="a">second item</li> +<li type="A">third item</li> +<li type="i">fourth item</li> +<li type="I">fifth item</li> +<li type="disc">sixth item</li> +<li type="circle">seventh item</li> +<li type="square">eighth item</li> +<li type="none">ninth item</li> +<ol> + <li type="1">first ordered item</li> + <li type="a">second ordered item</li> + <li type="A">third ordered item</li> + <li type="i">fourth ordered item</li> + <li type="I">fifth ordered item</li> + <li type="disc">sixth ordered item</li> + <li type="circle">seventh ordered item</li> + <li type="square">eighth ordered item</li> + <li type="none">ninth ordered item</li> +</ol> +<ul> + <li type="1">first unordered item</li> + <li type="a">second unordered item</li> + <li type="A">third unordered item</li> + <li type="i">fourth unordered item</li> + <li type="I">fifth unordered item</li> + <li type="disc">sixth unordered item</li> + <li type="circle">seventh unordered item</li> + <li type="square">eighth unordered item</li> + <li type="none">ninth unordered item</li> +</ul> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported.html new file mode 100644 index 0000000000..ddd9024c11 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-supported.html @@ -0,0 +1,35 @@ +<!doctype html> +<meta charset=utf-8> +<title>li@type: supported types</title> +<link rel=match href=li-type-supported-ref.html> +<li type=1>first item</li> +<li type=a>second item</li> +<li type=A>third item</li> +<li type=i>fourth item</li> +<li type=I>fifth item</li> +<li type=disc>sixth item</li> +<li type=circle>seventh item</li> +<li type=square>eighth item</li> +<li type=none>ninth item</li> +<ol> + <li type=1>first ordered item</li> + <li type=a>second ordered item</li> + <li type=A>third ordered item</li> + <li type=i>fourth ordered item</li> + <li type=I>fifth ordered item</li> + <li type=disc>sixth ordered item</li> + <li type=circle>seventh ordered item</li> + <li type=square>eighth ordered item</li> + <li type=none>ninth ordered item</li> +</ol> +<ul> + <li type=1>first unordered item</li> + <li type=a>second unordered item</li> + <li type=A>third unordered item</li> + <li type=i>fourth unordered item</li> + <li type=I>fifth unordered item</li> + <li type=disc>sixth unordered item</li> + <li type=circle>seventh unordered item</li> + <li type=square>eighth unordered item</li> + <li type=none>ninth unordered item</li> +</ul> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-lower-alpha.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-lower-alpha.html new file mode 100644 index 0000000000..81babe7888 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-lower-alpha.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset=utf-8> +<title>li@type: unsupported type: lower-alpha</title> +<link rel=match href=li-type-unsupported-ref.html> +<li type=lower-alpha>first item</li> +<li type=LOWER-ALPHA>second item</li> +<ol> + <li type=lower-alpha>first ordered item</li> + <li type=LOWER-ALPHA>second ordered item</li> +</ol> +<ul> + <li type=lower-alpha>first unordered item</li> + <li type=LOWER-ALPHA>second unordered item</li> +</ul> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-lower-roman.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-lower-roman.html new file mode 100644 index 0000000000..e01cfdb72d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-lower-roman.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset=utf-8> +<title>li@type: unsupported type: lower-roman</title> +<link rel=match href=li-type-unsupported-ref.html> +<li type=lower-roman>first item</li> +<li type=LOWER-ROMAN>second item</li> +<ol> + <li type=lower-roman>first ordered item</li> + <li type=LOWER-ROMAN>second ordered item</li> +</ol> +<ul> + <li type=lower-roman>first unordered item</li> + <li type=LOWER-ROMAN>second unordered item</li> +</ul> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-ref.html new file mode 100644 index 0000000000..4fbc5aca97 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset=utf-8> +<title>li@type: unsupported types</title> +<li>first item</li> +<li>second item</li> +<ol> + <li>first ordered item</li> + <li>second ordered item</li> +</ol> +<ul> + <li>first unordered item</li> + <li>second unordered item</li> +</ul> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-upper-alpha.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-upper-alpha.html new file mode 100644 index 0000000000..2efb65dbda --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-upper-alpha.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset=utf-8> +<title>li@type: unsupported type: upper-alpha</title> +<link rel=match href=li-type-unsupported-ref.html> +<li type=upper-alpha>first item</li> +<li type=UPPER-ALPHA>second item</li> +<ol> + <li type=upper-alpha>first ordered item</li> + <li type=UPPER-ALPHA>second ordered item</li> +</ol> +<ul> + <li type=upper-alpha>first unordered item</li> + <li type=UPPER-ALPHA>second unordered item</li> +</ul> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-upper-roman.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-upper-roman.html new file mode 100644 index 0000000000..bd8dafc9c2 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/li-type-unsupported-upper-roman.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset=utf-8> +<title>li@type: unsupported type: upper-roman</title> +<link rel=match href=li-type-unsupported-ref.html> +<li type=upper-roman>first item</li> +<li type=UPPER-ROMAN>second item</li> +<ol> + <li type=upper-roman>first ordered item</li> + <li type=UPPER-ROMAN>second ordered item</li> +</ol> +<ul> + <li type=upper-roman>first unordered item</li> + <li type=UPPER-ROMAN>second unordered item</li> +</ul> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/lists-presentational-hints-ascii-case-insensitive.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/lists-presentational-hints-ascii-case-insensitive.html new file mode 100644 index 0000000000..396055f73b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/lists-presentational-hints-ascii-case-insensitive.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://html.spec.whatwg.org/#lists:presentational-hints"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#attribute-case"> +<meta name="assert" content="ul@type + li@type values are ASCII case-insensitive"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<ul type="circle"><li type="disc"></ul> +<ul type="circle"><li type="DiSc"></ul> +<ul type="circle"><li type="diſc"></ul> +<ul type="circle"><li type="square"></ul> +<ul type="circle"><li type="SqUaRe"></ul> +<ul type="circle"><li type="ſquare"></ul> +<script> +const li = document.querySelectorAll("li"); + +test(() => { + assert_equals(getComputedStyle(li[0]).getPropertyValue("list-style-type"), + "disc", "lowercase valid"); + assert_equals(getComputedStyle(li[1]).getPropertyValue("list-style-type"), + "disc", "mixed case valid"); + assert_equals(getComputedStyle(li[2]).getPropertyValue("list-style-type"), + "circle", "non-ASCII invalid"); +}, "keyword disc"); + +test(() => { + assert_equals(getComputedStyle(li[3]).getPropertyValue("list-style-type"), + "square", "lowercase valid"); + assert_equals(getComputedStyle(li[4]).getPropertyValue("list-style-type"), + "square", "mixed case valid"); + assert_equals(getComputedStyle(li[5]).getPropertyValue("list-style-type"), + "circle", "non-ASCII invalid"); +}, "keyword square"); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/lists-styles.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/lists-styles.html new file mode 100644 index 0000000000..a5f011cecc --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/lists-styles.html @@ -0,0 +1,228 @@ +<!doctype html> +<title>default styles and preshints for ol, ul, menu, li, dir, dl, dt, dd</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); + +dir, dd, dl, dt, menu, ol, ul { display: block; } +li { display: list-item; text-align: match-parent; } + +dir, dl, menu, ol, ul { margin-block-start: 1em; margin-block-end: 1em; } + +:is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) { + margin-block-start: 0; margin-block-end: 0; +} + +dd { margin-inline-start: 40px; } +dir, menu, ol, ul { padding-inline-start: 40px; } + +ol, ul, menu { counter-reset: list-item; } +ol { list-style-type: decimal; } + +dir, menu, ul { + list-style-type: disc; +} +:is(dir, menu, ol, ul) :is(dir, menu, ul) { + list-style-type: circle; +} +:is(dir, menu, ol, ul) :is(dir, menu, ol, ul) :is(dir, menu, ul) { + list-style-type: square; +} + +/* preshints */ +ol[type="1"], li[type="1"] { list-style-type: decimal; } +/* use classes due to lack of support for "s" annotation */ +ol[class=type-a], li[class=type-a] { list-style-type: lower-alpha; } +ol[class=type-A], li[class=type-A] { list-style-type: upper-alpha; } +ol[class=type-i], li[class=type-i] { list-style-type: lower-roman; } +ol[class=type-I], li[class=type-I] { list-style-type: upper-roman; } +ul[type=none i], li[type=none i] { list-style-type: none; } +ul[type=disc i], li[type=disc i] { list-style-type: disc; } +ul[type=circle i], li[type=circle i] { list-style-type: circle; } +ul[type=square i], li[type=square i] { list-style-type: square; } + +li[value="10"], li[value="10xyz"], li[value="10e10"] { counter-set: list-item 10; } +ol[start="10"], ol[start="10xyz"], ol[start="10e10"] { counter-reset: list-item 9; } +ol[reversed] { counter-reset: reversed(list-item); } +ol[reversed][start="20"], ol[reversed][start="20xyz"], ol[reversed][start="20e10"] { counter-reset: reversed(list-item) 21; } + +/* dir="" */ +[dir=ltr] { direction: ltr; } +[dir=rtl] { direction: rtl; } +</style> + +<div id="log"></div> + +<div id="tests"> + <li></li> + <dir> + <li></li> + </dir> + <dt></dt> + <dd></dd> + <dl> + <dt></dt> + <dd></dd> + </dl> + <menu> + <li></li> + </menu> + <ol> + <li></li> + </ol> + <ul> + <li></li> + </ul> + <dir data-skip><dir></dir></dir> + <dir data-skip><menu></menu></dir> + <dir data-skip><ul></ul></dir> + <menu data-skip><dir></dir></menu> + <menu data-skip><menu></menu></menu> + <menu data-skip><ul></ul></menu> + <ol data-skip><dir></dir></ol> + <ol data-skip><menu></menu></ol> + <ol data-skip><ul></ul></ol> + <ul data-skip><dir></dir></ul> + <ul data-skip><menu></menu></ul> + <ul data-skip><ul></ul></ul> + + <dir data-skip><dir data-skip><dir></dir></dir></dir> + <dir data-skip><dir data-skip><menu></menu></dir></dir> + <dir data-skip><dir data-skip><ul></ul></dir></dir> + <dir data-skip><menu data-skip><dir></dir></menu></dir> + <dir data-skip><menu data-skip><menu></menu></menu></dir> + <dir data-skip><menu data-skip><ul></ul></menu></dir> + <dir data-skip><ol data-skip><dir></dir></ol></dir> + <dir data-skip><ol data-skip><menu></menu></ol></dir> + <dir data-skip><ol data-skip><ul></ul></ol></dir> + <dir data-skip><ul data-skip><dir></dir></ul></dir> + <dir data-skip><ul data-skip><menu></menu></ul></dir> + <dir data-skip><ul data-skip><ul></ul></ul></dir> + + <menu data-skip><dir data-skip><dir></dir></dir></menu> + <menu data-skip><dir data-skip><menu></menu></dir></menu> + <menu data-skip><dir data-skip><ul></ul></dir></menu> + <menu data-skip><menu data-skip><dir></dir></menu></menu> + <menu data-skip><menu data-skip><menu></menu></menu></menu> + <menu data-skip><menu data-skip><ul></ul></menu></menu> + <menu data-skip><ol data-skip><dir></dir></ol></menu> + <menu data-skip><ol data-skip><menu></menu></ol></menu> + <menu data-skip><ol data-skip><ul></ul></ol></menu> + <menu data-skip><ul data-skip><dir></dir></ul></menu> + <menu data-skip><ul data-skip><menu></menu></ul></menu> + <menu data-skip><ul data-skip><ul></ul></ul></menu> + + <ol data-skip><dir data-skip><dir></dir></dir></ol> + <ol data-skip><dir data-skip><menu></menu></dir></ol> + <ol data-skip><dir data-skip><ul></ul></dir></ol> + <ol data-skip><menu data-skip><dir></dir></menu></ol> + <ol data-skip><menu data-skip><menu></menu></menu></ol> + <ol data-skip><menu data-skip><ul></ul></menu></ol> + <ol data-skip><ol data-skip><dir></dir></ol></ol> + <ol data-skip><ol data-skip><menu></menu></ol></ol> + <ol data-skip><ol data-skip><ul></ul></ol></ol> + <ol data-skip><ul data-skip><dir></dir></ul></ol> + <ol data-skip><ul data-skip><menu></menu></ul></ol> + <ol data-skip><ul data-skip><ul></ul></ul></ol> + + <ul data-skip><dir data-skip><dir></dir></dir></ul> + <ul data-skip><dir data-skip><menu></menu></dir></ul> + <ul data-skip><dir data-skip><ul></ul></dir></ul> + <ul data-skip><menu data-skip><dir></dir></menu></ul> + <ul data-skip><menu data-skip><menu></menu></menu></ul> + <ul data-skip><menu data-skip><ul></ul></menu></ul> + <ul data-skip><ol data-skip><dir></dir></ol></ul> + <ul data-skip><ol data-skip><menu></menu></ol></ul> + <ul data-skip><ol data-skip><ul></ul></ol></ul> + <ul data-skip><ul data-skip><dir></dir></ul></ul> + <ul data-skip><ul data-skip><menu></menu></ul></ul> + <ul data-skip><ul data-skip><ul></ul></ul></ul> + + <ol type="1"></ol> + <ul type="1"></ul> + <li type="1"></li> + <ol type="a" class="type-a"></ol> + <ul type="a" class="type-a"></ul> + <li type="a" class="type-a"></li> + <ol type="A" class="type-A"></ol> + <ul type="A" class="type-A"></ul> + <li type="A" class="type-A"></li> + <ol type="i" class="type-i"></ol> + <ul type="i" class="type-i"></ul> + <li type="i" class="type-i"></li> + <ol type="I" class="type-I"></ol> + <ul type="I" class="type-I"></ul> + <li type="I" class="type-I"></li> + <ol type="none"></ol> + <ul type="none"></ul> + <li type="none"></li> + <ol type="NONE"></ol> + <ul type="NONE"></ul> + <li type="NONE"></li> + <ol type="disc"></ol> + <ul type="disc"></ul> + <li type="disc"></li> + <ol type="DISC"></ol> + <ul type="DISC"></ul> + <li type="DISC"></li> + <ol type="circle"></ol> + <ul type="circle"></ul> + <li type="circle"></li> + <ol type="CIRCLE"></ol> + <ul type="CIRCLE"></ul> + <li type="CIRCLE"></li> + <ol type="square"></ol> + <ul type="square"></ul> + <li type="square"></li> + <ol type="SQUARE"></ol> + <ul type="SQUARE"></ul> + <li type="SQUARE"></li> + + <ol> + <li value="10"></li> + <li value="10xyz"></li> + <li value="10e10"></li> + <li value="xyz"></li> + </ol> + + <ol start="10"><li></li></ol> + <ol start="10xyz"><li></li></ol> + <ol start="10e10"><li></li></ol> + <ol start="xyz"><li></li></ol> + <ol reversed><li></li></ol> + <ol reversed start="20"><li></li></ol> + <ol reversed start="20xyz"><li></li></ol> + <ol reversed start="20e10"><li></li></ol> + <ol reversed start="xyz"><li></li></ol> + + <ul data-skip dir="rtl"><li dir="ltr"></li></ul> + <ul data-skip dir="ltr"><li dir="rtl"></li></ul> + +</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', + 'list-style-type', + 'counter-set', + 'counter-reset', + 'counter-increment', + 'text-align', + ]; + runUAStyleTests(props); + +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-display-contents-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-display-contents-ref.html new file mode 100644 index 0000000000..f9fce33313 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-display-contents-ref.html @@ -0,0 +1,8 @@ +<!doctype html> +<meta charset=utf-8> +<title>Reference for: display: contents; on <ol ...></title> +<style> + li { margin-left: 40px; list-style-type: decimal; } +</style> +<li value="1">The list item marker on this line should be "1."</li> +<li value="2">The list item marker on this line should be "2."</li> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-start-display-contents.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-start-display-contents.html new file mode 100644 index 0000000000..226570e935 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-start-display-contents.html @@ -0,0 +1,8 @@ +<!doctype html> +<meta charset=utf-8> +<title>display: contents; on <ol start></title> +<meta rel=match href=ol-display-contents-ref.html> +<ol start=5 style="display: contents"> + <li style="margin-left: 40px">The list item marker on this line should be "1."</li> + <li style="margin-left: 40px">The list item marker on this line should be "2."</li> +</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-start-reversed-display-contents.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-start-reversed-display-contents.html new file mode 100644 index 0000000000..dd6fff0fd8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-start-reversed-display-contents.html @@ -0,0 +1,8 @@ +<!doctype html> +<meta charset=utf-8> +<title>display: contents; on <ol start reversed></title> +<meta rel=match href=ol-display-contents-ref.html> +<ol start=5 reversed style="display: contents"> + <li style="margin-left: 40px">The list item marker on this line should be "1."</li> + <li style="margin-left: 40px">The list item marker on this line should be "2."</li> +</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported-ref.html new file mode 100644 index 0000000000..fb61db3261 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported-ref.html @@ -0,0 +1,25 @@ +<!doctype html> +<meta charset=utf-8> +<title>ol@type: supported types</title> +<style> +.decimal { + list-style-type: decimal; +} +.lower-alpha { + list-style-type: lower-alpha; +} +.upper-alpha { + list-style-type: upper-alpha; +} +.lower-roman { + list-style-type: lower-roman; +} +.upper-roman { + list-style-type: upper-roman; +} +</style> +<ol class=decimal><li>1<li>2</ol> +<ol class=lower-alpha><li>a<li>b</ol> +<ol class=upper-alpha><li>A<li>B</ol> +<ol class=lower-roman><li>i<li>ii</ol> +<ol class=upper-roman><li>I<li>II</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported-xhtml.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported-xhtml.xhtml new file mode 100644 index 0000000000..d7b949dab1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported-xhtml.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>ol@type: supported types</title> +<link rel="match" href="ol-type-supported-ref.html"/> +</head> +<body> +<ol type="1"><li>1</li><li>2</li></ol> +<ol type="a"><li>a</li><li>b</li></ol> +<ol type="A"><li>A</li><li>B</li></ol> +<ol type="i"><li>i</li><li>ii</li></ol> +<ol type="I"><li>I</li><li>II</li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported.html new file mode 100644 index 0000000000..86ed3be383 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-supported.html @@ -0,0 +1,9 @@ +<!doctype html> +<meta charset=utf-8> +<title>ol@type: supported types</title> +<link rel=match href=ol-type-supported-ref.html> +<ol type=1><li>1<li>2</ol> +<ol type=a><li>a<li>b</ol> +<ol type=A><li>A<li>B</ol> +<ol type=i><li>i<li>ii</ol> +<ol type=I><li>I<li>II</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-circle.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-circle.html new file mode 100644 index 0000000000..f3c52e43bd --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-circle.html @@ -0,0 +1,6 @@ +<!doctype html> +<meta charset=utf-8> +<title>ol@type: unsupported type: circle</title> +<link rel=match href=ol-type-unsupported-ref.html> +<ol type=circle><li>1<li>2</ol> +<ol type=CIRCLE><li>1<li>2</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-disc.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-disc.html new file mode 100644 index 0000000000..a0f41f3b1c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-disc.html @@ -0,0 +1,6 @@ +<!doctype html> +<meta charset=utf-8> +<title>ol@type: unsupported type: disc</title> +<link rel=match href=ol-type-unsupported-ref.html> +<ol type=disc><li>1<li>2</ol> +<ol type=DISC><li>1<li>2</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-invalid.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-invalid.html new file mode 100644 index 0000000000..6c1198ef50 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-invalid.html @@ -0,0 +1,6 @@ +<!doctype html> +<meta charset=utf-8> +<title>ol@type: unsupported type: invalid</title> +<link rel=match href=ol-type-unsupported-ref.html> +<ol type=disk><li>1<li>2</ol> +<ol type=DISK><li>1<li>2</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-lower-alpha.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-lower-alpha.html new file mode 100644 index 0000000000..2fd656100f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-lower-alpha.html @@ -0,0 +1,6 @@ +<!doctype html> +<meta charset=utf-8> +<title>ol@type: unsupported type: lower-alpha</title> +<link rel=match href=ol-type-unsupported-ref.html> +<ol type=lower-alpha><li>1<li>2</ol> +<ol type=LOWER-ALPHA><li>1<li>2</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-lower-roman.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-lower-roman.html new file mode 100644 index 0000000000..49f5b2888e --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-lower-roman.html @@ -0,0 +1,6 @@ +<!doctype html> +<meta charset=utf-8> +<title>ol@type: unsupported type: lower-roman</title> +<link rel=match href=ol-type-unsupported-ref.html> +<ol type=lower-roman><li>1<li>2</ol> +<ol type=LOWER-ROMAN><li>1<li>2</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-none.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-none.html new file mode 100644 index 0000000000..bf800e1b11 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-none.html @@ -0,0 +1,6 @@ +<!doctype html> +<meta charset=utf-8> +<title>ol@type: unsupported type: none</title> +<link rel=match href=ol-type-unsupported-ref.html> +<ol type=none><li>1<li>2</ol> +<ol type=NONE><li>1<li>2</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-ref.html new file mode 100644 index 0000000000..530f8ef6c7 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>ol@type: unsupported types</title> +<ol><li>1<li>2</ol> +<ol><li>1<li>2</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-round.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-round.html new file mode 100644 index 0000000000..10a573687b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-round.html @@ -0,0 +1,6 @@ +<!doctype html> +<meta charset=utf-8> +<title>ol@type: unsupported type: round</title> +<link rel=match href=ol-type-unsupported-ref.html> +<ol type=round><li>1<li>2</ol> +<ol type=ROUND><li>1<li>2</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-square.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-square.html new file mode 100644 index 0000000000..b3e8937fb3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-square.html @@ -0,0 +1,6 @@ +<!doctype html> +<meta charset=utf-8> +<title>ol@type: unsupported type: square</title> +<link rel=match href=ol-type-unsupported-ref.html> +<ol type=square><li>1<li>2</ol> +<ol type=SQUARE><li>1<li>2</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-upper-alpha.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-upper-alpha.html new file mode 100644 index 0000000000..6a1ff97dbf --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-upper-alpha.html @@ -0,0 +1,6 @@ +<!doctype html> +<meta charset=utf-8> +<title>ol@type: unsupported type: upper-latin</title> +<link rel=match href=ol-type-unsupported-ref.html> +<ol type=upper-alpha><li>1<li>2</ol> +<ol type=UPPER-ALPHA><li>1<li>2</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-upper-roman.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-upper-roman.html new file mode 100644 index 0000000000..04cf451c67 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ol-type-unsupported-upper-roman.html @@ -0,0 +1,6 @@ +<!doctype html> +<meta charset=utf-8> +<title>ol@type: unsupported type: upper-roman</title> +<link rel=match href=ol-type-unsupported-ref.html> +<ol type=upper-roman><li>1<li>2</ol> +<ol type=UPPER-ROMAN><li>1<li>2</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported-ref.html new file mode 100644 index 0000000000..59a0400cc8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported-ref.html @@ -0,0 +1,21 @@ +<!doctype html> +<meta charset=utf-8> +<title>ul@type: supported types</title> +<style> +.disc { + list-style-type: disc; +} +.circle { + list-style-type: circle; +} +.square { + list-style-type: square; +} +.none { + list-style-type: none; +} +</style> +<ul class="disc"><li>first disc</li><li>second disc</li></ul> +<ul class="circle"><li>first circle</li><li>second circle</li></ul> +<ul class="square"><li>first square</li><li>second square</li></ul> +<ul class="none"><li>first none</li><li>second none</li></ul> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported-xhtml.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported-xhtml.xhtml new file mode 100644 index 0000000000..a2e5e0bbf6 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported-xhtml.xhtml @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="UTF-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>ul@type: supported types</title> +<link rel="match" href="ul-type-supported-ref.html"/> +</head> +<body> +<ul type="disc"><li>first disc</li><li>second disc</li></ul> +<ul type="circle"><li>first circle</li><li>second circle</li></ul> +<ul type="square"><li>first square</li><li>second square</li></ul> +<ul type="none"><li>first none</li><li>second none</li></ul> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported.html new file mode 100644 index 0000000000..c2449d7acd --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-supported.html @@ -0,0 +1,8 @@ +<!doctype html> +<meta charset=utf-8> +<title>ul@type: supported types</title> +<link rel=match href=ul-type-supported-ref.html> +<ul type=disc><li>first disc</li><li>second disc</li></ul> +<ul type=circle><li>first circle</li><li>second circle</li></ul> +<ul type=square><li>first square</li><li>second square</li></ul> +<ul type=none><li>first none</li><li>second none</li></ul> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-decimal.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-decimal.html new file mode 100644 index 0000000000..0fb0e14abb --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-decimal.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset=utf-8> +<title>ul@type: unsupported type: decimal</title> +<link rel=match href=ul-type-unsupported-ref.html> +<ul type=decimal><li>first item</li><li>second item</li></ul> +<ul type=DECIMAL><li>first item</li><li>second item</li></ul> +<ul type=1><li>first item</li><li>second item</li></ul> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-invalid.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-invalid.html new file mode 100644 index 0000000000..c6ee14eac8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-invalid.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset=utf-8> +<title>ul@type: unsupported type: invalid</title> +<link rel=match href=ul-type-unsupported-ref.html> +<ul type=disk><li>first item</li><li>second item</li></ul> +<ul type=DISK><li>first item</li><li>second item</li></ul> +<ul type=x><li>first item</li><li>second item</li></ul> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-lower-alpha.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-lower-alpha.html new file mode 100644 index 0000000000..f31cc247ca --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-lower-alpha.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset=utf-8> +<title>ul@type: unsupported type: lower-alpha</title> +<link rel=match href=ul-type-unsupported-ref.html> +<ul type=lower-alpha><li>first item</li><li>second item</li></ul> +<ul type=LOWER-ALPHA><li>first item</li><li>second item</li></ul> +<ul type=a><li>first item</li><li>second item</li></ul> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-lower-roman.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-lower-roman.html new file mode 100644 index 0000000000..bd86861c9d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-lower-roman.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset=utf-8> +<title>ul@type: unsupported type: lower-roman</title> +<link rel=match href=ul-type-unsupported-ref.html> +<ul type=lower-roman><li>first item</li><li>second item</li></ul> +<ul type=LOWER-ROMAN><li>first item</li><li>second item</li></ul> +<ul type=i><li>first item</li><li>second item</li></ul> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-ref.html new file mode 100644 index 0000000000..c53fe947f2 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-ref.html @@ -0,0 +1,6 @@ +<!doctype html> +<meta charset=utf-8> +<title>ul@type: unsupported types</title> +<ul><li>first item</li><li>second item</li></ul> +<ul><li>first item</li><li>second item</li></ul> +<ul><li>first item</li><li>second item</li></ul> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-upper-alpha.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-upper-alpha.html new file mode 100644 index 0000000000..3f880f1dcd --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-upper-alpha.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset=utf-8> +<title>ul@type: unsupported type: upper-alpha</title> +<link rel=match href=ul-type-unsupported-ref.html> +<ul type=upper-alpha><li>first item</li><li>second item</li></ul> +<ul type=UPPER-ALPHA><li>first item</li><li>second item</li></ul> +<ul type=A><li>first item</li><li>second item</li></ul> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-upper-roman.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-upper-roman.html new file mode 100644 index 0000000000..d7f1295d63 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/lists/ul-type-unsupported-upper-roman.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset=utf-8> +<title>ul@type: unsupported type: upper-roman</title> +<link rel=match href=ul-type-unsupported-ref.html> +<ul type=upper-roman><li>first item</li><li>second item</li></ul> +<ul type=UPPER-ROMAN><li>first item</li><li>second item</li></ul> +<ul type=I><li>first item</li><li>second item</li></ul> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/compare-computed-style.js b/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/compare-computed-style.js new file mode 100644 index 0000000000..496bae3a10 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/compare-computed-style.js @@ -0,0 +1,7 @@ +test(function() { + var testStyle = getComputedStyle(document.getElementById('test')); + var refStyle = getComputedStyle(document.getElementById('ref')); + for (var prop in testStyle) { + assert_equals(testStyle[prop], refStyle[prop], prop); + } +}); diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/multicol-quirks-mode.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/multicol-quirks-mode.html new file mode 100644 index 0000000000..905d7bc7cb --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/multicol-quirks-mode.html @@ -0,0 +1,7 @@ +<title>multicol default styles (quirks mode)</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#multicol"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<multicol id=test></multicol> +<asdfasdf id=ref></asdfasdf> +<script src="compare-computed-style.js"></script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/multicol-standards-mode.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/multicol-standards-mode.html new file mode 100644 index 0000000000..999cf42c76 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/margin-collapsing-quirks/multicol-standards-mode.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<title>multicol default styles (standards mode)</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#multicol"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<multicol id=test></multicol> +<asdfasdf id=ref></asdfasdf> +<script src="compare-computed-style.js"></script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/br-wbr-content/content-property.tentative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/br-wbr-content/content-property.tentative.html new file mode 100644 index 0000000000..d814c0a076 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/br-wbr-content/content-property.tentative.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel=stylesheet href=/fonts/ahem.css> +<link rel=match href=/css/reference/pass_if_square_96px_black.html> +<link rel=help href=https://github.com/whatwg/html/issues/2291> +<link rel=help href=https://drafts.csswg.org/css-content/#content-property> +<style> +.test, .ref { + font: 16px/1 Ahem; + margin: 0; +} +.test br { + /* This should have no affect. Per css-content, <string> when applied to elements. */ + content: ""; +} +</style> +<p>Test passes if there is a square below.</p> +<p class=test>xxxxxx<br>xxxxxx<br>xxxxxx</p> +<p class=ref>xxxxxx<br>xxxxxx<br>xxxxxx</p> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-a.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-a.html new file mode 100644 index 0000000000..2ac6f44649 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-a.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<link rel=match href=001-ref.html> +<title>The font element text decoration color quirk, 001, almost standards mode</title> +<style>[id] > * { color:fuchsia }</style> +<div>Quirks should not apply:</div> +<div><u>foo <font style="color:fuchsia">style</font> bar</u></div> +<div><u>foo <font color="fuchsia">color</font> bar</u></div> +<div><u>foo <font color="fuchsia" style="color:fuchsia">color and style</font> bar</u></div> +<div><u>foo <font color="x" style="color:fuchsia">color=x and style</font> bar</u></div> +<div><u>foo <font color="transparent" style="color:fuchsia">color=transparent and style</font> bar</u></div> +<div><u>foo <font color="" style="color:fuchsia">color="" and style</font> bar</u></div> +<div><u>foo <font style="display:block; color:fuchsia">block</font> bar</u></div> +<div><s>foo <font color="fuchsia">line-through</font> bar</s></div> +<div><u style="text-decoration:overline">foo <font color="fuchsia">overline</font> bar</u></div> +<div><u>foo <span style="color:fuchsia">span</span> bar</u></div> +<div><u id="no-namespace">FAIL (script didn't run)</u></div> +<script> +var a = document.getElementById('no-namespace'); +a.textContent = 'foo '; +var elm = document.createElementNS('', 'font'); +elm.textContent = 'no-namespace font element'; +a.appendChild(elm); +a.appendChild(document.createTextNode(' bar')); +</script> +<div><u id="uppercase">FAIL (script didn't run)</u></div> +<script> +var a = document.getElementById('uppercase'); +a.textContent = 'foo '; +var elm = document.createElementNS('http://www.w3.org/1999/xhtml', 'FONT'); +elm.textContent = 'uppercase FONT element'; +a.appendChild(elm); +a.appendChild(document.createTextNode(' bar')); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-q.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-q.html new file mode 100644 index 0000000000..846cb6e8af --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-q.html @@ -0,0 +1,32 @@ +<link rel=match href=001-ref.html> +<title>The font element text decoration color quirk, 001, quirks mode</title> +<style>[id] > * { color:fuchsia }</style> +<div>Quirks should not apply:</div> +<div><u>foo <font style="color:fuchsia">style</font> bar</u></div> +<div><u>foo <font color="fuchsia">color</font> bar</u></div> +<div><u>foo <font color="fuchsia" style="color:fuchsia">color and style</font> bar</u></div> +<div><u>foo <font color="x" style="color:fuchsia">color=x and style</font> bar</u></div> +<div><u>foo <font color="transparent" style="color:fuchsia">color=transparent and style</font> bar</u></div> +<div><u>foo <font color="" style="color:fuchsia">color="" and style</font> bar</u></div> +<div><u>foo <font style="display:block; color:fuchsia">block</font> bar</u></div> +<div><s>foo <font color="fuchsia">line-through</font> bar</s></div> +<div><u style="text-decoration:overline">foo <font color="fuchsia">overline</font> bar</u></div> +<div><u>foo <span style="color:fuchsia">span</span> bar</u></div> +<div><u id="no-namespace">FAIL (script didn't run)</u></div> +<script> +var a = document.getElementById('no-namespace'); +a.textContent = 'foo '; +var elm = document.createElementNS('', 'font'); +elm.textContent = 'no-namespace font element'; +a.appendChild(elm); +a.appendChild(document.createTextNode(' bar')); +</script> +<div><u id="uppercase">FAIL (script didn't run)</u></div> +<script> +var a = document.getElementById('uppercase'); +a.textContent = 'foo '; +var elm = document.createElementNS('http://www.w3.org/1999/xhtml', 'FONT'); +elm.textContent = 'uppercase FONT element'; +a.appendChild(elm); +a.appendChild(document.createTextNode(' bar')); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-ref.html new file mode 100644 index 0000000000..fb632e693d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-ref.html @@ -0,0 +1,20 @@ +<title>Reference for The font element text decoration color quirk, 001</title> +<style> +span, div > div { color:fuchsia } +.under { text-decoration:underline } +.over { text-decoration:overline } +.strike { text-decoration:line-through } +</style> +<div>Quirks should not apply:</div> +<div class="under">foo <span>style</span> bar</div> +<div class="under">foo <span>color</span> bar</div> +<div class="under">foo <span>color and style</span> bar</div> +<div class="under">foo <span>color=x and style</span> bar</div> +<div class="under">foo <span>color=transparent and style</span> bar</div> +<div class="under">foo <span>color="" and style</span> bar</div> +<div class="under">foo<div>block</div>bar</div> +<div class="strike">foo <span>line-through</span> bar</div> +<div class="over">foo <span>overline</span> bar</div> +<div class="under">foo <span>span</span> bar</div> +<div class="under">foo <span>no-namespace font element</span> bar</div> +<div class="under">foo <span>uppercase FONT element</span> bar</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-s.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-s.html new file mode 100644 index 0000000000..d781fab289 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-s.html @@ -0,0 +1,33 @@ +<!doctype html> +<link rel=match href=001-ref.html> +<title>The font element text decoration color quirk, 001, standards mode</title> +<style>[id] > * { color:fuchsia }</style> +<div>Quirks should not apply:</div> +<div><u>foo <font style="color:fuchsia">style</font> bar</u></div> +<div><u>foo <font color="fuchsia">color</font> bar</u></div> +<div><u>foo <font color="fuchsia" style="color:fuchsia">color and style</font> bar</u></div> +<div><u>foo <font color="x" style="color:fuchsia">color=x and style</font> bar</u></div> +<div><u>foo <font color="transparent" style="color:fuchsia">color=transparent and style</font> bar</u></div> +<div><u>foo <font color="" style="color:fuchsia">color="" and style</font> bar</u></div> +<div><u>foo <font style="display:block; color:fuchsia">block</font> bar</u></div> +<div><s>foo <font color="fuchsia">line-through</font> bar</s></div> +<div><u style="text-decoration:overline">foo <font color="fuchsia">overline</font> bar</u></div> +<div><u>foo <span style="color:fuchsia">span</span> bar</u></div> +<div><u id="no-namespace">FAIL (script didn't run)</u></div> +<script> +var a = document.getElementById('no-namespace'); +a.textContent = 'foo '; +var elm = document.createElementNS('', 'font'); +elm.textContent = 'no-namespace font element'; +a.appendChild(elm); +a.appendChild(document.createTextNode(' bar')); +</script> +<div><u id="uppercase">FAIL (script didn't run)</u></div> +<script> +var a = document.getElementById('uppercase'); +a.textContent = 'foo '; +var elm = document.createElementNS('http://www.w3.org/1999/xhtml', 'FONT'); +elm.textContent = 'uppercase FONT element'; +a.appendChild(elm); +a.appendChild(document.createTextNode(' bar')); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-x.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-x.xhtml new file mode 100644 index 0000000000..623b346eea --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-x.xhtml @@ -0,0 +1,22 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<link rel="match" href="001-ref.html"/> +<title>The font element text decoration color quirk, 001, XHTML</title> +<style>[id] > * { color:fuchsia }</style> +</head> +<body> +<div>Quirks should not apply:</div> +<div><u>foo <font style="color:fuchsia">style</font> bar</u></div> +<div><u>foo <font color="fuchsia">color</font> bar</u></div> +<div><u>foo <font color="fuchsia" style="color:fuchsia">color and style</font> bar</u></div> +<div><u>foo <font color="x" style="color:fuchsia">color=x and style</font> bar</u></div> +<div><u>foo <font color="transparent" style="color:fuchsia">color=transparent and style</font> bar</u></div> +<div><u>foo <font color="" style="color:fuchsia">color="" and style</font> bar</u></div> +<div><u>foo <font style="display:block; color:fuchsia">block</font> bar</u></div> +<div><s>foo <font color="fuchsia">line-through</font> bar</s></div> +<div><u style="text-decoration:overline">foo <font color="fuchsia">overline</font> bar</u></div> +<div><u>foo <span style="color:fuchsia">span</span> bar</u></div> +<div><u id="no-namespace">foo <font xmlns="">no-namespace font element</font> bar</u></div> +<div><u id="uppercase">foo <FONT>uppercase FONT element</FONT> bar</u></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-face.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-face.html new file mode 100644 index 0000000000..a37da3c45f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-face.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>font face</title> +<link rel="help" href="https://html.spec.whatwg.org/#the-font-element-text-decoration-color-quirk"> +<link rel="author" title="Intel" href="http://www.intel.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<script> + +const types = ["serif", "sans-serif", "cursive", "fantasy", "monospace"]; +for (let type of types) { + test(() => { + let elem = document.createElement("font"); + elem.setAttribute("face", type); + document.body.appendChild(elem); + let exp_type = window.getComputedStyle(elem, null).getPropertyValue("font-family"); + assert_equals(exp_type, type); + }, `font face attribute ${type} is correct`); +} + +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-size.html new file mode 100644 index 0000000000..8e8b9f28eb --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/font-size.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>font size</title> +<link rel="help" href="https://html.spec.whatwg.org/#the-font-element-text-decoration-color-quirk"> +<link rel="author" title="Intel" href="http://www.intel.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> + +<script> + +const modes = ["", "+", "-"]; +const values = ["0", "1", "2", "3", "4", "5", "6", "7", "8"]; +const rels = [ + ["1", "x-small"], + ["2", "small"], + ["3", "medium"], + ["4", "large"], + ["5", "x-large"], + ["6", "xx-large"], + ["7", "xxx-large"] +]; +let results = getCSSFontSize(rels); + +function cal(n) { + //If value is greater than 7, let it be 7 + //If value is less than 1, let it be 1 + return n > 7 ? 7 : (n < 1 ? 1 : n); +} + +function getRealInput(mode, value) { + switch(mode) { + case "+": + //If mode is relative-plus, then increment value by 3 + return cal(3 + parseInt(value)); + case "-": + // If mode is relative-minus, then let value be the result of subtracting value from 3 + return cal(3 - parseInt(value)); + default: + return cal(parseInt(value)); + } +} + +function getCSSFontSize(rels) { + let results = {}; + for (let [key, value] of rels) { + if (key == "7") { + //The 'xxx-large' value is a non-CSS value used here to indicate a font size 50% larger than 'xx-large'. + let size = parseInt(results["6"]) * 1.5; + results[key] = size.toString(); + return results; + } + let elem = document.createElement("span"); + document.body.appendChild(elem); + elem.setAttribute("style", `font-size: ${value}`); + let exp_size = window.getComputedStyle(elem, null).getPropertyValue("font-size"); + results[key] = exp_size.slice(0, -2); + } + return results; +} + +for (let mode of modes) { + for (let value of values) { + test(() => { + let size = getRealInput(mode, value); + let elem = document.createElement("font"); + elem.setAttribute("size", `${mode}${value}`); + document.body.appendChild(elem); + let exp_size = window.getComputedStyle(elem, null).getPropertyValue("font-size"); + assert_equals(exp_size.slice(0, -2), results[size]); + }, `font size attribute ${mode}${value} is correct`); + } +} + +test(() => { + let span_elem = document.createElement("span"); + document.body.appendChild(span_elem); + span_elem.setAttribute("style", "font-size: medium"); + let span_size = window.getComputedStyle(span_elem, null).getPropertyValue("font-size"); + + let font_elem = document.createElement("font"); + document.body.appendChild(font_elem); + let font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size"); + assert_equals(font_size, span_size); + + font_elem.setAttribute("size", ""); + font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size"); + assert_equals(font_size, span_size); + + font_elem.setAttribute("size", " "); + font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size"); + assert_equals(font_size, span_size); + + font_elem.setAttribute("size", " 3"); + font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size"); + assert_equals(font_size, span_size); + + font_elem.setAttribute("size", "3"); + font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size"); + assert_equals(font_size, span_size); +}, "font size default value is 3"); + +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/sections-and-headings/headings-styles.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/sections-and-headings/headings-styles.html new file mode 100644 index 0000000000..63e6a83e88 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/sections-and-headings/headings-styles.html @@ -0,0 +1,152 @@ +<!doctype html> +<title>default styles for h1..h6, hgroup, article, aside, nav, section</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); + +article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section { + display: block; +} + +h1 { margin-block-start: 0.67em; margin-block-end: 0.67em; font-size: 2.00em; font-weight: bold; } +h2 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; font-weight: bold; } +h3 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; font-weight: bold; } +h4 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; font-weight: bold; } +h5 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; font-weight: bold; } +h6 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; font-weight: bold; } + +:is(article, aside, nav, section) h1 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; } +:is(article, aside, nav, section) :is(article, aside, nav, section) h1 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; } +:is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; } +:is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; } +:is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; } + +</style> + +<div id="log"></div> + +<div id="tests"> + <h1></h1> + <h2></h2> + <h3></h3> + <h4></h4> + <h5></h5> + <h6></h6> + <hgroup></hgroup> + <article></article> + <aside></aside> + <nav></nav> + <section></section> + <article data-skip> + <h1></h1> + <article data-skip> + <h1></h1> + <article data-skip> + <h1></h1> + <article data-skip> + <h1></h1> + <article data-skip> + <h1></h1> + <hgroup data-skip> + <h1></h1> + <h2></h2> + <h3></h3> + <h4></h4> + <h5></h5> + </hgroup> + </article> + </article> + </article> + </article> + </article> + <aside data-skip> + <h1></h1> + <aside data-skip> + <h1></h1> + <aside data-skip> + <h1></h1> + <aside data-skip> + <h1></h1> + <aside data-skip> + <h1></h1> + <hgroup data-skip> + <h1></h1> + <h2></h2> + <h3></h3> + <h4></h4> + <h5></h5> + </hgroup> + </aside> + </aside> + </aside> + </aside> + </aside> + <nav data-skip> + <h1></h1> + <nav data-skip> + <h1></h1> + <nav data-skip> + <h1></h1> + <nav data-skip> + <h1></h1> + <nav data-skip> + <h1></h1> + <hgroup data-skip> + <h1></h1> + <h2></h2> + <h3></h3> + <h4></h4> + <h5></h5> + </hgroup> + </nav> + </nav> + </nav> + </nav> + </nav> + <section data-skip> + <h1></h1> + <section data-skip> + <h1></h1> + <section data-skip> + <h1></h1> + <section data-skip> + <h1></h1> + <section data-skip> + <h1></h1> + <hgroup data-skip> + <h1></h1> + <h2></h2> + <h3></h3> + <h4></h4> + <h5></h5> + </hgroup> + </section> + </section> + </section> + </section> + </section> +</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', + 'font-size', + 'font-weight', + ]; + runUAStyleTests(props); + +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign-ref.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign-ref.xhtml Binary files differnew file mode 100644 index 0000000000..7d21ce1180 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign-ref.xhtml diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_bottom.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_bottom.xhtml Binary files differnew file mode 100644 index 0000000000..8610f37938 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_bottom.xhtml diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_top.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_top.xhtml Binary files differnew file mode 100644 index 0000000000..3f02219973 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/colgroup_valign_top.xhtml diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables-xhtml.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables-xhtml.xhtml new file mode 100644 index 0000000000..6af44139a0 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables-xhtml.xhtml @@ -0,0 +1,23 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>UA style for form in table elements - XHTML</title> + <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2" /> + <link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <table><form></form></table> + <table><thead><form></form></thead></table> + <table><tbody><form></form></tbody></table> + <table><tfoot><form></form></tfoot></table> + <table><tr><form></form></tr></table> + <script> + for (const form of document.querySelectorAll("form")) { + test(function() { + assert_equals(getComputedStyle(form).display, "block"); + }, `Computed display of form inside ${form.parentNode.nodeName} in xhtml should be 'block'`); + } + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables.html new file mode 100644 index 0000000000..611c8305b9 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/form-in-tables.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>UA style for form in table elements</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .block { display: block !important } +</style> +<div id="display"> + <table><form></form></table> + <table><thead><form></form></thead></table> + <table><tbody><form></form></tbody></table> + <table><tfoot><form></form></tfoot></table> + <table><tr><form></form></tr></table> +</div> +<div id="important"> + <table><form class="block"></form></table> + <table><thead><form class="block"></form></thead></table> + <table><tbody><form class="block"></form></tbody></table> + <table><tfoot><form class="block"></form></tfoot></table> + <table><tr><form class="block"></form></tr></table> +</div> +<script> + for (const form of display.querySelectorAll("form")) { + test(function() { + assert_equals(getComputedStyle(form).display, "none"); + }, `Computed display of form inside ${form.parentNode.nodeName} should be 'none'`); + } + for (const form of important.querySelectorAll("form")) { + test(function() { + assert_equals(getComputedStyle(form).display, "none"); + }, `Computed display of form inside ${form.parentNode.nodeName} should be 'none' (!important UA style))`); + } +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/hidden-attr.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/hidden-attr.html new file mode 100644 index 0000000000..f06c3dc9b4 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/hidden-attr.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title>UA style for hidden attribute on table elements</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<table hidden></table> +<table><caption hidden></caption></table> +<table><colgroup hidden></table> +<table><col hidden></table> +<table><thead hidden></table> +<table><tbody hidden></table> +<table><tfoot hidden></table> +<table><tr hidden></table> +<table><tr><td hidden></table> +<table><tr><th hidden></table> +<script> +const expectedDisplay = { + 'table': 'none', + 'caption': 'none', + 'colgroup': 'table-column-group', + 'col': 'table-column', + 'thead': 'table-header-group', + 'tbody': 'table-row-group', + 'tfoot': 'table-footer-group', + 'tr': 'table-row', + 'td': 'none', + 'th': 'none', +}; +for (const el of document.querySelectorAll("[hidden]")) { + test(function() { + const style = getComputedStyle(el); + assert_equals(style.display, expectedDisplay[el.localName]); + if (el instanceof HTMLTableElement || + el instanceof HTMLTableCaptionElement || + el instanceof HTMLTableCellElement) { + assert_equals(style.visibility, 'visible'); + } else { + assert_equals(style.visibility, 'collapse'); + } + }, `Computed display and visibility of ${el.localName}`); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/aqua-yellow-32x32.png b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/aqua-yellow-32x32.png Binary files differnew file mode 100644 index 0000000000..42f8a2100b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/aqua-yellow-32x32.png diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/blue-16x20-green-16x20.png b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/blue-16x20-green-16x20.png Binary files differnew file mode 100644 index 0000000000..9bf59ebdf1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/blue-16x20-green-16x20.png diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/fuchsia-32x32.png b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/fuchsia-32x32.png Binary files differnew file mode 100644 index 0000000000..7902bc31e0 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/fuchsia-32x32.png diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/red-32x32.png b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/red-32x32.png Binary files differnew file mode 100644 index 0000000000..191e13ea11 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/red-32x32.png diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/yellow-32x32.png b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/yellow-32x32.png Binary files differnew file mode 100644 index 0000000000..a45f8111b4 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/resources/yellow-32x32.png diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-attribute.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-attribute.html new file mode 100644 index 0000000000..54acff0350 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-attribute.html @@ -0,0 +1,194 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Table attribute test</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> +<link rel="author" title="Intel" href="http://www.intel.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> + .div_tbl table { + width: 400px; + height: 300px; + border-spacing: 0px; + } + .div_tbl td { + padding: 0px; + } + .div_tbl th { + padding: 0px; + } + .div_200 { + height: 200px; + } +</style> + +<div id="div"> + <table id="table"> + <thead id="thead"> + <tr> + <th id="th">Month</th> + <th>Savings</th> + </tr> + </thead> + <tbody id="tbody"> + <tr id="tr"> + <td>January</td> + <td>$60</td> + </tr> + <tr> + <td id="td">February</td> + <td>$80</td> + </tr> + </tbody> + <tfoot id="tfoot"> + <tr> + <td>Sum</td> + <td>$140</td> + </tr> + </tfoot> + </table> +</div> + +<script> + +const ids = ["table", "thead", "tbody", "tfoot", "tr", "td", "th"]; +const alignIds = ["thead", "tbody", "tfoot", "tr", "td", "th"]; +const heightIds = ["tr", "td", "th"]; +const div = document.getElementById("div"); +const table = document.getElementById("table"); +const aligns = [ + ["center", "center"], + ["middle", "center"], + ["left", "left"], + ["right", "right"], + ["justify", "justify"] +]; + +function commonTest(id, attr, value, cssProp, expected) { + test(t => { + let elem = document.getElementById(id); + t.add_cleanup(() => { + elem.removeAttribute(attr); + }); + elem.setAttribute(attr, value); + let css = window.getComputedStyle(elem, null).getPropertyValue(cssProp); + assert_equals(css, expected); + }, `${id} ${attr} attribute is correct`); +} + +function commonAlignTest(id, attr, value, cssProp, expected) { + test(t => { + let elem = document.getElementById(id); + t.add_cleanup(() => { + elem.removeAttribute(attr); + }); + elem.setAttribute(attr, value); + let css = window.getComputedStyle(elem, null).getPropertyValue(cssProp); + assert_equals(css, expected); + }, `table ${id} align attribute ${value} is correct`); +} + +function commonHeightTest(id, attr, value, cssProp, expected, type="", divClass) { + test(t => { + let elem = document.getElementById(id); + t.add_cleanup(() => { + elem.removeAttribute(attr); + div.classList.remove(divClass); + }); + elem.setAttribute(attr, value); + div.classList.add(divClass); + let css = window.getComputedStyle(elem, null).getPropertyValue(cssProp); + assert_equals(css, expected); + }, `${id} ${attr} attribute ${type} is correct`); +} + +// table#bordercolor +commonTest("table", "bordercolor", "red", "border-color", "rgb(255, 0, 0)"); +// table#cellspacing +commonTest("table", "cellspacing", "10", "border-spacing", "10px 10px", "10"); + +// {table, thead, body, tfoot, tr, td, th}#background +// {table, thead, body, tfoot, tr, td, th}#bgcolor +const url = new URL('/images/threecolors.png', window.location.href).href; +for (let id of ids) { + commonTest(id, "background", "/images/threecolors.png", "background-image", `url(\"${url}\")`); + + commonTest(id, "bgcolor", "red", "background-color", "rgb(255, 0, 0)"); +} + +// {thead, body, tfoot, tr, td, th}#align#{center, middle, left, right, justify} +for (let id of alignIds) { + for (let [value, expected] of aligns) { + commonAlignTest(id, "align", value, "text-align", expected); + } +} + +// {tr, td, th}#height#pixel +for (let id of heightIds) { + commonHeightTest(id, "height", "60", "height", "60px", "pixel", "div_tbl"); +} + +// {tr, td, th}#height#percentage +let tbl = document.createElement("table"); +tbl.innerHTML = '<tr id="table_tr"><th id="table_th"></th></tr><tr><td id="table_td"></td></tr>'; +div.appendChild(tbl); +const heightPercIds = ["table_tr", "table_td", "table_th"]; +for (let id of heightPercIds) { + commonHeightTest(id, "height", "20%", "height", "60px", "percentage", "div_tbl"); +} +div.removeChild(tbl); + +// table#height#{pixel, percentage} +commonHeightTest("table", "height", "180", "height", "180px", "pixel", "div_200"); +commonHeightTest("table", "height", "90%", "height", "180px", "90%", "div_200"); +commonHeightTest("table", "height", "110%", "height", "220px", "110%", "div_200"); + +// table#cellpadding +test(t => { + t.add_cleanup(() => { + table.removeAttribute("cellpadding"); + }); + table.setAttribute("cellpadding", "10"); + + let th = document.getElementById("th"); + let th_css = window.getComputedStyle(th, null).getPropertyValue("padding"); + assert_equals(th_css, "10px"); + + let td = document.getElementById("td"); + let td_css = window.getComputedStyle(td, null).getPropertyValue("padding"); + assert_equals(td_css, "10px"); +}, "table cellpadding attribute is correct"); + +// th default text-align property is center +test(t => { + let elem = document.getElementById("th"); + let css = window.getComputedStyle(elem, null).getPropertyValue("text-align"); + assert_equals(css, "center"); +}, "th default align attribute is center"); + +// col#width#{pixel, percentage} +test(t => { + let colgroup = document.createElement("colgroup"); + let col1 = document.createElement("col"); + let col2 = document.createElement("col"); + t.add_cleanup(() => { + table.removeChild(colgroup); + div.classList.remove("div_tbl"); + }); + colgroup.appendChild(col1); + colgroup.appendChild(col2); + table.insertBefore(colgroup, table.firstChild); + div.classList.add("div_tbl"); + + col1.setAttribute("width", "100"); + let td = document.getElementById("td"); + let css = window.getComputedStyle(td, null).getPropertyValue("width"); + assert_equals(css, "100px"); + + col1.setAttribute("width", "50%"); + css = window.getComputedStyle(td, null).getPropertyValue("width"); + assert_equals(css, "200px"); +}, "table col width attribute is correct"); + +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print-ref.html new file mode 100644 index 0000000000..3aa0abd320 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE HTML> +<html> +<body> +<table style="background-image: url('resources/aqua-yellow-32x32.png')"> + <thead style="background-image: url('resources/blue-16x20-green-16x20.png')"> + <tr> + <td> + Foo + </td> + <td style="background-image: url('resources/yellow-32x32.png')"> + Bar + </td> + </tr> + </thead> + <tbody style="background-image: url('resources/red-32x32.png')"> + <tr> + <th style="background-image: url('resources/fuchsia-32x32.png')"> + Foo + </th> + <th> + Bar + </th> + </tr> + <tr style="background-image: url('resources/fuchsia-32x32.png')"> + <td> + Foo + </td> + <td style="background-image: url('resources/yellow-32x32.png')"> + Bar + </td> + </tr> + </tbody> + <tfoot style="background-image: url('resources/yellow-32x32.png')"> + <tr> + <td> + Baz + </td> + </tr> + </tfoot> +</table> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print.html new file mode 100644 index 0000000000..0cbaca6019 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-background-print.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<html> +<link rel="match" href="table-background-print-ref.html"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> +<link rel="help" href="https://drafts.csswg.org/css-break/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=816498"> +<body> +<table background="resources/aqua-yellow-32x32.png"> + <thead background="resources/blue-16x20-green-16x20.png"> + <tr> + <td> + Foo + </td> + <td background="resources/yellow-32x32.png"> + Bar + </td> + </tr> + </thead> + <tbody background="resources/red-32x32.png"> + <tr> + <th background="resources/fuchsia-32x32.png"> + Foo + </th> + <th> + Bar + </th> + </tr> + <tr background="resources/fuchsia-32x32.png"> + <td> + Foo + </td> + <td background="resources/yellow-32x32.png"> + Bar + </td> + </tr> + </tbody> + <tfoot background="resources/yellow-32x32.png"> + <tr> + <td> + Baz + </td> + </tr> + </tfoot> +</table> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1-ref.html new file mode 100644 index 0000000000..ceac88e9a3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Table borders</title> +<style> +table { + border-width: 1px; + border-style: outset; +} +td { + border-width: 1px; + border-style: inset; +} +</style> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1.html new file mode 100644 index 0000000000..3338813995 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-1.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<link rel="match" href="table-border-1-ref.html"> +<title>Table borders</title> +<table border> +<tr><td>Test +</table> +<table border=""> +<tr><td>Test +</table> +<table border=null> +<tr><td>Test +</table> +<table border=undefined> +<tr><td>Test +</table> +<table border=foo> +<tr><td>Test +</table> +<table border=1> +<tr><td>Test +</table> +<table border=1foo> +<tr><td>Test +</table> +<table border=1%> +<tr><td>Test +</table> +<table border=-1> +<tr><td>Test +</table> +<table border=-1foo> +<tr><td>Test +</table> +<table border=-1%> +<tr><td>Test +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-notref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-notref.html new file mode 100644 index 0000000000..7558e5271a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-notref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Table borders</title> +<style> +table { + border-width: 1px; + border-style: outset; +} +td { + border-width: 1px; + border-style: inset; +} +</style> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-ref.html new file mode 100644 index 0000000000..36d1e45106 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Table borders</title> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> +<table> +<tr><td>Test +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2.html new file mode 100644 index 0000000000..6f4f39b113 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-2.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<link rel="match" href="table-border-2-ref.html"> +<title>Table borders</title> +<table border=0> +<tr><td>Test +</table> +<table border=0foo> +<tr><td>Test +</table> +<table border=0%> +<tr><td>Test +</table> +<table border=+0> +<tr><td>Test +</table> +<table border=+0foo> +<tr><td>Test +</table> +<table border=+0%> +<tr><td>Test +</table> +<table border=-0> +<tr><td>Test +</table> +<table border=-0foo> +<tr><td>Test +</table> +<table border=-0%> +<tr><td>Test +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3-ref.html new file mode 100644 index 0000000000..e465fd433c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3-ref.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<head> + <title>Reference for default 'border-color' on table (with 'color' set)</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + * { + border-color: teal; + /* This only affects the elements that we specify 'border-style' on: */ + border-width: 6px; + } + + table { + height: 30px; + width: 30px; + border-spacing: 0; + + /* To test in "rows": */ + float: left; + margin: 1px; + } + br { + clear: both; + } + + .dotted { + border-style: dotted; + } + .dashed { + border-style: dashed; + } + .solid { + border-style: solid; + } + .double { + border-style: double; + } + .groove { + border-style: groove; + } + .ridge { + border-style: ridge; + } + .inset { + border-style: inset; + } + .outset { + border-style: outset; + } + </style> +</head> + +<table class="dotted"><td></td></table> +<table><th class="dotted"></th></table> +<table><td class="dotted"></td></table> +<br> + +<table class="dashed"><td></td></table> +<table><th class="dashed"></th></table> +<table><td class="dashed"></td></table> +<br> + +<table class="solid"><td></td></table> +<table><th class="solid"></th></table> +<table><td class="solid"></td></table> +<br> + +<table class="double"><td></td></table> +<table><th class="double"></th></table> +<table><td class="double"></td></table> +<br> + +<table class="groove"><td></td></table> +<table><th class="groove"></th></table> +<table><td class="groove"></td></table> +<br> + +<table class="ridge"><td></td></table> +<table><th class="ridge"></th></table> +<table><td class="ridge"></td></table> +<br> + +<table class="inset"><td></td></table> +<table><th class="inset"></th></table> +<table><td class="inset"></td></table> +<br> + +<table class="outset"><td></td></table> +<table><th class="outset"></th></table> +<table><td class="outset"></td></table> +<br> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3q.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3q.html new file mode 100644 index 0000000000..4b481194dc --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3q.html @@ -0,0 +1,95 @@ +<!-- Intentionally omitting doctype, to test quirks mode. --> +<head> + <title>Testing default 'border-color' on table (with 'color' set), in quirks mode</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> + <link rel="match" href="table-border-3-ref.html"> + <style> + * { + /* This sets the used value of 'currentColor', which is what should be + used for all border-coloring in this test: */ + color: teal; + /* This only affects the elements that we specify 'border-style' on: */ + border-width: 6px; + } + + table { + height: 30px; + width: 30px; + border-spacing: 0; + + /* To test in "rows": */ + float: left; + margin: 1px; + } + br { + clear: both; + } + + .dotted { + border-style: dotted; + } + .dashed { + border-style: dashed; + } + .solid { + border-style: solid; + } + .double { + border-style: double; + } + .groove { + border-style: groove; + } + .ridge { + border-style: ridge; + } + .inset { + border-style: inset; + } + .outset { + border-style: outset; + } + </style> +</head> + +<table class="dotted"><td></td></table> +<table><th class="dotted"></th></table> +<table><td class="dotted"></td></table> +<br> + +<table class="dashed"><td></td></table> +<table><th class="dashed"></th></table> +<table><td class="dashed"></td></table> +<br> + +<table class="solid"><td></td></table> +<table><th class="solid"></th></table> +<table><td class="solid"></td></table> +<br> + +<table class="double"><td></td></table> +<table><th class="double"></th></table> +<table><td class="double"></td></table> +<br> + +<table class="groove"><td></td></table> +<table><th class="groove"></th></table> +<table><td class="groove"></td></table> +<br> + +<table class="ridge"><td></td></table> +<table><th class="ridge"></th></table> +<table><td class="ridge"></td></table> +<br> + +<table class="inset"><td></td></table> +<table><th class="inset"></th></table> +<table><td class="inset"></td></table> +<br> + +<table class="outset"><td></td></table> +<table><th class="outset"></th></table> +<table><td class="outset"></td></table> +<br> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3s.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3s.html new file mode 100644 index 0000000000..c4c019c8eb --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-3s.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<head> + <title>Testing default 'border-color' on table (with 'color' set), in standards mode</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> + <link rel="match" href="table-border-3-ref.html"> + <style> + * { + /* This sets the used value of 'currentColor', which is what should be + used for all border-coloring in this test: */ + color: teal; + /* This only affects the elements that we specify 'border-style' on: */ + border-width: 6px; + } + + table { + height: 30px; + width: 30px; + border-spacing: 0; + + /* To test in "rows": */ + float: left; + margin: 1px; + } + br { + clear: both; + } + + .dotted { + border-style: dotted; + } + .dashed { + border-style: dashed; + } + .solid { + border-style: solid; + } + .double { + border-style: double; + } + .groove { + border-style: groove; + } + .ridge { + border-style: ridge; + } + .inset { + border-style: inset; + } + .outset { + border-style: outset; + } + </style> +</head> + +<table class="dotted"><td></td></table> +<table><th class="dotted"></th></table> +<table><td class="dotted"></td></table> +<br> + +<table class="dashed"><td></td></table> +<table><th class="dashed"></th></table> +<table><td class="dashed"></td></table> +<br> + +<table class="solid"><td></td></table> +<table><th class="solid"></th></table> +<table><td class="solid"></td></table> +<br> + +<table class="double"><td></td></table> +<table><th class="double"></th></table> +<table><td class="double"></td></table> +<br> + +<table class="groove"><td></td></table> +<table><th class="groove"></th></table> +<table><td class="groove"></td></table> +<br> + +<table class="ridge"><td></td></table> +<table><th class="ridge"></th></table> +<table><td class="ridge"></td></table> +<br> + +<table class="inset"><td></td></table> +<table><th class="inset"></th></table> +<table><td class="inset"></td></table> +<br> + +<table class="outset"><td></td></table> +<table><th class="outset"></th></table> +<table><td class="outset"></td></table> +<br> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive-ref.html new file mode 100644 index 0000000000..c8d6a20726 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +table { + display: inline-table; + font-family: Ahem; +} +table, table * { + border-width: 3px; +} +</style> +<p>For every three tables below, the first two should have borders between some cells, but not the third: +<table rules="rows"><tr><td>X<tr><td>X<tr><td>X</table> +<table rules="rows"><tr><td>X<tr><td>X<tr><td>X</table> +<table><tr><td>X<tr><td>X<tr><td>X</table> +<br><br> +<table rules="cols"><tr><td>X<td>X<td>X</table> +<table rules="cols"><tr><td>X<td>X<td>X</table> +<table><tr><td>X<td>X<td>X</table> +<br><br> +<table rules="groups"><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table> +<table rules="groups"><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table> +<table><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table> +<br><br> +<p>For every three tables below, the first two should have borders on some edges, but not the third: +<table frame="hsides"><tr><td>X</table> +<table frame="hsides"><tr><td>X</table> +<table><tr><td>X</table> +<br><br> +<table frame="lhs"><tr><td>X</table> +<table frame="lhs"><tr><td>X</table> +<table><tr><td>X</table> +<br><br> +<table frame="rhs"><tr><td>X</table> +<table frame="rhs"><tr><td>X</table> +<table><tr><td>X</table> +<br><br> +<table frame="vsides"><tr><td>X</table> +<table frame="vsides"><tr><td>X</table> +<table><tr><td>X</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive.html new file mode 100644 index 0000000000..45c9da925d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-border-presentational-hints-ascii-case-insensitive.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://html.spec.whatwg.org/#tables-2:presentational-hints"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#attribute-case"> +<link rel="match" href="table-border-presentational-hints-ascii-case-insensitive-ref.html"> +<meta name="assert" content="@rules + @frame values are ASCII case-insensitive"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +table { + display: inline-table; + font-family: Ahem; +} +table, table * { + border-width: 3px; +} +</style> +<p>For every three tables below, the first two should have borders between some cells, but not the third: +<table rules="rows"><tr><td>X<tr><td>X<tr><td>X</table> +<table rules="RoWs"><tr><td>X<tr><td>X<tr><td>X</table> +<table rules="rowſ"><tr><td>X<tr><td>X<tr><td>X</table> +<br><br> +<table rules="cols"><tr><td>X<td>X<td>X</table> +<table rules="CoLs"><tr><td>X<td>X<td>X</table> +<table rules="colſ"><tr><td>X<td>X<td>X</table> +<br><br> +<table rules="groups"><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table> +<table rules="GrOuPs"><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table> +<table rules="groupſ"><colgroup span="2"><colgroup><tr><td>X<td>X<td>X</table> +<br><br> +<p>For every three tables below, the first two should have borders on some edges, but not the third: +<table frame="hsides"><tr><td>X</table> +<table frame="HsIdEs"><tr><td>X</table> +<table frame="hſideſ"><tr><td>X</table> +<br><br> +<table frame="lhs"><tr><td>X</table> +<table frame="LhS"><tr><td>X</table> +<table frame="lhſ"><tr><td>X</table> +<br><br> +<table frame="rhs"><tr><td>X</table> +<table frame="RhS"><tr><td>X</table> +<table frame="rhſ"><tr><td>X</table> +<br><br> +<table frame="vsides"><tr><td>X</table> +<table frame="VsIdEs"><tr><td>X</table> +<table frame="vſideſ"><tr><td>X</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001-ref.html new file mode 100644 index 0000000000..1b128e6171 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference case for table bordercolor attribute behaving like border-color property</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<style> + table { margin: 5px } +</style> +<table> + <td>I should not have a border.</td> +</table> +<table> + <td>I should not have a border.</td> +</table> +<table> + <td>I should not have a border.</td> +</table> +<table> + <td>I should not have a border.</td> +</table> +<table style="border-color: lime; border-style: solid"> + <td>I should have a border.</td> +</table> +<table style="border-color: lime; border-style: solid"> + <td>I should have a border.</td> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001.html new file mode 100644 index 0000000000..014abe3567 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-bordercolor-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test for table bordercolor attribute behaving like border-color property</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> +<link rel="match" href="table-bordercolor-001-ref.html"> +<meta name="assert" content="bordercolor is treated as a presentation hint, equivalent to setting the border-color property"> +<style> + table { margin: 5px } +</style> +<table bordercolor="red"> + <td>I should not have a border.</td> +</table> +<table style="border-color: red"> + <td>I should not have a border.</td> +</table> +<table bordercolor="red" style="border-width: 10px"> + <td>I should not have a border.</td> +</table> +<table style="border-color: red; border-width: 10px"> + <td>I should not have a border.</td> +</table> +<table bordercolor="lime" style="border-style: solid"> + <td>I should have a border.</td> +</table> +<table style="border-color: lime; border-style: solid"> + <td>I should have a border.</td> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width-ref.html new file mode 100644 index 0000000000..5b2ea91fe5 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background: green;"></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width.html new file mode 100644 index 0000000000..65962ac273 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-nowrap-with-fixed-width.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://html.spec.whatwg.org/#tables-2"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=821915"> +<link rel="match" href="table-cell-nowrap-with-fixed-width-ref.html"> +<title>A td element with the nowrap attribute should unconditionally apply white-space:nowrap</title> +<style> +table { border-spacing: 0; } +td { width: 10px; padding: 0; } +div { display: inline-block; background: green; width: 50px; height: 100px; } +</style> +<table> + <td nowrap> + <div></div><div></div> + </td> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-ref.html new file mode 100644 index 0000000000..b5ba0443f3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-ref.html @@ -0,0 +1,37 @@ +<style> +body { + margin: 0; +} + +.row { + clear: both; +} + +.row div { + float: left; +} + +.red { + background-color: red; +} +</style> + +<div class="row"> + <div class="red" style="width: 200px">a</div> + <div style="width: 200px">a</div> +</div> + +<div class="row"> + <div class="red" style="width: 200px">a</div> + <div style="width: 200px">a</div> +</div> + +<div class="row"> + <div class="red" style="width: 100px">a</div> + <div style="width: 300px">a</div> +</div> + +<div class="row"> + <div class="red" style="width: 100px">a</div> + <div style="width: 300px">a</div> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-s.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-s.html new file mode 100644 index 0000000000..0fe0e2c25a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width-s.html @@ -0,0 +1,55 @@ +<!doctype html> +<link rel="match" href="table-cell-width-ref.html"> +<style> +body { + margin: 0; +} + +table { + width: 400px; + border-collapse: collapse; +} + +th { + font-weight: normal; + text-align: left; +} + +td, th { + padding: 0; +} + +td:first-child, th:first-child { + background-color: red; +} +</style> + +<!-- width=0 should be treated as 'auto' --> +<table> + <tr> + <th width=0>a</th> + <th>a</th> + </tr> +</table> + +<table> + <tr> + <td width=0>a</td> + <td>a</td> + </tr> +</table> + +<!-- test valid width attribute value--> +<table> + <tr> + <th width=100>a</th> + <th>a</th> + </tr> +</table> + +<table> + <tr> + <td width=100>a</td> + <td>a</td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width.html new file mode 100644 index 0000000000..f66244ab10 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-cell-width.html @@ -0,0 +1,54 @@ +<link rel="match" href="table-cell-width-ref.html"> +<style> +body { + margin: 0; +} + +table { + width: 400px; + border-collapse: collapse; +} + +th { + font-weight: normal; + text-align: left; +} + +td, th { + padding: 0; +} + +td:first-child, th:first-child { + background-color: red; +} +</style> + +<!-- width=0 should be treated as 'auto' --> +<table> + <tr> + <th width=0>a</th> + <th>a</th> + </tr> +</table> + +<table> + <tr> + <td width=0>a</td> + <td>a</td> + </tr> +</table> + +<!-- test valid width attribute value--> +<table> + <tr> + <th width=100>a</th> + <th>a</th> + </tr> +</table> + +<table> + <tr> + <td width=100>a</td> + <td>a</td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width-ref.html new file mode 100644 index 0000000000..1eb7c00d21 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width-ref.html @@ -0,0 +1,2 @@ +<!doctype html> +<div style="border: 1px solid green; width: 0">Text</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width.html new file mode 100644 index 0000000000..6358e14a39 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-column-width.html @@ -0,0 +1,10 @@ +<!doctype html> +<link rel="match" href="table-column-width-ref.html"> +<table style="display: block"> + <colgroup style="display: block"> + <col style="border: 1px solid green; display: block" width="0"></col> + </colgroup> +</table> +<script> + document.querySelector("col").append("Text"); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction-ref.html new file mode 100644 index 0000000000..2bbd6c0477 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>Table direction</title> + +<style> + table { + border-collapse: collapse; + } + + td { + border: 2px solid black; + width: 20px; + height: 20px; + } + + td.special { + border-left: 5px solid green; + border-right: 5px solid blue; + } +</style> + +Normal table: +<table> + <tr> + <td></td> + <td class="special"></td> + </tr> +</table> + +<hr> + +RTL table: +<table> + <tr> + <td class="special"></td> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction.html new file mode 100644 index 0000000000..a3de4136f1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-direction.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<link rel="match" href="table-direction-ref.html"> +<title>Table direction</title> + +<style> + table { + border-collapse: collapse; + } + + td { + border: 2px solid black; + width: 20px; + height: 20px; + } + + td.special { + border-left: 5px solid green; + border-right: 5px solid blue; + } +</style> + +Normal table: +<table> + <tr> + <td></td> + <td class="special"></td> + </tr> +</table> + +<hr> + +RTL table: +<table style="direction: rtl"> + <tr> + <td></td> + <td class="special"></td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-notref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-notref.html new file mode 100644 index 0000000000..ef1378185a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Table layout attribute</title> +<table border width=100% style=table-layout:fixed> +<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa +</table> +<table border width=100% style=table-layout:fixed> +<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-ref.html new file mode 100644 index 0000000000..d76a48c4ab --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Table layout attribute</title> +<table border width=100%> +<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa +</table> +<table border width=100%> +<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout.html new file mode 100644 index 0000000000..7dfacf2279 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-layout.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Table layout attribute</title> +<link rel="match" href="table-layout-ref.html"> +<meta name="assert" + content="The layout attribute on table elements should have no effect."> +<table border width=100% layout=fixed> +<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa +</table> +<table border width=100% layout=auto> +<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<td>aaa +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction-ref.html new file mode 100644 index 0000000000..dab31636d9 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title>Table row direction</title> + +<style> + table { + border-collapse: collapse; + } + + td { + border: 2px solid black; + width: 20px; + height: 20px; + } + + td.special { + border-left: 5px solid green; + border-right: 5px solid blue; + } +</style> + +Normal table with LTR and RTL rows: +<table> + <tr> + <td></td> + <td class="special"></td> + </tr> + <tr> + <td></td> + <td class="special"></td> + </tr> +</table> + +<hr> + +RTL table with LTR and RTL rows: +<table> + <tr> + <td class="special"></td> + <td></td> + </tr> + <tr> + <td class="special"></td> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction.html new file mode 100644 index 0000000000..64ed5a667a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-direction.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<link rel="match" href="table-row-direction-ref.html"> +<title>Table row direction</title> + +<style> + table { + border-collapse: collapse; + } + + td { + border: 2px solid black; + width: 20px; + height: 20px; + } + + td.special { + border-left: 5px solid green; + border-right: 5px solid blue; + } +</style> + +Normal table with LTR and RTL rows: +<table> + <tr style="direction: ltr"> + <td></td> + <td class="special"></td> + </tr> + <tr style="direction: rtl"> + <td></td> + <td class="special"></td> + </tr> +</table> + +<hr> + +RTL table with LTR and RTL rows: +<table style="direction: rtl"> + <tr style="direction: ltr"> + <td></td> + <td class="special"></td> + </tr> + <tr style="direction: rtl"> + <td></td> + <td class="special"></td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction-ref.html new file mode 100644 index 0000000000..0f3e03f9ba --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title>Table row-group direction</title> + +<style> + table { + border-collapse: collapse; + } + + td { + border: 2px solid black; + width: 20px; + height: 20px; + } + + td.special { + border-left: 5px solid green; + border-right: 5px solid blue; + } +</style> + +Normal table with LTR and RTL row groups: +<table> + <tr> + <td></td> + <td class="special"></td> + </tr> + <tr> + <td></td> + <td class="special"></td> + </tr> +</table> + +<hr> + +RTL table with LTR and RTL row groups: +<table> + <tr> + <td class="special"></td> + <td></td> + </tr> + <tr> + <td class="special"></td> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction.html new file mode 100644 index 0000000000..385672f127 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-direction.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<link rel="match" href="table-row-group-direction-ref.html"> +<title>Table row-group direction</title> + +<style> + table { + border-collapse: collapse; + } + + td { + border: 2px solid black; + width: 20px; + height: 20px; + } + + td.special { + border-left: 5px solid green; + border-right: 5px solid blue; + } +</style> + +Normal table with LTR and RTL row groups: +<table> + <tbody style="direction: ltr"> + <tr> + <td></td> + <td class="special"></td> + </tr> + </tbody> + <tbody style="direction: rtl"> + <tr> + <td></td> + <td class="special"></td> + </tr> + </tbody> +</table> + +<hr> + +RTL table with LTR and RTL row groups: +<table style="direction: rtl"> + <tbody style="direction: ltr"> + <tr> + <td></td> + <td class="special"></td> + </tr> + </tbody> + <tbody style="direction: rtl"> + <tr> + <td></td> + <td class="special"></td> + </tr> + </tbody> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height-ref.html new file mode 100644 index 0000000000..e5279080f0 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height-ref.html @@ -0,0 +1,30 @@ +<!doctype html> +<table style="border: 1px solid red"> + <thead style="display: block; height: 100px"> + <tr> + <td> + thead text + </td> + </tr> + </tr> +</table> + +<table style="border: 1px solid red"> + <tbody style="display: block; height: 100px"> + <tr> + <td> + tbody text + </td> + </tr> + </tr> +</table> + +<table style="border: 1px solid red"> + <tfoot style="display: block; height: 100px"> + <tr> + <td> + tfoot text + </td> + </tr> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height.html new file mode 100644 index 0000000000..b58311dd72 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-group-height.html @@ -0,0 +1,31 @@ +<!doctype html> +<link rel="match" href="table-row-group-height-ref.html"> +<table style="border: 1px solid red"> + <thead style="display: block" height="100"> + <tr> + <td> + thead text + </td> + </tr> + </tr> +</table> + +<table style="border: 1px solid red"> + <tbody style="display: block" height="100"> + <tr> + <td> + tbody text + </td> + </tr> + </tr> +</table> + +<table style="border: 1px solid red"> + <tfoot style="display: block" height="100"> + <tr> + <td> + tfoot text + </td> + </tr> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height-ref.html new file mode 100644 index 0000000000..63f882c689 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height-ref.html @@ -0,0 +1,4 @@ +<!doctype html> +<div style="border: 1px solid green; height: 0; border-spacing: 2px"> + <div style="display: table-cell; padding: 1px">Hey</div> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height.html new file mode 100644 index 0000000000..8ecc0dd454 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-height.html @@ -0,0 +1,9 @@ +<!doctype html> +<link rel="match" href="table-row-height-ref.html"> +<table style="display: block"> + <tbody style="display: block"> + <tr style="display: block; border: 1px solid green" height="0"> + <td>Hey</td> + </tr> + </tbody> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print-ref.html new file mode 100644 index 0000000000..2aa94109ad --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8"> +<title>Testing row split</title> +<style type="text/css"> +@page { size:5in 3in; margin:0.5in; } +html,body { + color:black; + background-color:white; + font-size:16px; + padding:0; + margin:0; + height:100%; +} +div { height:160%; } +p { height: 50%; margin:0; } +</style> +</head> +<body> + +<div> +<p></p> +<p>1</p> +</div> + + +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print.html new file mode 100644 index 0000000000..3a14558a8b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-001-print.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<html> +<head> +<link rel="match" href="table-row-pagination-001-print-ref.html"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> +<link rel="help" href="https://drafts.csswg.org/css-break/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012"> +<meta charset="utf-8"> +<title>Testing row split</title> +<style type="text/css"> +@page { size:5in 3in; margin:0.5in; } +html,body { + color:black; + background-color:white; + font-size:16px; + padding:0; + margin:0; + height:100%; +} +table { height:160%; width:100%; } +td { height:50%; width:100%; } +</style> +</head> +<body> + +<table border="0" cellspacing="0" cellpadding="0"> +<tr><td></td></tr> +<tr><td valign="top">1</td></tr> +</table> + + +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print-ref.html new file mode 100644 index 0000000000..91400fcc1e --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +@page { size:5in 3in; margin:0.5in; } +</style> +</head> +<body> + <div style="height:3in">Tall div. (Scroll to end.)</div> + <div>IS THIS TEXT VISIBLE IN PRINT PREVIEW?</div> + <div>[clear:left]</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print.html new file mode 100644 index 0000000000..bc1c42088f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-row-pagination-002-print.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<link rel="match" href="table-row-pagination-002-print-ref.html"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> +<link rel="help" href="https://drafts.csswg.org/css-break/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=963441"> +<style> +@page { size:5in 3in; margin:0.5in; } +</style> +</head> +<body> + <div style="float: left"> + <table cellpadding=0 cellspacing=0> + <tr> + <td> + <div style="height:3in">Tall div. (Scroll to end.)</div> + <div>IS THIS TEXT VISIBLE IN PRINT PREVIEW?</div> + </td> + </tr> + </table> + </div> + <div style="clear: left">[clear:left]</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-ua-stylesheet.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-ua-stylesheet.html new file mode 100644 index 0000000000..dc3e45f5a4 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-ua-stylesheet.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test for table element's UA-stylesheet-provided styles</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="refElem"></div> +<!-- Note: this test puts the table inside of an element with a non-default + 'text-indent' and 'border-collapse' values, so that we can verify that + the table does indeed use the initial value for these properties, rather + than simply inheriting. --> +<div style="text-indent: 100px; border-collapse: collapse"> + <table id="tableElem"></table> +</div> + +<script> +/* These styles come from the default `table` styling here: + * https://html.spec.whatwg.org/multipage/rendering.html#tables-2 + * We can't check for these values directly, because they may be + * serialized slightly differently when read from the computed style. + * So, for each property here, we apply it to a "reference" div and then + * read back the computed value, and we validate that a table element + * has that same computed value by default. */ +const defaultTablePropVals = { + 'display': 'table', + 'box-sizing': 'border-box', + 'border-spacing': '2px', + 'border-collapse': 'separate', + 'text-indent': 'initial', +}; + +for (var propName in defaultTablePropVals) { + test(function() { + refElem.style[propName] = defaultTablePropVals[propName]; + let expectedComputedVal = getComputedStyle(refElem, "")[propName]; + + let actualComputedVal = getComputedStyle(tableElem, "")[propName]; + assert_equals(actualComputedVal, expectedComputedVal); + }, `Computed '${propName}' on table should match html spec`); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-valign-baseline-ascii-case-insensitive.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-valign-baseline-ascii-case-insensitive.html new file mode 100644 index 0000000000..f64bb9aa08 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-valign-baseline-ascii-case-insensitive.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://html.spec.whatwg.org/#tables-2:presentational-hints"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#attribute-case"> +<meta name="assert" content="@valign values on table-related elements are ASCII case-insensitive"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<table><tr><td valign="baseline">X</table> +<table><tr><td valign="BaSeLiNe">X</table> +<table><tr><td valign="baſeline">X</table> +<script> +const td = document.querySelectorAll("td"); + +test(() => { + assert_equals(getComputedStyle(td[0]).getPropertyValue("vertical-align"), + "baseline", "lowercase valid"); + assert_equals(getComputedStyle(td[1]).getPropertyValue("vertical-align"), + "baseline", "mixed case valid"); + assert_equals(getComputedStyle(td[2]).getPropertyValue("vertical-align"), + "middle", "non-ASCII invalid"); +}, "keyword baseline"); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace-s.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace-s.html new file mode 100644 index 0000000000..9f462b5768 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace-s.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset=utf-8> +<title>table vspace hspace (standards mode)</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div>x</div> +<table vspace=25 hspace=25><tr><td>x</table> +<div>x</div> +<script> +test(function() { + var style = getComputedStyle(document.querySelector('table')); + ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'].forEach(function(m) { + assert_equals(style[m], '0px', m); + }); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace.html new file mode 100644 index 0000000000..c081775b87 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-vspace-hspace.html @@ -0,0 +1,16 @@ +<!-- quirks --> +<meta charset=utf-8> +<title>table vspace hspace (quirks mode)</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div>x</div> <!-- prevent margin collapsing quirks --> +<table vspace=25 hspace=25><tr><td>x</table> +<div>x</div> <!-- prevent margin collapsing quirks --> +<script> +test(function() { + var style = getComputedStyle(document.querySelector('table')); + ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'].forEach(function(m) { + assert_equals(style[m], '0px', m); + }); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent-ref.html new file mode 100644 index 0000000000..820c360e39 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>Test for capping percentages</title> +<style> +div { width:300px; background:yellow; height:50px; } +table { width:150%; } +td { background:blue; } +</style> +<div> + <table cellspacing="0" cellpadding="0" border="0"> + <tr><td>parent div float=left</td></tr> + </table> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent.html new file mode 100644 index 0000000000..9a5e108505 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-150percent.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>Test for capping percentages</title> +<link rel="match" href="table-width-150percent-ref.html"> +<style> +div { width:300px; background:yellow; height:50px; } +td { background:blue; } +</style> +<div> + <table width="150%" cellspacing="0" cellpadding="0" border="0"> + <tr><td>parent div float=left</td></tr> + </table> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-ref.html new file mode 100644 index 0000000000..2b0f9e445c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-ref.html @@ -0,0 +1,13 @@ +<style> +p { + padding: 0; + margin: 0; +} +</style> + +<p>a b</p> + +<hr> + +<p>a</p> +<p>b</p> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-s.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-s.html new file mode 100644 index 0000000000..5b987e7919 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width-s.html @@ -0,0 +1,31 @@ +<!doctype html> +<link rel="match" href="table-width-ref.html"> + +<style> +table { + border-collapse: collapse; +} + +td { + padding: 0; +} +</style> + +<!-- width=0 should be treated as 'auto' --> +<table width=0> + <tr> + <td> + a b + </td> + </tr> +</table> + +<hr> + +<table width=1> + <tr> + <td> + a b + </td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width.html new file mode 100644 index 0000000000..59c5ca70d4 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/table-width.html @@ -0,0 +1,30 @@ +<link rel="match" href="table-width-ref.html"> + +<style> +table { + border-collapse: collapse; +} + +td { + padding: 0; +} +</style> + +<!-- width=0 should be treated as 'auto' --> +<table width=0> + <tr> + <td> + a b + </td> + </tr> +</table> + +<hr> + +<table width=1> + <tr> + <td> + a b + </td> + </tr> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change-ref.html new file mode 100644 index 0000000000..2cbcd6a347 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<style> +td { width: 100px; height: 100px; background: green; } +</style> +<table> + <tr><td></td></tr> + <tr><td></td></tr> +</table> +There should be 2 green boxes above. diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change.html new file mode 100644 index 0000000000..0f37d635a5 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/tr-transform-and-will-change.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="match" href="tr-transform-and-will-change-ref.html"> +<style> +tbody { background: green; } +td { width: 100px; height: 100px; } +tr { transform: translateX(5px); will-change: transform; } +</style> +<table> + <tbody> + <tr><td></td></tr> + <tr><td></td></tr> + </tbody> +</table> +There should be 2 green boxes above. diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border-ref.html new file mode 100644 index 0000000000..2f313f3395 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<style> +table { + border-collapse: collapse; +} +td { + border: 5px solid black; + width: 100px; + height: 100px; +} +</style> +Passes if there is a grid containing 2x2 squares. +<table> + <tbody> + <tr><td></td><td></td></tr> + <tr><td></td><td></td></tr> + </tbody> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border.html new file mode 100644 index 0000000000..5f131e6658 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/tables/transformed-tbody-tr-collapsed-border.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>Test for transformed tbody and tr with collapsed borders</title> +<link rel="match" href="transformed-tbody-tr-collapsed-border-ref.html"> +<style> +table { + border-collapse: collapse; +} +tbody, tr { + transform: translateY(0); +} +td { + border: 5px solid black; + width: 100px; + height: 100px; +} +</style> +Passes if there is a grid containing 2x2 squares. +<table> + <tbody> + <tr><td></td><td></td></tr> + <tr><td></td><td></td></tr> + </tbody> +</table> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/META.yml b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/META.yml new file mode 100644 index 0000000000..f5b533c377 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/META.yml @@ -0,0 +1,4 @@ +suggested_reviewers: + - emilio + - mstensho + - zcorpan diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend-ref.html new file mode 100644 index 0000000000..f82faee114 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<style> +div { + display: block; + font-size: 32px; + background: lime; + width: 10em; +} +</style> + +<div>legend</div> +<div>legend</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend.html new file mode 100644 index 0000000000..56d296977c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<title>Absolute/fixed-positioned boxes in LEGEND should be painted on the fieldset content</title> +<link rel=match href=absolute-fixed-in-legend-ref.html> +<style> +.absolute-container { + position: relative; + border: none; + padding: 0; + margin: 0; +} + +.absolute-container .legend-content { + display: block; + font-size: 32px; + position: absolute; + left: 0px; + background: lime; + width: 10em; +} + +.fixed-container { + contain: paint; + border: none; + padding: 0; + margin: 0; +} + +.fixed-container .legend-content { + display: block; + font-size: 32px; + position: fixed; + left: 0px; + background: lime; + width: 10em; +} + +.fieldset-content { + background: red; + font-size: 32px; + width: 10em; +} +</style> + +<fieldset class="absolute-container"> + <legend><span class="legend-content">legend</span></legend> + <div class="fieldset-content">content</div> +</fieldset> + +<fieldset class="fixed-container"> + <legend><span class="legend-content">legend</span></legend> + <div class="fieldset-content">content</div> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/crashtests/fieldset-middleclick.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/crashtests/fieldset-middleclick.html new file mode 100644 index 0000000000..39acf9eca1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/crashtests/fieldset-middleclick.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<html class="test-wait"> +<head> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<style> +#f { + overflow-y: scroll; + width: 100px; + height: 100px; +} +</style> +</head> +<body> +<fieldset id="f"> + <p>test</p> + <p>test</p> + <p>test</p> + <p>test</p> + <p>test</p> + <p>test</p> +</fieldset> +<script> +onload = async () => { + const actions = new test_driver.Actions(); + const button = {button: actions.ButtonType.MIDDLE}; + await actions. + pointerMove(50, 50). + pointerDown(button). + pointerUp(button). + send(); + document.documentElement.className = ""; +}; +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable-ref.html new file mode 100644 index 0000000000..7fa15da174 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<div style="all:initial; display:block; overflow:scroll; width:100px; height:100px; background:blue;"></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable.html new file mode 100644 index 0000000000..c968ed3f13 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements"> +<link rel="match" href="empty-scrollable-ref.html"> +<fieldset style="all:initial; display:block; overflow:scroll; width:100px; height:100px; background:blue;"></fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline-ref.html new file mode 100644 index 0000000000..ff583435a6 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<style> +span { + border: solid 2px; + padding: 10px; + margin: 5px; +} +</style> +<div> + text <span style="display: inline-block;">line1<br>line2</span> +</div> +<div> + text <span style="display: inline-flex;">line1<br>line2</span> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline.html new file mode 100644 index 0000000000..23f5ad76f3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1305890"> +<link rel="match" href="fieldset-baseline-ref.html"> +<style> +fieldset { + border: solid 2px; + padding: 10px; + margin: 5px; +} +</style> +<div> + text <fieldset style="display: inline-block;">line1<br>line2</fieldset> +</div> +<div> + text <fieldset style="display: inline-flex;">line1<br>line2</fieldset> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-formatting-context.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-formatting-context.html new file mode 100644 index 0000000000..c38944ae79 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-formatting-context.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>The fieldset element: block formatting context</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +* { + margin: 0; + padding: 0; +} +fieldset { border: none; } +.float { + float: left; + width: 50px; + height: 50px; + background-color: orange; +} +</style> + +<div class=float></div> +<fieldset><div class=float></div></fieldset> + +<script> +test(() => { + const fieldset = document.querySelector('fieldset'); + assert_equals(fieldset.offsetTop, 0, 'fieldset.offsetTop'); + assert_equals(fieldset.offsetLeft, 50, 'fieldset.offsetLeft'); + assert_equals(fieldset.clientHeight, 50, 'fieldset.clientHeight'); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-size.html new file mode 100644 index 0000000000..e1247637db --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-size.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<link rel="help" href="https://html.spec.whatwg.org/C/#the-fieldset-and-legend-elements"> +<!-- A test for the following paragraph: +For the purpose of calculating the used 'block-size', if the computed +'block-size' is not 'auto', the space allocated for the rendered legend's +margin box that spills out past the border, if any, is expected to be +subtracted from the 'block-size'. If the content box's block-size would be +negative, then let the content box's block-size be zero instead. +--> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +fieldset { + margin: 0; + padding: 0; + border: 2px solid black; +} +legend { + height: 102px; + background-color: yellow; +} +.content { + background-color: lime; +} +</style> +<fieldset style="block-size: 200px;"> +<legend>Legend</legend> +<div class="content" style="height:100%"></div> +</fieldset> + +<fieldset style="block-size: 40px;"> +<legend>Legend</legend> +<div class="content" style="height:100%"></div> +</fieldset> + +<script> +test(() => { + let cs = document.querySelectorAll('.content'); + assert_equals(cs[0].offsetHeight, Math.max(202 - 102, 0)); + assert_equals(cs[1].offsetHeight, Math.max(42 - 102, 0)); +}, 'Test content\'s block-size'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-negative-margin.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-negative-margin.html new file mode 100644 index 0000000000..563a2aa68d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-negative-margin.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>fieldset border gap with negative margin</title> +<link rel=match href=no-red-ref.html> +<style> +fieldset { border:none; border-left: 100px solid red; margin: 0; padding: 0; height:100px; } +legend { padding: 0; margin-left: -100px; width: 100px; height: 100px; transform: rotate(45deg); } +</style> +<p>There should be no red.</p> +<fieldset> + <legend></legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative-ref.html new file mode 100644 index 0000000000..95e2347121 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>Reference for fieldset border gap</title> +<style> +div { position: relative; top: 25px; width: 100px; height: 50px; background: lime; } +</style> +<p>There should be no red.</p> +<div></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative.html new file mode 100644 index 0000000000..1dbef479a9 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>fieldset border gap</title> +<link rel=match href=fieldset-border-gap-position-relative-ref.html> +<style> +fieldset, legend { margin: 0; padding: 0; } +fieldset { border: none; border-top: 100px solid red; width: 100px; } +legend { width: 100px; height: 50px; background: lime; } +</style> +<p>There should be no red.</p> +<fieldset><legend></legend></fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-hittest.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-hittest.html new file mode 100644 index 0000000000..9ab10159d8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-hittest.html @@ -0,0 +1,14 @@ +<!doctype html> +<title>fieldset, border-radius and hit testing</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +fieldset { width: 80px; height: 80px; border-radius: 100px; border: 10px solid; background: lime; } +</style> +<fieldset> +</fieldset> +<script> +test(() => { + assert_equals(document.elementFromPoint(20, 20), document.body); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha-ref.html new file mode 100644 index 0000000000..5cfe13c40d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<style> +div { + background-color: green; + height: 110px; + position: absolute; + width: 150px; + top: 70px; +} +</style> +<p>There should be no red.</p> +<div></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha.html new file mode 100644 index 0000000000..7a942076fb --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Fieldset with a border-radius and non-opaque border-color</title> +<link rel="match" href="fieldset-border-radius-with-alpha-ref.html"> +<style> +fieldset { + background-color: green; + border: 3px solid rgba(255, 0, 0, 0.9); + border-radius: 4px; + height: 100px; + width: 100px; +} +legend { + height: 50px; + width: 50px; +} +div { + background-color: green; + height: 110px; + position: absolute; + width: 150px; + top: 70px; +} +</style> +<p>There should be no red.</p> +<fieldset><legend></legend></fieldset> +<div></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-calculating-min-max-content.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-calculating-min-max-content.html new file mode 100644 index 0000000000..4a9f261895 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-calculating-min-max-content.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>fieldset calculating min-/max-content</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +fieldset { margin: 0; padding: 0; } +.min-content { width: 0; } +legend { padding: 0; } +fieldset, #ref-max-content, #ref-min-content { float: left; clear: left; border: 1px solid; } +#log { clear: left; } +</style> +<fieldset class=max-content><legend>foo fooo</legend>x x</fieldset> +<fieldset class=max-content><legend>x x</legend>foo fooo</fieldset> +<div id=ref-max-content>foo fooo</div> + +<fieldset class=min-content><legend>foo fooo</legend>x x</fieldset> +<fieldset class=min-content><legend>x x</legend>foo fooo</fieldset> +<div id=ref-min-content>fooo</div> + +<script> +test(() => { + const ref = document.querySelector('#ref-max-content'); + for (const e of document.querySelectorAll('.max-content')) { + assert_equals(e.clientWidth, ref.clientWidth); + } +}, 'max-content'); + +test(() => { + const ref = document.querySelector('#ref-min-content'); + for (const e of document.querySelectorAll('.min-content')) { + assert_equals(e.clientWidth, ref.clientWidth); + } +}, 'min-content'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block-ref.html new file mode 100644 index 0000000000..282c0d4ef1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>Reference for fieldset containing block</title> +<style> +p { margin: 0; height: 100px } +.div1 { position: absolute; top: 108px; width: 100px; height: 100px; background: lime; } +.div2 { position: absolute; top: 158px; width: 200px; height: 100px; background: lime; } +</style> +<p>There should be no red.</p> +<div class="div1"></div> +<div class="div2"></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block.html new file mode 100644 index 0000000000..cefb3584ea --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>fieldset containing block</title> +<link rel=match href=fieldset-containing-block-ref.html> +<style> +p { margin: 0; height: 100px } +fieldset { position: relative; border: none; padding: 0; margin: 0; } +legend { padding: 0; width: 100px; height: 50px; background: lime; } +div { position: absolute; top: 0; width: 100px; height: 50px; background: lime; } +.behind { height:100px; top: 108px; background: red; } + +.fixed-container { + filter: invert(); + overflow: hidden; + width: 200px; + height: 200px; +} +.fixed { + position: fixed; + width: 400px; + height: 100px; + background: linear-gradient(to right, #ff00ff 50%, #00ffff 50%); +} +.has-fixed { + width: 0px; + height: 0px; +} +</style> +<p>There should be no red.</p> +<div class="behind"></div> +<fieldset><legend></legend><div></div></fieldset> + +<fieldset class="fixed-container"> +<legend class="has-fixed"><div style="position:fixed; width:0; height0;"></div></legend> +<div class="fixed"></div> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-before-legend.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-before-legend.html new file mode 100644 index 0000000000..5bd1fbc161 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-before-legend.html @@ -0,0 +1,41 @@ +<!doctype html> +<title>fieldset content before legend</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +fieldset { + /* Paddings might have fractional values by default, and they can cause + rounding differences between the test element and the reference element. */ + padding: 0; +} +</style> + +<fieldset id=test> + X + <legend>legend</legend> + Y +</fieldset> +<fieldset id=ref> + <legend>legend</legend> + X Y +</fieldset> + +<fieldset id="test2"> + P<span id="hidden" style="display:none;">AS</span><legend>legend</legend>S +</fieldset> + +<script> + test(() => { + const testElm = document.getElementById('test'); + const refElm = document.getElementById('ref'); + assert_equals(testElm.clientHeight, refElm.clientHeight); + }); + + test(() => { + const testElm = document.getElementById('test2'); + testElm.clientHeight; + const span = document.getElementById('hidden'); + span.style.display = 'inline'; + testElm.clientHeight; + }, 'Showing a node just before the rendered legend should not crash'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-percentage-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-percentage-size.html new file mode 100644 index 0000000000..6195d8bb05 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-percentage-size.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1140595"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div style="height:100px;"> + <fieldset style="margin:0; padding:0; border:none;"> + <div id="inner" style="height:59%;"></div> + </fieldset> +</div> +<script> +test(() => { + let innerDiv = document.querySelector('#inner'); + assert_equals(innerDiv.clientHeight, 0); +}, 'A percentage height for an element in an auto-height fieldset should be ignored'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl-ref.html new file mode 100644 index 0000000000..b7c080bfac --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html dir="rtl"> +<head> +<meta charset="utf-8"> +<style> +.control { + background: blue; + width: 200px; + height: 1em; +} +.container { + border: 2px groove ThreeDFace; + margin: 0; + padding: 1em; +} +</style> +</head> +<body> +<div class="container"> + <label>Label</label> + <div class="control" id="ctrl-d"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl.html new file mode 100644 index 0000000000..0f12c6f92a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html dir="rtl"> +<head> +<meta charset="utf-8"> +<title>crbug.com/1130174; Non-auto-width block should be right-aligned in an RTL fieldset</title> +<link rel="match" href="fieldset-content-rtl-ref.html"> +<style> +.control { + background: blue; + width: 200px; + height: 1em; +} +fieldset { + border: 2px groove ThreeDFace; + margin: 0; + padding: 1em; +} +</style> +</head> +<body> +<fieldset> + <label>Label</label> + <div class="control"></div> +</fieldset> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-crash.html new file mode 100644 index 0000000000..111dcbe533 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-crash.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1039241"> +<div style="width: min-content;"> + <div style="writing-mode:vertical-lr;"> + <fieldset> + <div style="width:10%;"></div> + </fieldset> + </div> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-default-style.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-default-style.html new file mode 100644 index 0000000000..9a711383e6 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-default-style.html @@ -0,0 +1,57 @@ +<!doctype html> +<title>fieldset default style</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +#ref { + display: block; + margin-left: 2px; + margin-right: 2px; + /* TODO replace above declarations with these when they are widely supported. + margin-inline-start: 2px; + margin-inline-end: 2px; + */ + border: groove 2px; + padding: 0.35em 0.75em 0.625em 0.75em; + /* TODO replace above declarations with these when they are widely supported. + padding-block-start: 0.35em; + padding-inline-end: 0.75em; + padding-block-end: 0.625em; + padding-inline-start: 0.75em; + */ + min-width: min-content; + /* TODO change the above to min-inline-size when it's widely supported. */ +} +</style> +<fieldset id=test></fieldset> +<div id=ref></div> +<script> + const testElm = document.querySelector('#test'); + const refElm = document.querySelector('#ref'); + const props = ['display', + 'margin-top', + 'margin-right', + 'margin-bottom', + 'margin-left', + 'border-top-style', + 'border-right-style', + 'border-bottom-style', + 'border-left-style', + 'border-top-width', + 'border-right-width', + 'border-bottom-width', + 'border-left-width', + 'padding-top', + 'padding-right', + 'padding-bottom', + 'padding-left', + 'min-width', + ]; + const testStyle = getComputedStyle(testElm); + const refStyle = getComputedStyle(refElm); + props.forEach(prop => { + test(() => { + assert_equals(testStyle[prop], refStyle[prop]); + }, `${prop}`); + }); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-display.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-display.html new file mode 100644 index 0000000000..a8a553c836 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-display.html @@ -0,0 +1,37 @@ +<!doctype html> +<title>fieldset and CSS display</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + #inline-ref { display: inline-block; } +</style> +<fieldset id="block-ref">x</fieldset> +<fieldset id="inline-ref">x</fieldset> +<fieldset id="test">x</fieldset> +<script> + const blockWidth = getComputedStyle(document.querySelector('#block-ref')).width; + const inlineWidth = getComputedStyle(document.querySelector('#inline-ref')).width; + const testElm = document.querySelector('#test'); + // Please only add canonical values to these lists: + const blocks = ['block', 'table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-cell', + 'table-column-group', 'table-column', 'table-caption', 'list-item', 'flow-root', 'run-in', 'block ruby']; + const inlines = ['inline', 'inline-block', 'inline-table', 'ruby', 'ruby-base', 'ruby-text', 'ruby-base-container', 'ruby-text-container']; + + function test_display(val, expectedWidth) { + test(() => { + testElm.style.removeProperty('display'); + testElm.style.display = val; + const computed = getComputedStyle(testElm); + assert_equals(computed.display, val, `display: ${val} is not supported`); + assert_equals(computed.width, expectedWidth); + }, `fieldset with display: ${val}`); + } + + for (const val of blocks) { + test_display(val, blockWidth); + } + + for (const val of inlines) { + test_display(val, inlineWidth); + } +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-div-display-contents.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-div-display-contents.html new file mode 100644 index 0000000000..5d17b91290 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-div-display-contents.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>fieldset and div with display: contents</title> +<link rel=fieldset-foo-ref.html> +<style> +div { display: contents; } +</style> +<p>There should be a normal fieldset below with the legend "Foo".</p> +<fieldset> + <div> + <legend>Foo</legend> + </div> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline-ref.html new file mode 100644 index 0000000000..c34096f270 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +baseline +<fieldset style="display: inline-block;"> + <div style="position: relative;"> + line1<br>line2 + </div> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline.html new file mode 100644 index 0000000000..88aeed28c1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1307140"> +<link rel="match" href="fieldset-dynamic-baseline-ref.html"> +baseline +<fieldset style="display: inline-block;"> + <div style="position: relative;"> + line1<br>line2<div id="target" style="position: absolute;"></div> + </div> +</fieldset> +<script> +document.body.offsetTop; +document.getElementById('target').style.top = '10px'; +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-oof-container-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-oof-container-crash.html new file mode 100644 index 0000000000..a2b999fa00 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-oof-container-crash.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html class="test-wait"> +<title>No crash after stop being an asbolute container.</title> +<link rel="help" href="https://crbug.com/1395688"> +<style> +.c2 { + transform: rotate3d(0, 1, 0, 45deg); + column-width: 100px; +} +.c19 { + overflow: auto; + padding-left: 65536px; + column-count: 3; +} + +q { + position: absolute; + column-width: 1px; +} + +body { + column-count: 3; +} +</style> +<script> +function animationFrame() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} + +async function doTest() { + document.documentElement.appendChild(document.createElement('body')); + await animationFrame(); + document.body.innerHTML = '<fieldset class=c2><q>q</q></fieldset>'; + window.scrollBy(28, 71); + await animationFrame(); + document.querySelector('fieldset').setAttribute('class', 'c19'); + await animationFrame(); + document.body.remove(); + await animationFrame(); + await animationFrame(); + document.documentElement.classList.remove('test-wait'); +} + +doTest(); +</script> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo-ref.html new file mode 100644 index 0000000000..5bdf78db55 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<style> +*::after { content:"after text"; border:3px solid black;} +*::before { content:"before text"; border:3px solid black; } +</style> +</head> +<body> +<fieldset><legend>Legend</legend></fielset> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo.html new file mode 100644 index 0000000000..c5fbf53000 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- +Chrome had a crash bug in a case of dynamic addition of pseudo elements. +crbug.com/1242229 +--> +<html class="reftest-wait"> +<head> +<link rel="match" href="fieldset-dynamic-pseudo-ref.html"> +<style> +*::after { content:"after text"; border:3px solid black;} +*::before { content:"before text"; border:3px solid black; } +</style> +</head> +<body> +<fieldset><legend>Legend</legend></fielset> +<script> +document.styleSheets[0].disabled = true; + +requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.styleSheets[0].disabled = false; + document.documentElement.className = ''; + }); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-flexbox.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-flexbox.html new file mode 100644 index 0000000000..9e1c9ed152 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-flexbox.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<title>fieldset and CSS Flexbox</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +#test, #ref, #test-inline, #ref-inline { + display: flex; + justify-content: space-around; + margin: 0; + padding: 0; + border: none +} +#test-inline, #ref-inline { display: inline-flex } +legend { + float: left; /* Makes it not the "rendered legend" */ + padding: 0; +} +</style> +<fieldset id=test> + <legend>1</legend> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</fieldset> +<hr> +<div id=ref> + <legend>1</legend> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</div> +<hr> +<fieldset id=test-inline> + <legend>1</legend> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</fieldset> +<div id=ref-inline> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</div> +<script> + test(() => { + const testElm = document.getElementById('test'); + const refElm = document.getElementById('ref'); + assert_equals(getComputedStyle(testElm).height, + getComputedStyle(refElm).height, 'height'); + assert_equals(testElm.querySelector('legend').offsetTop, + testElm.querySelector('div').offsetTop, 'offsetTop') + }, "Flex"); + + test(() => { + const testElm = document.getElementById('test-inline'); + const refElm = document.getElementById('ref-inline'); + assert_equals(getComputedStyle(testElm).height, + getComputedStyle(refElm).height, 'height'); + assert_equals(testElm.querySelector('legend').offsetTop, + testElm.querySelector('div').offsetTop, 'offsetTop') + + }, "Inline flex"); + +test(() => { + const testElm = document.getElementById('test'); + testElm.style.flexDirection = 'row'; + const item0 = testElm.querySelectorAll('div')[0]; + const item1 = testElm.querySelectorAll('div')[1]; + assert_equals(item0.offsetTop, item1.offsetTop); + + testElm.style.flexDirection = 'column'; + assert_true(item0.offsetTop < item1.offsetTop); +}, "Dynamic change of flex-direction"); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-foo-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-foo-ref.html new file mode 100644 index 0000000000..cace814a8c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-foo-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<title>Reference with a fieldset and legend "Foo"</title> +<p>There should be a normal fieldset below with the legend "Foo".</p> +<fieldset> + <legend>Foo</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-generated-content.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-generated-content.html new file mode 100644 index 0000000000..25a36bc42c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-generated-content.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>fieldset generated content</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +body { + /* Use Ahem to avoid fractional letter widths. */ + font: 20px/1 Ahem; +} + +fieldset { + display: inline-block; + /* Paddings might have fractional values by default, and they can cause + rounding differences between the test element and the reference element. */ + padding: 0; +} + +#test::before, #test::after { content:"X"; } +</style> +<fieldset id=test><legend>A</legend>Y</fieldset> +<fieldset id=ref><legend>A</legend>XYX</fieldset> +<script> +test(() => { + const testElm = document.querySelector('#test'); + const refElm = document.querySelector('#ref'); + assert_equals(testElm.clientWidth, refElm.clientWidth, 'clientWidth'); + assert_equals(testElm.clientHeight, refElm.clientHeight, 'clientHeight'); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-grid.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-grid.html new file mode 100644 index 0000000000..bbb71dfa70 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-grid.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<title>fieldset and CSS Grid</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +#test, #ref, #test-inline, #ref-inline { + display: grid; + grid-template-columns: auto 50px auto; + grid-template-rows: auto 50px auto; + margin: 0; + padding: 0; + border: none +} +#test-inline, #ref-inline { display: inline-grid } +legend { + float: left; /* Makes it not the "rendered legend" */ + padding: 0; +} +</style> +<fieldset id=test> + <legend>1</legend> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</fieldset> +<hr> +<div id=ref> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</div> +<hr> +<fieldset id=test-inline> + <legend>1</legend> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</fieldset> +<div id=ref-inline> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</div> +<script> + test(() => { + const testElm = document.getElementById('test'); + const refElm = document.getElementById('ref'); + assert_equals(getComputedStyle(testElm).height, + getComputedStyle(refElm).height, 'height'); + assert_equals(testElm.querySelector('legend').offsetTop, + testElm.querySelector('div').offsetTop, 'offsetTop') + }, "Grid"); + + test(() => { + const testElm = document.getElementById('test-inline'); + const refElm = document.getElementById('ref-inline'); + assert_equals(getComputedStyle(testElm).height, + getComputedStyle(refElm).height, 'height'); + assert_equals(testElm.querySelector('legend').offsetTop, + testElm.querySelector('div').offsetTop, 'offsetTop') + + }, "Inline grid"); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item-ref.html new file mode 100644 index 0000000000..05b8ca4770 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<title>Reference for fieldset and dipslay: list-item</title> +<style> + fieldset { margin: 0 40px; } +</style> +<p>There should be no bullet points below.</p> +<fieldset> + <legend>X</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item.html new file mode 100644 index 0000000000..7726947bec --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>fieldset and dipslay: list-item</title> +<link rel=match href=fieldset-list-item-ref.html> +<style> + fieldset { margin: 0 40px; display: list-item; } +</style> +<p>There should be no bullet points below.</p> +<fieldset> + <legend>X</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size-ref.html new file mode 100644 index 0000000000..07c9da85b5 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<style> +.fieldset { + border: 2px solid gray; + margin: 1em; + padding: 0; + width: 20em; +} + +.f1 { + overflow: auto; + max-height: 3em; +} +.f2 { + max-height: 0; +} +</style> + +<div class="fieldset f1"> +<div>foo</div> +<div>foo</div> +<div>foo</div> +<div>foo</div> +<div>foo</div> +</div> + +<div class="fieldset f1"> +<div>foo</div> +</div> + +<div class="fieldset f2"> +<div>foo</div> +</div> + diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size.html new file mode 100644 index 0000000000..170dedd606 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="help" href="http://crbug.com/1151858"> +<link rel="match" href="fieldset-max-block-size-ref.html"> +<style> +fieldset { + border: 2px solid gray; + margin: 1em; + padding: 0; + width: 20em; +} + +.f1 { + overflow: auto; + max-height: 3em; +} +.f2 { + max-height: 0; +} +</style> + +<fieldset class="f1"> +<div>foo</div> +<div>foo</div> +<div>foo</div> +<div>foo</div> +<div>foo</div> +</fieldset> + +<fieldset class="f1"> +<div>foo</div> +</fieldset> + +<fieldset class="f2"> +<div>foo</div> +</fieldset> + diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-multicol.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-multicol.html new file mode 100644 index 0000000000..bdb2c2fd94 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-multicol.html @@ -0,0 +1,29 @@ +<!doctype html> +<title>fieldset multicol</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + #test { margin: 0; padding: 0; border: none } + #test, #ref { columns: 5 } + p { margin: 0 } +</style> +<fieldset id=test> + <p>1 + <p>2 + <p>3 + <p>4 + <p>5 +</fieldset> +<div id=ref> + <p>1 + <p>2 + <p>3 + <p>4 + <p>5 +</div> +<script> + test(() => { + assert_equals(getComputedStyle(document.getElementById('test')).height, + getComputedStyle(document.getElementById('ref')).height); + }); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-cssomview.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-cssomview.html new file mode 100644 index 0000000000..c47c7cdd5d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-cssomview.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +fieldset { + height: 200px; + overflow: scroll; + padding: 0; +} + +.content { + height: 400px; +} +</style> + +<fieldset> + <legend>Legend</legend> + <div class="content"></div> +</fieldset> + +<script> +test(() => { + const fieldset = document.querySelector('fieldset'); + assert_equals(getComputedStyle(fieldset)['overflow-x'], 'scroll'); + assert_equals(getComputedStyle(fieldset)['overflow-y'], 'scroll'); + assert_equals(fieldset.scrollHeight, 400); + fieldset.scrollTop = 500; + assert_greater_than_equal(fieldset.scrollTop, 200); +}, 'Test cssom-view API for FIELDSET'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden-ref.html new file mode 100644 index 0000000000..9fe632f7c2 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<title>Reference for fieldset and overflow</title> +<p>It should say PASS below.</p> +PASS diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden.html new file mode 100644 index 0000000000..cacbdbae00 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>fieldset and overflow</title> +<link rel=match href=fieldset-overflow-hidden-ref.html> +<style> +fieldset { margin:0; padding: 0; overflow: hidden; border: none; border-top: 1em solid transparent; } +legend { padding: 0; } +</style> +<p>It should say PASS below.</p> +<fieldset> + <legend>PASS</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-ref.html new file mode 100644 index 0000000000..42ecb22aef --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE HTML> +<title>Reference for fieldset overflow</title> +<style> +.fieldset, .legend { + border: 1em solid; + background: lime; +} +.fieldset { + height: 1em; + margin-top: 2em; +} +.legend { + height: 1em; + width: 5em; + line-height: 1; + margin-top: -4em; + margin-left: 1em; + margin-bottom: 1em; +} + +.fieldset2 { + background: lime; + padding: 50px; + max-height: 50px; + overflow: scroll; +} + +.fieldset3 { + width: 20em; + max-height: 250px; + padding: 7px; + margin: 0; + overflow: auto; + box-sizing: border-box; + border: 1em solid transparent; + border-top: 40px solid transparent; +} +</style> +<p>There should be no red.</p> +<div class=fieldset> +</div> +<div class=legend></div> + +<div class=fieldset2> + <div style="height:200px; background:blue"></div> +</div> + +<div class="fieldset3"> + <p> +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. + </p> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow.html new file mode 100644 index 0000000000..83813f9020 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<title>fieldset overflow</title> +<link rel=match href=fieldset-overflow-ref.html> +<style> +fieldset, legend { + border: 1em solid; + margin: 0; + padding: 0; + background: lime +} +#f1 { + overflow: auto; + height: 2em; +} +legend { + height: 1em; + width: 5em; +} +div { + background: red; + height: 2em; +} + +#f2 { + border: none; + padding: 50px; + max-height: 50px; + overflow: scroll; +} + +#f3 { + width: 20em; + max-height: 250px; + padding: 7px; + overflow: auto; + box-sizing: border-box; + border-color: transparent; + background: transparent; +} + +#f3 legend { + height: 40px; + border: none; + color: transparent; + background: transparent; +} +</style> +<p>There should be no red.</p> +<fieldset id="f1"> + <legend></legend> + <div></div> + <div id=last></div> +</fieldset> + +<!-- crbug.com/1247733 --> +<fieldset id="f2"> + <div style="height:200px; background:blue"></div> +</fieldset> +<script> + document.getElementById('last').scrollIntoView(); +</script> + +<!-- crbug.com/1282408 --> +<fieldset id="f3"> + <legend>Legend</legend> + <p> +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. + </p> +</fieldset> + diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order-ref.html new file mode 100644 index 0000000000..13b262a804 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>Reference for fieldset painting order</title> +<style> +div { width: 200px; height: 200px; } +#a { background: green; } +#b { background: lime; position: relative; top: -100px; left: 100px; } +</style> +<p>There should be no red.</p> +<div id=a></div> +<div id=b></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order.html new file mode 100644 index 0000000000..7bd2cedb1b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order.html @@ -0,0 +1,17 @@ +<!doctype html> +<title>fieldset painting order</title> +<link rel=match href=fieldset-painting-order-ref.html> +<style> +fieldset, legend { margin: 0; padding: 0; } +fieldset { + border: 100px solid red; + width: 0; + min-width: 0; + height: 0; +} +legend { width: 200px; height: 200px; margin-left: -100px; background: green; } +legend > span { float: right; margin-top: 100px; width: 100px; height: 100px; background: red; } +fieldset > div { margin-top: -100px; background: lime; width: 200px; height: 200px; } +</style> +<p>There should be no red.</p> +<fieldset><legend><span></span></legend><div></div></fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-block-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-block-size.html new file mode 100644 index 0000000000..e98de892d3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-block-size.html @@ -0,0 +1,64 @@ +<!doctype html> +<title>fieldset percentage block size</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + fieldset { block-size: 100px; margin: 20px; padding: 0; border: 10px solid; } + .rendered-legend { block-size: 80%; background: lime; padding: 0; } + .second-legend { block-size: 100%; background: yellow; padding: 0; } + fieldset > div { block-size: 100%; background: fuchsia; } +</style> +<div style="writing-mode: horizontal-tb"> + <fieldset> + <legend class="rendered-legend">rendered legend</legend> + <legend class="second-legend">second legend</legend> + <div>div</div> + </fieldset> +</div> + +<div style="writing-mode: vertical-lr"> + <fieldset> + <legend class="rendered-legend">rendered legend</legend> + <legend class="second-legend">second legend</legend> + <div>div</div> + </fieldset> +</div> + +<div style="writing-mode: vertical-rl"> + <fieldset> + <legend class="rendered-legend">rendered legend</legend> + <legend class="second-legend">second legend</legend> + <div>div</div> + </fieldset> +</div> + +<table cellspacing="0" cellpadding="0" style="width:100px; height:60px;"> + <tr> + <td> + <fieldset style="border:none; padding:0; height:100%; margin:0; margin-top:13px;"> + <div><div id="elm"></div></div> + </fieldset> + </td> + </tr> +</table> + +<script> + for (const div of document.querySelectorAll('div[style]')) { + for (const el of div.firstElementChild.children) { + test(() => { + const expected = el.textContent === 'rendered legend' ? '80px' : '30px'; + // 30px because: 100px - (max(0, legend-block-size - border-block-start)) + assert_equals(getComputedStyle(el).blockSize, expected); + }, `${el.textContent} (${div.getAttribute('style')})`); + } + } + +// crbug.com/1138204. Though the specification doesn't mention this behavior, +// there must be no doubt about the expected behavior. +test(() => { + const fieldset = document.querySelector('table fieldset'); + const initialHeight = fieldset.offsetHeight; + document.querySelector('#elm').style.display = 'none'; + assert_equals(fieldset.offsetHeight, initialHeight); +}, 'Fieldset with a percentage height should not increase the height on every reflow.'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-padding.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-padding.html new file mode 100644 index 0000000000..61ad4ed4c9 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-padding.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>fieldset percentage padding</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + body { margin: 0; } + .outer { width: 500px; position: relative; } + fieldset { width: 100px; padding: 10%; margin: 0; border: none; } + .overflow { overflow: auto; } +</style> +<div class=outer> + <fieldset> + <div id=no-overflow>x</div> + </fieldset> +</div> +<div class=outer> + <fieldset class=overflow> + <div id=with-overflow>x</div> + </fieldset> +</div> +<script> +const noOverflow = document.getElementById('no-overflow'); +const withOverflow = document.getElementById('with-overflow'); +for (const div of [noOverflow, withOverflow]) { + test(() => { + assert_equals(div.offsetLeft, 50, "offsetLeft"); + assert_equals(div.clientWidth, 100, "clientWidth"); + assert_equals(div.offsetTop, 50, "offsetTop"); + }, div.id); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-resize-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-resize-ref.html new file mode 100644 index 0000000000..e77bb69d7f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-resize-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS Test Reference</title> +<style> + div { + border: 1px solid; + padding: 10px; + resize: both; + overflow: scroll; + width: 100px; + height: 100px; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-resize.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-resize.html new file mode 100644 index 0000000000..6a34a7465c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-resize.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>resize property on fieldset</title> +<link rel="match" href="fieldset-resize-ref.html"> +<style> + fieldset { + margin: 0; + border: 1px solid; + padding: 10px; + resize: both; + overflow: scroll; + width: 100px; + height: 100px; + } +</style> +<fieldset></fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-shadow-dom.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-shadow-dom.html new file mode 100644 index 0000000000..3b46eb03c6 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-shadow-dom.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>fieldset and shadow DOM</title> +<link rel=fieldset-foo-ref.html> +<p>There should be a normal fieldset below with the legend "Foo".</p> +<template id="my-fieldset"> + <fieldset><slot name="my-text"></slot></fieldset> +</template> + +<my-fieldset> + <legend slot="my-text">Foo</legend> +</my-fieldset> + +<script> +customElements.define('my-fieldset', + class extends HTMLElement { + constructor() { + super(); + + const template = document.getElementById('my-fieldset'); + const templateContent = template.content; + + this.attachShadow({mode: 'open'}).appendChild( + templateContent.cloneNode(true) + ); + } + } +); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez-ref.html new file mode 100644 index 0000000000..8200e67194 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>Reference for Fieldset and transform: translateZ(0)</title> +<style> +fieldset { background: #eee; margin: 0 0 10px; } +</style> +<p>It should say PASS below without anything obscuring the text.</p> + +<fieldset> + <legend>PASS</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez.html new file mode 100644 index 0000000000..df30468b00 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Fieldset and transform: translateZ(0)</title> +<link rel=match href=fieldset-transform-translatez-ref.html> +<style> +#outer { transform: translateZ(0); } +fieldset { background: #eee; overflow: hidden; margin: 0 0 10px; } +#inner { position: relative; } +</style> +<p>It should say PASS below without anything obscuring the text.</p> +<div id=outer> + <fieldset> + <legend> + <div id="inner">PASS</div> + </legend> + </fieldset> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical-ref.html new file mode 100644 index 0000000000..29c28ea5f8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Reference for fieldset vertical</title> +<link rel=stylesheet href=resources/fieldset-vertical.css> +<p>vertical-lr +<div style="writing-mode: vertical-lr"> + <div class=fieldset><div class="legend top">foo bar</div>normal</div> + <div class="fieldset rtl"><div class="legend bottom">foo bar</div>dir=rtl</div> + <div class="fieldset rtl"><div class="legend top">foo bar</div>dir=rtl align=left</div> + <div class="fieldset rtl"><div class="legend center">foo bar</div>dir=rtl align=center</div> + <div class="fieldset rtl"><div class="legend bottom">foo bar</div>dir=rtl align=right</div> + <div class=fieldset><div class="legend top">foo bar</div>align=left</div> + <div class=fieldset><div class="legend center">foo bar</div>align=center</div> + <div class=fieldset><div class="legend bottom">foo bar</div>align=right</div> +</div> +<hr> +<p>vertical-rl +<div style="writing-mode: vertical-rl"> + <div class=fieldset><div class="legend top">foo bar</div>normal</div> + <div class="fieldset rtl"><div class="legend bottom">foo bar</div>dir=rtl</div> + <div class="fieldset rtl"><div class="legend top">foo bar</div>dir=rtl align=left</div> + <div class="fieldset rtl"><div class="legend center">foo bar</div>dir=rtl align=center</div> + <div class="fieldset rtl"><div class="legend bottom">foo bar</div>dir=rtl align=right</div> + <div class=fieldset><div class="legend top">foo bar</div>align=left</div> + <div class=fieldset><div class="legend center">foo bar</div>align=center</div> + <div class=fieldset><div class="legend bottom">foo bar</div>align=right</div></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical.html new file mode 100644 index 0000000000..c11b466669 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>fieldset vertical</title> +<link rel=stylesheet href=resources/fieldset-vertical.css> +<link rel=match href=fieldset-vertical-ref.html> +<p>vertical-lr +<div style="writing-mode: vertical-lr"> + <fieldset><legend>foo bar</legend>normal</fieldset> + <fieldset dir=rtl><legend>foo bar</legend>dir=rtl</fieldset> + <fieldset dir=rtl><legend align=left>foo bar</legend>dir=rtl align=left</fieldset> + <fieldset dir=rtl><legend align=center>foo bar</legend>dir=rtl align=center</fieldset> + <fieldset dir=rtl><legend align=right>foo bar</legend>dir=rtl align=right</fieldset> + <fieldset><legend align=left>foo bar</legend>align=left</fieldset> + <fieldset><legend align=center>foo bar</legend>align=center</fieldset> + <fieldset><legend align=right>foo bar</legend>align=right</fieldset> +</div> +<hr> +<p>vertical-rl +<div style="writing-mode: vertical-rl"> + <fieldset><legend>foo bar</legend>normal</fieldset> + <fieldset dir=rtl><legend>foo bar</legend>dir=rtl</fieldset> + <fieldset dir=rtl><legend align=left>foo bar</legend>dir=rtl align=left</fieldset> + <fieldset dir=rtl><legend align=center>foo bar</legend>dir=rtl align=center</fieldset> + <fieldset dir=rtl><legend align=right>foo bar</legend>dir=rtl align=right</fieldset> + <fieldset><legend align=left>foo bar</legend>align=left</fieldset> + <fieldset><legend align=center>foo bar</legend>align=center</fieldset> + <fieldset><legend align=right>foo bar</legend>align=right</fieldset> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/flex-legend-float-abspos.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/flex-legend-float-abspos.html new file mode 100644 index 0000000000..f6eead471c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/flex-legend-float-abspos.html @@ -0,0 +1,97 @@ +<!doctype html> +<title> + legend and float and position: absolute/fixed when the display type of + the fieldset is flex. +</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + body { margin: 0; } + fieldset { + border: 10px solid; + display: flex; + margin: 0; + padding: 20px; + width: 300px; + } + legend { height: 10px; } + #legend1 { float: left; } + #legend2 { float: right; } + #legend3 { position: absolute; } + #legend4 { position: fixed; } +</style> +<fieldset id=fieldset> + <div>div</div> + <legend id=legend1>legend1</legend> + <legend id=legend2>legend2</legend> + <legend id=legend3>legend3</legend> + <legend id=legend4>legend4</legend> + <legend id=legend5>legend5</legend> +</fieldset> +<script> + const fieldset = document.getElementById('fieldset'); + const legends = document.getElementsByTagName('legend'); + const [legend1, legend2, legend3, legend4, legend5] = legends; + const expectedTop = 0; + const expectedLeft = 10 + 20; + + function assert_rendered_legend(legend) { + assert_equals(legend.offsetTop, expectedTop, `${legend.id}.offsetTop`); + assert_equals(legend.offsetLeft, expectedLeft, `${legend.id}.offsetLeft`); + for (const other of legends) { + if (other === legend) { + continue; + } + if (other.offsetTop === expectedTop && other.offsetLeft === expectedLeft) { + assert_unreached(`${other.id} should not be the "rendered legend"`); + } + } + } + + test(t => { + assert_rendered_legend(legend5); + }, 'no dynamic changes'); + + test(t => { + const legend = document.createElement('legend'); + t.add_cleanup(() => { + legend.remove(); + }); + legend.id = 'script-inserted'; + legend.textContent = 'script-inserted legend'; + fieldset.insertBefore(legend, legend1); + assert_rendered_legend(legend); + legend.remove(); + assert_rendered_legend(legend5); + }, 'inserting a new legend and removing it again'); + + test(t => { + t.add_cleanup(() => { + legend1.id = 'legend1'; + legend2.id = 'legend2'; + }); + legend2.id = ''; + assert_rendered_legend(legend2); + legend1.id = ''; + assert_rendered_legend(legend1); + legend1.id = 'legend1'; + assert_rendered_legend(legend2); + legend2.id = 'legend2'; + assert_rendered_legend(legend5); + }, 'dynamic changes to float'); + + test(t => { + t.add_cleanup(() => { + legend3.id = 'legend3'; + legend4.id = 'legend4'; + }); + legend4.id = ''; + assert_rendered_legend(legend4); + legend3.id = ''; + assert_rendered_legend(legend3); + legend3.id = 'legend3'; + assert_rendered_legend(legend4); + legend4.id = 'legend4'; + assert_rendered_legend(legend5); + }, 'dynamic changes to position'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation-ref.html new file mode 100644 index 0000000000..954bcab573 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<p>There should be a green box below.</p> +<div style="background: green; width: 100px; height: 100px;"></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation.html new file mode 100644 index 0000000000..aa51ebac62 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="match" href="grid-template-propagation-ref.html"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1222988"> +<link rel="help" href="https://html.spec.whatwg.org/C/#anonymous-fieldset-content-box"> +<style> +fieldset { + display: grid; + grid-template: auto / 1fr; + grid-template-areas: "a"; + width: 100px; + height: 100px; + margin: 0; + border: none; + padding: 0; +} +</style> +<p>There should be a green box below.</p> +<fieldset> + <div style="background: green; grid-area: a"></div> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/insert-legend-in-multicol-fieldset-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/insert-legend-in-multicol-fieldset-crash.html new file mode 100644 index 0000000000..aad552dbe2 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/insert-legend-in-multicol-fieldset-crash.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1211926"> +<fieldset id="fieldset"> + <legend id="legend"></legend> + <div></div> +</fieldset> +<script> + document.body.offsetTop; + fieldset.style.columns = "2"; + legend.style.position = "relative"; +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-justify-self.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-justify-self.html new file mode 100644 index 0000000000..29df29d177 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-justify-self.html @@ -0,0 +1,34 @@ +<!doctype html> +<title>legend align to justify-self</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<fieldset><legend>x</legend></fieldset> +<fieldset><legend align=left>x</legend></fieldset> +<fieldset><legend align=center>x</legend></fieldset> +<fieldset><legend align=right>x</legend></fieldset> +<fieldset><legend align=lEfT>x</legend></fieldset> +<fieldset><legend align=cEnTeR>x</legend></fieldset> +<fieldset><legend align=rIgHt>x</legend></fieldset> +<!-- invalid values --> +<fieldset><legend align=justify>x</legend></fieldset> +<fieldset><legend align="left ">x</legend></fieldset> +<!-- dir --> +<fieldset><legend dir=ltr>x</legend></fieldset> +<fieldset><legend dir=rtl>x</legend></fieldset> +<fieldset dir=rtl><legend dir=ltr>x</legend></fieldset> +<fieldset dir=rtl><legend dir=rtl>x</legend></fieldset> +<script> +for (const fieldset of document.querySelectorAll('fieldset')) { + test(() => { + const legend = fieldset.firstChild; + const align = legend.align.toLowerCase(); + let expected = 'auto'; + switch (align) { + case 'left': expected = 'left'; break; + case 'center': expected = 'center'; break; + case 'right': expected = 'right'; break; + } + assert_equals(getComputedStyle(legend).justifySelf, expected); + }, `${fieldset.outerHTML}`) +} +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-text-align.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-text-align.html new file mode 100644 index 0000000000..01483bf8ad --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-text-align.html @@ -0,0 +1,27 @@ +<!doctype html> +<title>legend align does not map to text-align</title> +<!-- See discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1488228 --> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + legend { width: 13em } +</style> +<fieldset><legend>foo bar abcdefghijklmnopqrstuvwxyz</legend></fieldset> +<fieldset><legend align=left>foo bar abcdefghijklmnopqrstuvwxyz</legend></fieldset> +<fieldset><legend align=center>foo bar abcdefghijklmnopqrstuvwxyz</legend></fieldset> +<fieldset><legend align=right>foo bar abcdefghijklmnopqrstuvwxyz</legend></fieldset> +<fieldset><legend align=justify>foo bar abcdefghijklmnopqrstuvwxyz</legend></fieldset> +<script> +function test_align(selectorTest, expectedAlign) { + const testElm = document.querySelector(selectorTest); + test(() => { + assert_equals(getComputedStyle(testElm).textAlign, expectedAlign); + }, selectorTest); +} + +test_align('legend', 'start'); + +for (const val of ['left', 'center', 'right', 'justify']) { + test_align(`legend[align=${val}]`, 'start'); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align.html new file mode 100644 index 0000000000..e774599819 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align.html @@ -0,0 +1,50 @@ +<!doctype html> +<title>legend align</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<fieldset><legend align=left>x</legend></fieldset> +<fieldset><legend align=center>x</legend></fieldset> +<fieldset><legend align=right>x</legend></fieldset> +<fieldset><legend align=justify>x</legend></fieldset> +<div align=left> + <fieldset><legend>x</legend></fieldset> +</div> +<div align=center> + <fieldset><legend>x</legend></fieldset> +</div> +<div align=right> + <fieldset><legend>x</legend></fieldset> +</div> +<div align=justify> + <fieldset><legend>x</legend></fieldset> +</div> +<div style="text-align: center"> + <fieldset><legend>x</legend></fieldset> +</div> +<div style="text-align: center" align=center> + <fieldset><legend>x</legend></fieldset> +</div> +<fieldset><legend style="margin: 0 auto">x</legend></fieldset> +<fieldset><legend style="margin: 0 0 0 auto">x</legend></fieldset> +<fieldset dir=rtl><legend>x</legend></fieldset> +<fieldset dir=rtl><legend style="text-align: left">x</legend></fieldset> +<script> +function test_align(selectorTest, selectorRef) { + const testElm = document.querySelector(selectorTest); + const refElm = document.querySelector(selectorRef); + test(() => { + assert_equals(testElm.offsetLeft, refElm.offsetLeft, `expected ${selectorRef}`); + }, selectorTest); +} + +for (const val of ['left', 'center', 'right', 'justify']) { + test_align(`div[align=${val}] legend`, `legend[align=left]`); +} + +test_align(`div[style="text-align: center"] legend`, `legend[align=left]`); +test_align(`div[style="text-align: center"][align=center] legend`, `legend[align=left]`); +test_align(`legend[style="margin: 0 auto"]`, `legend[align=center]`); +test_align(`legend[style="margin: 0 0 0 auto"]`, `legend[align=right]`); +test_align(`fieldset[dir=rtl] legend`, `legend[align=right]`); +test_align(`fieldset[dir=rtl] legend[style="text-align: left"]`, `legend[align=right]`); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins-ref.html new file mode 100644 index 0000000000..8b1258727f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<title>legend inline auto margins</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1488301"> +<style> +body, html { padding:0; margin: 0; } +div { + border: 1px solid black; + border-width: 10px 17px 7px 23px; + padding: 0; + margin: 0; + width: 448px; + height: 5px; + margin-top: 5px; + position: relative; +} +span { + position: absolute; + top: -15px; + width: 200px; + height: 20px; + padding: 0; + margin: 0; + background: grey; +} +center { width: 200px; height: 20px; background: red; } +</style> +</head> +<body> + <div><span style="right:17px"></span></div> + <div><span style="left:31px"></span></div> + <div><span style="left:131px"></span></div> + <div><span style="right:32px"></span></div> + <div><span style="left:46px"></span></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins.html new file mode 100644 index 0000000000..dd1964ba25 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<title>legend inline auto margins</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1488301"> +<link rel="match" href="legend-auto-margins-ref.html"> +<style> +body, html { padding:0; margin: 0; } +fieldset { + border: 1px solid black; + border-width: 10px 17px 7px 23px; + padding: 0 17px 0 31px; + margin: 0; + width: 400px; +} +legend { + width: 200px; + height: 20px; + padding: 0; + margin: 0; + background: grey; +} +</style> +</head> +<body> + <fieldset><legend style="margin-left:auto"></legend></fieldset> + <fieldset><legend style="margin-right:auto"></legend></fieldset> + <fieldset><legend style="margin:0 auto"></legend></fieldset> + <fieldset><legend style="margin:0 15px 0 auto"></legend></fieldset> + <fieldset><legend style="margin:0 auto 0 15px"></legend></fieldset> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-formatting-context.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-formatting-context.html new file mode 100644 index 0000000000..4e95391797 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-formatting-context.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<title>The legend element: block formatting context</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +/* Set margin and padding for fieldset to 0 to make things simpler */ +fieldset { + margin: 0; + padding: 0; +} +.wrapper { + height: 200px; + position: relative; +} +.float { + float: left; + width: 50px; + height: 50px; + background-color: orange; +} +</style> + +<div class=wrapper> + <div class=float></div> + <legend id=in-body><div class=float></div></legend> + <div class=float></div> +</div> + +<div class=wrapper> + <fieldset> + <div class=float></div> + <legend id=rendered-legend><div class=float></div></legend> + <legend id=in-fieldset-second-child><div class=float></div></legend> + <div><legend id=in-fieldset-descendant><div class=float></div></legend></div> + </fieldset> +</div> + +<script> +const fieldsetBorderWidth = 2; +const legendPadding = 2; + +test(() => { + const legend = document.getElementById('in-body'); + assert_equals(legend.offsetLeft, 0, 'legend.offsetLeft'); + assert_equals(legend.offsetTop, 0, 'legend.offsetTop'); + assert_equals(legend.clientHeight, 0, 'legend.clientHeight'); + const divAfter = legend.nextElementSibling; + assert_equals(divAfter.offsetLeft, 100, 'divAfter.offsetLeft'); + assert_equals(divAfter.offsetTop, 0, 'divAfter.offsetTop'); +}, 'in-body'); + +test(() => { + const legend = document.getElementById('rendered-legend'); + assert_equals(legend.offsetLeft, fieldsetBorderWidth, 'legend.offsetLeft'); + assert_equals(legend.offsetTop, 0, 'legend.offsetTop'); + assert_equals(legend.clientHeight, 50, 'legend.clientHeight'); + const divChild = legend.firstChild; + assert_equals(divChild.offsetLeft, fieldsetBorderWidth + legendPadding, 'divChild.offsetLeft'); + assert_equals(divChild.offsetTop, 0, 'divChild.offsetTop'); +}, 'rendered-legend'); + +test(() => { + const legend = document.getElementById('in-fieldset-second-child'); + assert_equals(legend.offsetLeft, fieldsetBorderWidth, 'legend.offsetLeft'); + assert_equals(legend.offsetTop, 50, 'legend.offsetTop'); + assert_equals(legend.clientHeight, 0, 'legend.clientHeight'); + const divChild = legend.firstChild; + assert_equals(divChild.offsetLeft, fieldsetBorderWidth + 50, 'divChild.offsetLeft'); + assert_equals(divChild.offsetTop, 50, 'divChild.offsetTop'); +}, 'in-fieldset-second-child'); + +test(() => { + const legend = document.getElementById('in-fieldset-descendant'); + assert_equals(legend.offsetLeft, fieldsetBorderWidth, 'legend.offsetLeft'); + assert_equals(legend.offsetTop, 50, 'legend.offsetTop'); + assert_equals(legend.clientHeight, 0, 'legend.clientHeight'); + const divChild = legend.firstChild; + assert_equals(divChild.offsetLeft, fieldsetBorderWidth + 50 + 50, 'divChild.offsetLeft'); + assert_equals(divChild.offsetTop, 50, 'divChild.offsetTop'); +}, 'in-fieldset-descendant'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2-ref.html new file mode 100644 index 0000000000..1680cc8884 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2-ref.html @@ -0,0 +1,142 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference for legend block-axis margins</title> +<style> +.fieldset { + display: block; + position: relative; + width: 40px; + border: 2px solid blue; + padding: 4px; +} +.legend { + display: block; + position: absolute; + width: 10px; + height: 20px; + padding: 0; + margin: 0; + background: grey; +} + +.t2 .fieldset { border-top-width: 12px; } +.t3 .fieldset { border-top-width: 12px; } +.t3 .legend { height: 12px; background:white; } +.legend > x { display:block; position:relative; height:6px; background:grey; margin-top:3px; } + +div { border: 1px solid; margin: 0 2px 10px 0; } +c { display:block; height:10px; background: lightgrey; } +f { float: left; } +</style> +</head> +<body> + +<f> +<div> + <span class="fieldset" style="margin-top:9px"><span class="legend" style="top:-11px"></span><c style="margin-top:9px"></c></span> +</div> + +<div> + <span class="fieldset" style="margin-top:19px"><span class="legend" style="top:-11px"></span><c style="margin-top:9px"></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="top:-12px"></span><c style="margin-top:8px"></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span> +</div> + +<div> + <span class="fieldset" style="margin-top:9px"><span class="legend" style="top:-11px"></span><c style="margin-top:19px"></c></span> +</div> + +<div> + <span class="fieldset" style="margin-top:9px"><span class="legend" style="top:-11px"></span><c style="margin-top:29px"></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="top:-2px; z-index:1"></span><c style="position:relative; z-index:1"></c></span> +</div> +</f> + +<f class=t2> +<div> + <span class="fieldset" style="margin-top:4px"><span class="legend" style="top:-16px"></span><c style="margin-top:4px"></c></span> +</div> + +<div> + <span class="fieldset" style="margin-top:14px"><span class="legend" style="top:-16px"></span><c style="margin-top:4px"></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span> +</div> + +<div> + <span class="fieldset" style="margin-top:4px"><span class="legend" style="top:-16px"></span><c style="margin-top:14px"></c></span> +</div> + +<div> + <span class="fieldset" style="margin-top:4px"><span class="legend" style="top:-16px"></span><c style="margin-top:24px"></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="top:-12px; height:16px"></span><c></c></span> +</div> +</f> + +<f class=t3> +<div> + <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span> +</div> + +<div> + <span class="fieldset" style="margin-top: 4px"><span class="legend" style="margin-top: -16px"><x style="top:3px"></x></span><c></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="margin-top: -16px"><x style="top:-3px"></x></span><c style="margin-top:4px"></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="margin-top: -16px"><x style="top:-3px"></x></span><c style="margin-top:14px"></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span> +</div> +</f> + +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2.html new file mode 100644 index 0000000000..9ca9e18adf --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2.html @@ -0,0 +1,139 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>legend block-axis margins</title> + <link rel="match" href="legend-block-margins-2-ref.html"> +<style> +fieldset { + width: 40px; + border: 2px solid blue; + padding: 4px; + margin: 0; +} +legend { + width: 10px; + height: 20px; + padding: 0; + background: grey; + +} + +.t2 fieldset { border-top-width: 12px; } +.t3 fieldset { border-top-width: 12px; } +.t3 legend { height: 6px; } + +div { border: 1px solid; margin: 0 2px 10px 0; } +c { display:block; height:10px; background: lightgrey; } +f { float: left; } +</style> +</head> +<body> + +<f> +<div> + <fieldset><legend></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: 10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -20px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -30px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: 10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: 20px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: -20px"></legend><c></c></fieldset> +</div> +</f> + +<f class=t2> +<div> + <fieldset><legend></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: 10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -20px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -30px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: 10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: 20px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: -20px"></legend><c></c></fieldset> +</div> +</f> + +<f class=t3> +<div> + <fieldset><legend></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: 10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -20px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -30px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: 10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: 20px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: -20px"></legend><c></c></fieldset> +</div> +</f> + +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-ref.html new file mode 100644 index 0000000000..f2701d26f3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>Reference for legend block margins</title> +<style> +body { margin: 0; } +.fieldset { margin: 2em 1em 1em 1em; border: 1em solid green; } +.legend { position: absolute; margin-top: -1em; margin-left: 1em; background: white; height: 1em; } +.inner { margin: 3em 1em 1em 1em; height: 1em; } +</style> +<p>There should be no red.</p> +<div class=fieldset> + <div class=legend>X</div> + <div class=inner>Y</div> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins.html new file mode 100644 index 0000000000..98cd16c7c1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>legend block margins</title> +<link rel=match href=legend-block-margins-ref.html> +<style> + body { margin: 0; } + fieldset { margin: 1em; border: 1em solid green; padding: 0; background: white; } + legend { margin: 1em 1em 2em 1em; height: 1em; padding: 0; } + .inner { margin: 1em; height: 1em; } + .behind { position: absolute; left: 1em; right: 1em; margin-top: 1em; height: 7em; background: red; z-index: -1; } +</style> +<p>There should be no red.</p> +<div class=behind></div> +<fieldset> + <legend>X</legend> + <div class=inner>Y</div> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-position-centering.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-position-centering.html new file mode 100644 index 0000000000..a4eda6e3ef --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-position-centering.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<link rel="help" href="https://html.spec.whatwg.org/C/#the-fieldset-and-legend-elements"> +<!-- A test for the following paragraph: +The element is expected to be positioned in the block-flow direction such that +its border box is centered over the border on the block-start side of the +fieldset element. +--> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +fieldset { + margin: 0; + padding: 0; + border: 100px solid black; +} +legend { + height: 0px; + border-color: yellow; + border-style: solid; +} +</style> +<fieldset> +<legend style="border-width:50px"></legend> +<br> +</fieldset> +<br> + +<fieldset> +<legend style="border-width:25px 50px"></legend> +<br> +</fieldset> +<br> + +<fieldset> +<legend style="border-width:10px 50px 40px 50px"></legend> +<br> +</fieldset> +<br> + +<fieldset> +<legend style="border-width:40px 50px 10px 50px"></legend> +<br> +</fieldset> + +<script> +function legendBlockOffset(fieldset) { + let legend = fieldset.querySelector('legend'); + return legend.getBoundingClientRect().y - fieldset.getBoundingClientRect().y; +} + +test(() => { + let fieldsets = document.querySelectorAll('fieldset'); + assert_equals(legendBlockOffset(fieldsets[0]), 0); + assert_equals(legendBlockOffset(fieldsets[1]), 25); + assert_equals(legendBlockOffset(fieldsets[2]), 25); + assert_equals(legendBlockOffset(fieldsets[3]), 25); +}, 'Legend\'s border-box should be centere on the fieldset border'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering-ref.html new file mode 100644 index 0000000000..e6eff47e53 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>Reference for Rendering of display: none legend</title> +<style> + div { border: 2em solid lime; width: 0; } +</style> +<p>There should be a green box below.</p> +<div></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering.html new file mode 100644 index 0000000000..abf3c45df7 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>Rendering of display: none legend</title> +<link rel=match href=legend-display-none-rendering-ref.html> +<style> + fieldset { border: 2em solid lime; width: 0; margin: 0; padding: 0; } + legend { display: none; background: red; } +</style> +<p>There should be a green box below.</p> +<fieldset> + <legend>FAIL</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none.html new file mode 100644 index 0000000000..689454ac49 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>legend display: none</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + legend { display: none; } +</style> +<fieldset> + <legend>Foo</legend> +</fieldset> +<script> + test(() => { + const display = getComputedStyle(document.querySelector('legend')).display; + assert_equals(display, 'none'); + }); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering-ref.html new file mode 100644 index 0000000000..189b195f61 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering-ref.html @@ -0,0 +1,34 @@ +<!doctype html> +<title>Reference for rendered legend and CSS display rendering</title> +<style> +body { margin: 0; } +div { width: 600px; box-sizing: border-box; background: #ddd; border: 1px solid; } +.padding { padding-left: 5em; } +.margin { margin-left: 5em; } +.cell { display: inline-block; width: 50%; } +.ruby { display: block; } +</style> +<div><span class=cell>table</span><span class=cell>table</span></div> +<div class=padding>table-row-group</div> +<div class=padding>table-header-group</div> +<div class=padding>table-footer-group</div> +<div class=padding>table-row</div> +<div class=margin>table-cell</div> +<div class=padding>table-column-group</div> +<div class=padding>table-column</div> +<div>table-caption</div> +<div>flow</div> +<div>flow-root</div> +<div>run-in</div> +<div>inline</div> +<div>inline-block</div> +<div><span class=cell>inline-table</span><span class=cell>inline-table</span></div> +<div><span class=ruby>ruby</span><span class=ruby>ruby</span></div> +<div>ruby-base</div> +<div>ruby-text</div> +<div>ruby-base-container</div> +<div>ruby-text-container</div> +<div><span class=cell>grid</span><span class=cell>grid</span></div> +<div><span class=cell>inline-grid</span><span class=cell>inline-grid</span></div> +<div><span class=cell>flex</span><span class=cell>flex</span></div> +<div><span class=cell>inline-flex</span><span class=cell>inline-flex</span></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering.html new file mode 100644 index 0000000000..ba6610503a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering.html @@ -0,0 +1,119 @@ +<!doctype html> +<title>rendered legend and CSS display rendering</title> +<link rel=match href=legend-display-rendering-ref.html> +<style> +body { margin: 0; } +fieldset { margin: 0; padding: 0; border: none; } +legend { width: 600px; box-sizing: border-box; padding: 0; background: #ddd; border: 1px solid; } +[style="display: table"] span, +[style="display: inline-table"] span { display: table-cell; } +[style="display: table-row-group"], +[style="display: table-header-group"], +[style="display: table-footer-group"], +[style="display: table-row"], +[style="display: table-column-group"], +[style="display: table-column"] { padding-left: 5em; /* would be ignored if not blockified */ } +[style="display: table-cell"] { margin-left: 5em; /* would be ignored if not blockified */ } +.rb { display: ruby-base; } +.rt { display: ruby-text; } +[style="display: grid"], +[style="display: inline-grid"] { grid-template-columns: auto auto; } +[style="display: flex"] span, +[style="display: inline-flex"] span { display: block; flex-grow: 1 } +</style> +<fieldset> + <legend style="display: table"><span>table</span><span>table</span></legend> +</fieldset> + +<fieldset> + <legend style="display: table-row-group">table-row-group</legend> +</fieldset> + +<fieldset> + <legend style="display: table-header-group">table-header-group</legend> +</fieldset> + +<fieldset> + <legend style="display: table-footer-group">table-footer-group</legend> +</fieldset> + +<fieldset> + <legend style="display: table-row">table-row</legend> +</fieldset> + +<fieldset> + <legend style="display: table-cell">table-cell</legend> +</fieldset> + +<fieldset> + <legend style="display: table-column-group">table-column-group</legend> +</fieldset> + +<fieldset> + <legend style="display: table-column">table-column</legend> +</fieldset> + +<fieldset> + <legend style="display: table-caption">table-caption</legend> +</fieldset> + +<fieldset> + <legend style="display: flow">flow</legend> +</fieldset> + +<fieldset> + <legend style="display: flow-root">flow-root</legend> +</fieldset> + +<fieldset> + <legend style="display: run-in">run-in</legend> +</fieldset> + +<fieldset> + <legend style="display: inline">inline</legend> +</fieldset> + +<fieldset> + <legend style="display: inline-block">inline-block</legend> +</fieldset> + +<fieldset> + <legend style="display: inline-table"><span>inline-table</span><span>inline-table</span></legend> +</fieldset> + +<fieldset> + <legend style="display: ruby"><span class=rb>ruby</span><span class=rt>ruby</span></legend> +</fieldset> + +<fieldset> + <legend style="display: ruby-base">ruby-base</legend> +</fieldset> + +<fieldset> + <legend style="display: ruby-text">ruby-text</legend> +</fieldset> + +<fieldset> + <legend style="display: ruby-base-container">ruby-base-container</legend> +</fieldset> + +<fieldset> + <legend style="display: ruby-text-container">ruby-text-container</legend> +</fieldset> + +<fieldset> + <legend style="display: grid"><span>grid</span><span>grid</span></legend> +</fieldset> + +<fieldset> + <legend style="display: inline-grid"><span>inline-grid</span><span>inline-grid</span></legend> +</fieldset> + +<fieldset> + <legend style="display: flex"><span>flex</span><span>flex</span></legend> +</fieldset> + +<fieldset> + <legend style="display: inline-flex"><span>inline-flex</span><span>inline-flex</span></legend> +</fieldset> + diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display.html new file mode 100644 index 0000000000..b6c57a67ba --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display.html @@ -0,0 +1,40 @@ +<!doctype html> +<title>rendered legend and CSS display</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +legend { width:initial; } +</style> +<fieldset><legend id="ref">x</legend></fieldset> +<fieldset><legend id="test">x</legend></fieldset> +<script> + const refElm = document.querySelector('#ref'); + const refStyle = getComputedStyle(refElm); + const testElm = document.querySelector('#test'); + const values = ['block', 'table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-cell', + 'table-column-group', 'table-column', 'table-caption', 'list-item', 'flow', 'flow-root','run-in','inline', + 'inline-block', 'inline-table', 'block ruby', 'ruby', 'ruby-base', 'ruby-text', 'ruby-base-container', 'ruby-text-container', + 'grid', 'inline-grid', 'flex', 'inline-flex']; + const extraStyle = ['', 'overflow:hidden', 'columns:1', 'overflow:hidden;columns:1']; + + for (const style of extraStyle) { + for (const val of values) { + test(() => { + testElm.style.removeProperty('display'); + testElm.style = style; + testElm.style.display = val; + const computed = getComputedStyle(testElm); + // Note that computed value is different from the used value. + // E.g., if ruby is not supported, the following assertion will + // fail as the computed value of display will be block. + // If ruby is supported, computed.display will return "ruby", + // but the used value is supposed to be "block ruby". + // Also, 'flow' is serialized as 'block' for legacy reasons. + let expected = val == 'flow' ? 'block' : val; + assert_equals(computed.display, expected, `display: ${val} is not supported`); + assert_equals(computed.width, refStyle.width, 'width'); + assert_equals(testElm.offsetLeft, refElm.offsetLeft, 'offsetLeft'); + }, `rendered legend with display: ${val}` + (style == '' ? '' : "; " + style)); + } + } +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-dynamic-update.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-dynamic-update.html new file mode 100644 index 0000000000..5dc68244fe --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-dynamic-update.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>legend and dynamic update</title> +<link rel=fieldset-foo-ref.html> +<p>There should be a normal fieldset below with the legend "Foo".</p> +<fieldset> + <legend>F</legend> +</fieldset> +<script> + const legend = document.querySelector('legend'); + // force layout + legend.offsetTop; + requestAnimationFrame(() => { + legend.textContent += "oo"; + requestAnimationFrame(() => { + document.documentElement.removeAttribute('class'); + }); + }); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-abspos.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-abspos.html new file mode 100644 index 0000000000..7979e1d03e --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-abspos.html @@ -0,0 +1,88 @@ +<!doctype html> +<title>legend and float and position: absolute/fixed</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + body { margin: 0; } + fieldset { margin: 0; padding: 20px; border: 10px solid; width: 300px; } + legend { height: 10px; } + #legend1 { float: left; } + #legend2 { float: right; } + #legend3 { position: absolute; } + #legend4 { position: fixed; } +</style> +<fieldset id=fieldset> + <div>div</div> + <legend id=legend1>legend1</legend> + <legend id=legend2>legend2</legend> + <legend id=legend3>legend3</legend> + <legend id=legend4>legend4</legend> + <legend id=legend5>legend5</legend> +</fieldset> +<script> + const fieldset = document.getElementById('fieldset'); + const legends = document.getElementsByTagName('legend'); + const [legend1, legend2, legend3, legend4, legend5] = legends; + const expectedTop = 0; + const expectedLeft = 10 + 20; + + function assert_rendered_legend(legend) { + assert_equals(legend.offsetTop, expectedTop, `${legend.id}.offsetTop`); + assert_equals(legend.offsetLeft, expectedLeft, `${legend.id}.offsetLeft`); + for (const other of legends) { + if (other === legend) { + continue; + } + if (other.offsetTop === expectedTop && other.offsetLeft === expectedLeft) { + assert_unreached(`${other.id} should not be the "rendered legend"`); + } + } + } + + test(t => { + assert_rendered_legend(legend5); + }, 'no dynamic changes'); + + test(t => { + const legend = document.createElement('legend'); + t.add_cleanup(() => { + legend.remove(); + }); + legend.id = 'script-inserted'; + legend.textContent = 'script-inserted legend'; + fieldset.insertBefore(legend, legend1); + assert_rendered_legend(legend); + legend.remove(); + assert_rendered_legend(legend5); + }, 'inserting a new legend and removing it again'); + + test(t => { + t.add_cleanup(() => { + legend1.id = 'legend1'; + legend2.id = 'legend2'; + }); + legend2.id = ''; + assert_rendered_legend(legend2); + legend1.id = ''; + assert_rendered_legend(legend1); + legend1.id = 'legend1'; + assert_rendered_legend(legend2); + legend2.id = 'legend2'; + assert_rendered_legend(legend5); + }, 'dynamic changes to float'); + + test(t => { + t.add_cleanup(() => { + legend3.id = 'legend3'; + legend4.id = 'legend4'; + }); + legend4.id = ''; + assert_rendered_legend(legend4); + legend3.id = ''; + assert_rendered_legend(legend3); + legend3.id = 'legend3'; + assert_rendered_legend(legend4); + legend4.id = 'legend4'; + assert_rendered_legend(legend5); + }, 'dynamic changes to position'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-ref.html new file mode 100644 index 0000000000..c51bca231e --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>Reference for floated legend should not disappear</title> +<style> + div { width: 100px; height: 100px; background: lime; } +</style> +<p>There should be no red.</p> +<div></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float.html new file mode 100644 index 0000000000..f70e952ed0 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>floated legend should not disappear</title> +<link rel=match href=legend-float-ref.html> +<style> + fieldset { margin: 0; padding: 0; border: none; width: 100px; height: 50px; background: red; } + legend { width: 100px; height: 50px; background: lime; padding: 0; } + .left { float: left; } + .right { float: right; } +</style> +<p>There should be no red.</p> +<fieldset><legend class=left></legend></fieldset> +<fieldset><legend class=right></legend></fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-grid-flex-multicol.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-grid-flex-multicol.html new file mode 100644 index 0000000000..edd2600d4a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-grid-flex-multicol.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>legend and flexbox, grid & multicol</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +legend { width: 200px; background: silver } +#flex { display: flex; } +#inline-flex { display: inline-flex; } +#grid { display: grid; } +#inline-grid { display: inline-grid; } +#grid, #inline-grid { grid-template-columns: auto auto } +#multicol { columns: 2; } +</style> +<fieldset><legend id=ref>12</legend></fieldset> +<fieldset><legend id=flex><div>1</div><div>2</div></legend></fieldset> +<fieldset><legend id=inline-flex><div>1</div><div>2</div></legend></fieldset> +<fieldset><legend id=grid><div>1</div><div>2</div></legend></fieldset> +<fieldset><legend id=inline-grid><div>1</div><div>2</div></legend></fieldset> +<fieldset><legend id=multicol><div>1</div><div>2</div></legend></fieldset> +<script> + const ref = document.getElementById('ref'); + for (const id of ["flex", "inline-flex", "grid", "inline-grid", "multicol"]) { + test(() => { + const elm = document.getElementById(id); + assert_equals(elm.offsetHeight, ref.offsetHeight, 'offsetHeight'); + if (id !== "multicol") { + assert_equals(getComputedStyle(elm).display, id, 'display'); + } + }, id); + } +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-hover.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-hover.html new file mode 100644 index 0000000000..170e3cc874 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-hover.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<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> + +<style> +legend:hover { + background: lime; +} +</style> +<h1>Header</h1> +<fieldset> + <legend>Legend</legend> +</fieldset> +<script> +// https://crbug.com/1127743 +promise_test(async () => { + await test_driver.click(document.querySelector('legend')); + assert_not_equals(document.querySelector('legend:hover'), null); +}, 'The rendered LEGEND should work well for :hover.'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot-ref.html new file mode 100644 index 0000000000..ee64e81762 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<fieldset> + <legend>Is rendered legend</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot.html new file mode 100644 index 0000000000..c4ab5a3ea0 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="match" href="legend-in-slot-ref.html"> + +<div id="host"> + <legend id="legend">Was rendered legend</legend> + <legend>Is rendered legend</legend> +</div> +<script> +let root = document.querySelector('#host').attachShadow({mode:"open"}); +root.innerHTML = ` +<fieldset> + <slot></slot> +</fieldset>`; +document.body.offsetTop; +document.querySelector('#legend').remove(); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-inline-position-with-fieldset-padding.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-inline-position-with-fieldset-padding.html new file mode 100644 index 0000000000..0b2624859e --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-inline-position-with-fieldset-padding.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<link rel="help" href="https://html.spec.whatwg.org/C/#the-fieldset-and-legend-elements"> +<!-- A test for the following paragraphs: +The element's box is expected to be constrained in the inline direction by +the inline content size of the fieldset as if it had used its computed +inline padding. +Example: +For example, if the fieldset has a specified padding of 50px, then the +rendered legend will be positioned 50px in from the fieldset's border. The +padding will further apply to the anonymous fieldset content box instead +of the fieldset element itself. +--> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +fieldset { + width: 400px; + margin: 0; + padding: 0 50px; + border: 2px solid black; +} +legend { + width: 100%; + padding: 0; + background-color: yellow; +} +.content { + background-color: lime; +} +</style> +<fieldset> +<legend>Legend</legend> +</fieldset> + +<script> +test(() => { + let fieldset = document.querySelector('fieldset'); + let legend = document.querySelector('legend'); + assert_equals(legend.offsetLeft - fieldset.offsetLeft, 52); + assert_equals(legend.offsetWidth, 400); +}, 'Test legend\'s inline-size in a fieldset with inline paddings'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering-ref.html new file mode 100644 index 0000000000..f7b4754e09 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference for legend and display: list-item numbering</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + +<style> +ol { margin: 0; padding: 0; border: none; } +ol > * { margin: 0 40px; padding: 0; } +</style> + +<ol> + <li value="2">B</li> + <li value="1">A</li> + <li value="3">C</li> +</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering.html new file mode 100644 index 0000000000..d7d904b8c7 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Legend and display: list-item numbering</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel=match href="legend-list-item-numbering-ref.html"> + +<style> +fieldset { margin: 0; padding: 0; border: none; list-style-type: decimal; } +fieldset > * { margin: 0 40px; padding: 0; display: list-item; } +</style> + +<fieldset> + <div>A</div> + <legend>B</legend> + <div>C</div> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-ref.html new file mode 100644 index 0000000000..ee76e93b64 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>Reference for legend and dipslay: list-item</title> +<style> + div { margin: 0 40px; display: list-item; } +</style> +<p>There should be a bullet point below.</p> +<div>X</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item.html new file mode 100644 index 0000000000..e967643572 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>legend and dipslay: list-item</title> +<link rel=match href=legend-list-item-ref.html> +<style> + fieldset { margin: 0; padding: 0; border: none; } + legend { margin: 0 40px; padding: 0; display: list-item; } +</style> +<p>There should be a bullet point below.</p> +<fieldset> + <legend>X</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-margin-inline.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-margin-inline.html new file mode 100644 index 0000000000..8daf78db99 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-margin-inline.html @@ -0,0 +1,50 @@ +<!doctype html> +<title>legend and margin (inline direction)</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + fieldset { margin: 0 0 10px 0; padding: 20px; border: 10px solid; width: 500px; } + legend { height: 10px; width: 200px; padding: 0; } + + #legend-center { margin-left: auto; margin-right: auto; } + #legend-right { margin-left: auto; } + #legend-10 { margin-left: 10px; } +</style> +<fieldset> + <legend id=legend-left>left</legend> +</fieldset> +<fieldset> + <legend id=legend-center>center</legend> +</fieldset> +<fieldset> + <legend id=legend-right>right</legend> +</fieldset> +<fieldset> + <legend id=legend-10>10px</legend> +</fieldset> + +<script> + const legends = document.getElementsByTagName('legend'); + const [legendLeft, legendCenter, legendRight, legend10] = legends; + + const expectedLeft = 8 + 10 + 20; + const expectedCenter = expectedLeft + (500 / 2) - (200 / 2); + const expectedRight = expectedLeft + 500 - 200; + const expected10 = expectedLeft + 10; + + test(() => { + assert_equals(legendLeft.offsetLeft, expectedLeft); + }, 'left'); + + test(() => { + assert_equals(legendCenter.offsetLeft, expectedCenter); + }, 'center'); + + test(() => { + assert_equals(legendRight.offsetLeft, expectedRight); + }, 'right'); + + test(() => { + assert_equals(legend10.offsetLeft, expected10); + }, '10px'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order-ref.html new file mode 100644 index 0000000000..94f4991f22 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>Reference for fieldset painting order</title> + +<p>There should be a green square below, and no red.</p> +<div style="width:100px; height:100px; background:green;"></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order.html new file mode 100644 index 0000000000..ac0bd43037 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>Legend painting order</title> +<link rel=match href=legend-painting-order-ref.html> + +<p>There should be a green square below, and no red.</p> +<div style="float:left; width:0px; height:0px;"> + <div style="width:100px; height:100px; background:red;"></div> +</div> +<fieldset style="margin:0; border:none; padding:0;"> + <legend style="padding:0;"> + <div style="float:left; width:100px; height:100px; background:green;"></div> + </legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2-ref.html new file mode 100644 index 0000000000..da2dd3e1c6 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Reference for legend position: relative</title> +<style> +#fieldset2 { + background: lime; + border: 2px solid lime; + width: 200px; + padding: 0; + margin: 0; +} +#legend2 { + background: #00ffff; +} +</style> +<p>"Legend" should be shown.</p> +<fieldset id="fieldset2"><legend id="legend2">Legend</legend></fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2.html new file mode 100644 index 0000000000..3fbdbd5c20 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>legend position: relative</title> +<link ref=help href="http://crbug.com/1151295"> +<link rel=match href=legend-position-relative-2-ref.html> +<style> +#fieldset2 { + background: lime; + border: 2px solid lime; + width: 200px; + padding: 0; + margin: 0; + overflow: hidden; +} +#legend2 { + position: relative; + overflow: hidden; + background: #00ffff; +} +</style> +<p>"Legend" should be shown.</p> +<fieldset id="fieldset2"><legend id="legend2">Legend</legend></fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-ref.html new file mode 100644 index 0000000000..fd6c11a005 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>Reference for legend position: relative</title> +<style> +div { display: inline-block; background: lime; } +.a { width: 100px; height: 200px; } +.b { width: 100px; height: 100px; } +.c { width: 200px; height: 200px; } +</style> +<p>There should be no red.</p> +<div class=a></div><div class=b></div><div class=c></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative.html new file mode 100644 index 0000000000..9938361261 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>legend position: relative</title> +<link rel=match href=legend-position-relative-ref.html> +<style> +fieldset { border: 100px solid lime; width: 200px; padding: 0; margin: 0 } +legend { position: relative; left: 100px; width: 100px; height: 100px; padding: 0 } +.behind { position: absolute; left: 208px; width: 100px; height: 100px; background: red; z-index: -1 } +</style> +<p>There should be no red.</p> +<div class=behind></div> +<fieldset><legend></legend></fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sans-fieldset-display.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sans-fieldset-display.html new file mode 100644 index 0000000000..5f27ca5c29 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sans-fieldset-display.html @@ -0,0 +1,68 @@ +<!doctype html> +<title>legend sans fieldset and CSS display</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + * { margin: 0; padding: 0; } + .table, table { display: table; width: 200px; border-collapse: collapse; } + .tbody { display: table-row-group; } + .tr { display: table-row; } + .td, td { display: table-cell; } + .col { display: table-column; } + .caption { display: table-caption; } + .li { display: list-item; } + .inline { display: inline; } + .inline-block { display: inline-block; } + .inline-table { display: inline-table; } + .ruby { display: ruby; } + .rt { display: ruby-text; } + rt { font-size: inherit; } +</style> +<legend class=table> + <legend class=caption>caption</legend> + <legend class=col></legend><legend class=col></legend> + <legend class=tbody> + <legend class=tr> + <legend class=td>td</legend><legend class=td>td</legend> + </legend> + </legend> +</legend> +<table> + <caption>caption</caption> + <col><col> + <tbody> + <tr> + <td>td<td>td +</table> +<ul> + <legend class=li>li</legend> + <li>li</li> +</ul> +<p>foo <legend class=inline>inline</legend> <span>inline</span> +<p>foo <legend class=inline-block>inline-block</legend> <span class=inline-block>inline-block</span> +<p><legend class=ruby>ruby<legend class=rt>rt</legend></legend> <ruby>ruby<rt>rt</ruby> +<script> + function test_display(testSelector, refSelector) { + test(() => { + const testElm = document.querySelector(testSelector); + const refElm = document.querySelector(refSelector); + const testStyle = getComputedStyle(testElm); + const refStyle = getComputedStyle(refElm); + assert_equals(testStyle.display, refStyle.display, testSelector + ' display'); + assert_equals(testStyle.width, refStyle.width, testSelector + ' width'); + assert_equals(testStyle.height, refStyle.height, testSelector + ' height'); + }, testSelector); + } + + test_display('.table', 'table'); + test_display('.caption', 'caption'); + test_display('.col', 'col'); + test_display('.tbody', 'tbody'); + test_display('.tr', 'tr'); + test_display('.td', 'td'); + test_display('.li', 'li'); + test_display('.inline', 'span'); + test_display('.inline-block', 'span.inline-block'); + test_display('.ruby', 'ruby'); + test_display('.rt', 'rt'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sticky-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sticky-crash.html new file mode 100644 index 0000000000..71debf7e44 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sticky-crash.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="http://crbug.com/1197946"> +<style> +legend { + position: sticky; + left: -1em; +} +fieldset { + position: sticky; + left: -1em; + overflow-y: auto; +} +</style> +<fieldset> +<legend>Legend</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall-ref.html new file mode 100644 index 0000000000..004ce42129 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>Reference for tall legend</title> +<style> +body, p { margin: 0; } +.legend { position: absolute; height: 160px; margin-left: 20px; inline-size: fit-content; background: lime } +.fieldset { + position: absolute; + z-index: -1; + margin-top: calc((/* half legend height */ 160px / 2) - (/* half top border */ 20px / 2)); + background: green; + height: 40px; + left: 0; + right: 0; +} +.hello { margin-top: 160px; margin-left: 20px; } +</style> +<p>There should be no red.</p> +<div class=legend>X</div> +<div class=fieldset></div> +<div class=hello>HELLO</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall.html new file mode 100644 index 0000000000..7b9495946e --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>tall legend</title> +<link rel=match href=legend-tall-ref.html> +<style> +body, p { margin: 0; } +fieldset { height: 30px; margin: 0; border: 20px solid green; padding: 0px; background: red; } +legend { height: 160px; background: lime; padding: 0; } +#behind { + position: absolute; + z-index: -1; + margin-top: calc((/* half legend height */ 160px / 2) - (/* half top border */ 20px / 2)); + background: red; + height: 40px; + left: 0; + right: 0; +} +</style> +<p>There should be no red.</p> +<div id=behind></div> +<fieldset><legend>X</legend>HELLO</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend.html new file mode 100644 index 0000000000..1cda91f32b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend.html @@ -0,0 +1,62 @@ +<!doctype html> +<title>The legend element</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +#ref { + display: block; + unicode-bidi: isolate; + padding-left: 2px; + padding-right: 2px; + /* TODO: uncomment this when these properties are widely supported + padding-inline-start: 2px; padding-inline-end: 2px; + */ +} +</style> + +<legend id=in-body></legend> +<fieldset> + <legend id=rendered-legend></legend> + <legend id=in-fieldset-second-child></legend> + <div><legend id=in-fieldset-descendant></legend></div> +</fieldset> +<div id=ref></div> + +<script> +setup(() => { + self.legends = [].slice.call(document.querySelectorAll('legend')); + self.refStyle = getComputedStyle(document.getElementById('ref')); + self.props = ['display', + 'unicodeBidi', + 'marginTop', + 'marginRight', + 'marginBottom', + 'marginLeft', + 'paddingTop', + 'paddingRight', + 'paddingBottom', + 'paddingLeft', + 'overflow', + // Extra tests + 'height', + 'box-sizing', + ]; +}); +legends.forEach(legend => { + const testStyle = getComputedStyle(legend); + props.forEach(prop => { + test(() => { + assert_equals(testStyle[prop], refStyle[prop]); + }, `${legend.id}: ${prop}`); + }); + + // Test width separately since it differs outside fieldset vs. in fieldset vs. rendered legend + test(() => { + if (legend.id === 'rendered-legend') { + assert_equals(testStyle.width, '0px'); + } else { + assert_not_equals(testStyle.width, '0px'); + } + }, `${legend.id}: width`); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/min-inline-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/min-inline-size.html new file mode 100644 index 0000000000..92c3302970 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/min-inline-size.html @@ -0,0 +1,39 @@ +<!doctype html> +<title>fieldset min-inline-size</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + fieldset { width: 0; height: 0 } + fieldset > div { width: 100px; height: 100px } + #vertical-lr { writing-mode: vertical-lr } + #vertical-rl { writing-mode: vertical-rl } + .override { min-inline-size: 5px } +</style> +<fieldset id=horizontal-tb><div></div></fieldset> +<fieldset id=vertical-lr><div></div></fieldset> +<fieldset id=vertical-rl><div></div></fieldset> +<script> + for (const className of ['', 'override']) { + const expected = className === '' ? '100px' : '5px'; + test(() => { + const fieldset = document.getElementById('horizontal-tb'); + fieldset.className = className; + assert_equals(getComputedStyle(fieldset).width, expected, 'width'); + assert_equals(getComputedStyle(fieldset).height, '0px', 'height'); + }, `horizontal-tb ${className}`); + + test(() => { + const fieldset = document.getElementById('vertical-lr'); + fieldset.className = className; + assert_equals(getComputedStyle(fieldset).width, '0px', 'width'); + assert_equals(getComputedStyle(fieldset).height, expected, 'height'); + }, `vertical-lr ${className}`); + + test(() => { + const fieldset = document.getElementById('vertical-rl'); + fieldset.className = className; + assert_equals(getComputedStyle(fieldset).width, '0px', 'width'); + assert_equals(getComputedStyle(fieldset).height, expected, 'height'); + }, `vertical-rl ${className}`); + } +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/multicol-legend-becomes-floated-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/multicol-legend-becomes-floated-crash.html new file mode 100644 index 0000000000..0e7f87232a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/multicol-legend-becomes-floated-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1122722"> +<fieldset id="fieldset"> + <legend id="legend"></legend> +</fieldset> +<script> + document.body.offsetTop; + fieldset.style.columns = "2"; + legend.style.cssFloat = "left"; +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/no-red-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/no-red-ref.html new file mode 100644 index 0000000000..32b7d46d6f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/no-red-ref.html @@ -0,0 +1,3 @@ +<!doctype html> +<title>Reference there should be no red</title> +<p>There should be no red.</p> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/resources/fieldset-vertical.css b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/resources/fieldset-vertical.css new file mode 100644 index 0000000000..b358d925a7 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/resources/fieldset-vertical.css @@ -0,0 +1,18 @@ +body > div { display: inline-block } +fieldset, .fieldset { padding: 0; height:10em; width:2em; border:1em groove; margin: 0em; line-height:1 } +legend, .legend { padding: 0; width: 1em } +.legend { + background: white; /* overlap the border to emulate the border not being painted */ + display: table; /* shrink-wrap */ +} + +[style="writing-mode: vertical-lr"] .legend { + margin-left: -1em; +} +[style="writing-mode: vertical-rl"] .legend { + margin-right: -1em; +} +.top { margin-bottom: auto } +.center { margin-top: auto; margin-bottom: auto } +.bottom { margin-top: auto } +.rtl { direction: rtl } diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/second-legend-becomes-rendered-legend-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/second-legend-becomes-rendered-legend-crash.html new file mode 100644 index 0000000000..6e36b3bb5a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/second-legend-becomes-rendered-legend-crash.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1119400"> +<fieldset> + <legend id="legend1"></legend> + <legend id="legend2"><div id="child" style="float:left;"></div></legend> +</fieldset> +<script> + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + legend1.style.display = "none"; + document.body.offsetTop; + + child.style.width = "22px"; + document.body.offsetTop; + + child.style.display = "none"; + }); + }); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-crash.html new file mode 100644 index 0000000000..a6e8fa7a82 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-crash.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="help" href="http://crbug.com/1146872"> +<body> +<fieldset><span><span></span></span></fieldset> +<div id="host"><span></span></div> +<script> +const host = document.querySelector('#host'); +const shadowRoot = host.attachShadow({mode: 'closed'}); +const fieldset = shadowRoot.appendChild(document.createElement('fieldset')); +fieldset.setAttribute('style', 'overflow: scroll'); +fieldset.innerHTML = '<slot></slot>'; +</script> +<style> +*:not(fieldset, div) { + position: sticky; + bottom: 72pc; +} +fieldset { + overflow: visible scroll; +} +</style> +</body> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-ref.html new file mode 100644 index 0000000000..95e3c05cd8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<body> +<style> +body { + margin: 0; +} + +.fieldset div { + height:1000px; +} + +span { + background: lime; + display: block; + height: 40px; + position: absolute; + top: 4px; + left: 0px; + width: 40px; +} + +.fieldset { + border: none; + height: 400px; + margin: 0; + overflow: scroll; + padding: 0; +} +</style> +<div class="fieldset"><div><span></span></div></div> +<script> +document.querySelector('.fieldset').scrollTop = 1000; +</script> +</body> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content.html new file mode 100644 index 0000000000..f60d9ec528 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="help" href="http://crbug.com/1146925"> +<link rel="match" href="sticky-content-ref.html"> +<body> +<style> +body { + margin: 0; +} + +fieldset div { + height:1000px; +} + +span { + background: lime; + display: block; + height: 40px; + position: sticky; + top: 4px; + width: 40px; +} + +fieldset { + border: none; + height: 400px; + margin: 0; + overflow: scroll; + padding: 0; +} +</style> +<fieldset><div><span></span></div></fieldset> +<script> +document.querySelector('fieldset').scrollTop = 1000; +</script> +</body> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/different-writing-modes.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/different-writing-modes.html new file mode 100644 index 0000000000..c697d4dbbf --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/different-writing-modes.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="match" href="reference/different-writing-modes-ref.html"> +<style> +frame { + writing-mode: vertical-rl; +} +</style> +<frameset cols="50%,*" rows="50%,*"> + <frame src="resources/green.html"></frame> + <frame src="resources/green.html"></frame> + <frame></frame> +</frameset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/exceed-then-not-exceed.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/exceed-then-not-exceed.html new file mode 100644 index 0000000000..85a5b98ae5 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/exceed-then-not-exceed.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +promise_test(async () => { + await new Promise(resolve => document.addEventListener('DOMContentLoaded', resolve, {once:true})); + await new Promise(resolve => requestAnimationFrame(resolve)); + await new Promise(resolve => requestAnimationFrame(resolve)); + // #fs1, #container, and #child were laid out. + + // Move #child. + // It makes #container dirty, and it exceeds from #fs1's 1x1 grid. + document.querySelector('#fs1').insertBefore( + document.querySelector('#child'), document.querySelector('#container')); + await new Promise(resolve => requestAnimationFrame(resolve)); + await new Promise(resolve => requestAnimationFrame(resolve)); + + // Removing #child makes #container visible again. + document.querySelector('#child').remove(); + await new Promise(resolve => requestAnimationFrame(resolve)); + await new Promise(resolve => requestAnimationFrame(resolve)); +}, 'No crash when a dirty FRAMESET exceeds from the grid then fits in it again'); +</script> +</head> +<frameset id="fs1"> +<frameset id="container"> +<frameset id="child"></frameset> +</frameset> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/frameset-visibility-hidden.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/frameset-visibility-hidden.html new file mode 100644 index 0000000000..b6c454b03f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/frameset-visibility-hidden.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#frames-and-framesets"> +<link rel="match" href="reference/empty-ref.html"> +<frameset cols="100%" style="visibility: hidden"> + <frame src="resources/red.html"> +</frameset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-abssize.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-abssize.html new file mode 100644 index 0000000000..ba55da8686 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-abssize.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#frames-and-framesets"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1116832"> +<link rel="match" href="reference/green-ref.html"> +<frameset cols="4294967227%,*" frameborder="0"> + <frame src="resources/green.html"> + <frame src="resources/red.html"> +</frameset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-percentage.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-percentage.html new file mode 100644 index 0000000000..ba55da8686 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-percentage.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#frames-and-framesets"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1116832"> +<link rel="match" href="reference/green-ref.html"> +<frameset cols="4294967227%,*" frameborder="0"> + <frame src="resources/green.html"> + <frame src="resources/red.html"> +</frameset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-relsize.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-relsize.html new file mode 100644 index 0000000000..f056aa7e30 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-cols-relsize.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#frames-and-framesets"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1116832"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1353277"> +<script> +window.onload = () => { + test(() => { + const frameSet = document.querySelector('frameset'); + const frames = document.querySelectorAll('frame'); + assert_less_than(frames[0].offsetWidth, frameSet.offsetWidth); + assert_greater_than(frames[0].offsetWidth, frames[1].offsetWidth); + assert_greater_than_equal(frames[1].offsetWidth, 0); + }, 'A large relative value should not produce weird sizes.'); +}; +</script> +<frameset cols="4294967227*,*" frameborder="0"> + <frame src="resources/green.html"> + <frame src="resources/red.html"> +</frameset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-abssize.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-abssize.html new file mode 100644 index 0000000000..7cd86b9455 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-abssize.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#frames-and-framesets"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1116832"> +<link rel="match" href="reference/green-ref.html"> +<frameset rows="4294967227%,*" frameborder="0"> + <frame src="resources/green.html"> + <frame src="resources/red.html"> +</frameset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-percentage.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-percentage.html new file mode 100644 index 0000000000..7cd86b9455 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-percentage.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#frames-and-framesets"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1116832"> +<link rel="match" href="reference/green-ref.html"> +<frameset rows="4294967227%,*" frameborder="0"> + <frame src="resources/green.html"> + <frame src="resources/red.html"> +</frameset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-relsize.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-relsize.html new file mode 100644 index 0000000000..c33cd44adf --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/large-rows-relsize.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#frames-and-framesets"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1116832"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1353277"> +<script> +window.onload = () => { + test(() => { + const frameSet = document.querySelector('frameset'); + const frames = document.querySelectorAll('frame'); + assert_less_than(frames[0].offsetHeight, frameSet.offsetHeight); + assert_greater_than(frames[0].offsetHeight, frames[1].offsetHeight); + assert_greater_than_equal(frames[1].offsetHeight, 0); + }, 'A large relative value should not produce weird sizes.'); +}; +</script> +<frameset rows="4294967227*,*" frameborder="0"> + <frame src="resources/green.html"> + <frame src="resources/red.html"> +</frameset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/multicol-table-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/multicol-table-crash.html new file mode 100644 index 0000000000..adfb76e15a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/multicol-table-crash.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="http://crbug.com/1383361"> +<body style="columns:2"> +<div id="parent" style="display:table-caption"></div> +<script> +const caption = document.querySelector('#parent'); +const frameset = caption.appendChild(document.createElement('frameset')); +frameset.setAttribute('rows', '100%'); +frameset.setAttribute('cols', '100%'); +frameset.innerHTML = '<frame srcdoc=""></frame><frame srcdoc=""></frame>'; +</script> +</body> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/different-writing-modes-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/different-writing-modes-ref.html new file mode 100644 index 0000000000..9d5e5977f0 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/different-writing-modes-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<frameset cols="50%,*" rows="50%,*"> + <frame src="../resources/green.html"></frame> + <frame src="../resources/green.html"></frame> + <frame></frame> +</frameset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/empty-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/empty-ref.html new file mode 100644 index 0000000000..0e76edd65b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/empty-ref.html @@ -0,0 +1 @@ +<!DOCTYPE html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/green-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/green-ref.html new file mode 100644 index 0000000000..62208d72c9 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/reference/green-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { background: green; } +</style> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/resources/green.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/resources/green.html new file mode 100644 index 0000000000..62208d72c9 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/resources/green.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { background: green; } +</style> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/resources/red.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/resources/red.html new file mode 100644 index 0000000000..b5e7f79617 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-frameset-and-frame-elements/resources/red.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { background: red; } +</style> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align-ref.html new file mode 100644 index 0000000000..9e4283e208 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align-ref.html @@ -0,0 +1,31 @@ + +<!doctype html> +<meta charset=utf-8> +<style> +.hr { + color: gray; + border-style: inset; + border-width: 1px; + margin: 0.5em auto; + width: 100px; +} + +.left { + margin-left: 0; +} + +.right { + margin-right: 0; +} +</style> +<div class='hr'></div> +<div class='hr left'></div> +<div class='hr'></div> +<div class='hr right'></div> +<div class='hr'></div> + +<div class='hr'></div> +<div class='hr left'></div> +<div class='hr'></div> +<div class='hr right'></div> +<div class='hr'></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align.html new file mode 100644 index 0000000000..1657f2458d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align.html @@ -0,0 +1,24 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="match" href="align-ref.html"> +<style> +hr { + width: 100px; +} +</style> + +<hr align=> +<hr align=left> +<hr align=center> +<hr align=right> +<hr align=foobar> + +<script> +// Test the IDL attribute +const values = ['', 'left', 'center', 'right', 'foobar']; +values.forEach(value => { + const hr = document.createElement('hr'); + hr.align = value; + document.body.appendChild(hr); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color-ref.html new file mode 100644 index 0000000000..5cd35c83ad --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color-ref.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<style> +.hr { + color: gray; + border-style: inset; + border-width: 1px; + margin: 0.5em auto; +} + +.green { + color: green; +} + +.no-inset { + border-style: solid; +} +</style> +<div class='hr'></div> +<div class='hr no-inset'></div> +<div class='hr no-inset'></div> +<div class='hr green no-inset'></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color.html new file mode 100644 index 0000000000..750f77e5fb --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset=utf-8> +<link rel=match href="color-ref.html"> +<hr> +<hr color=""> +<hr color=transparent> +<hr color=green> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/hr.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/hr.html new file mode 100644 index 0000000000..e852216494 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/hr.html @@ -0,0 +1,55 @@ +<!doctype html> +<title>The hr element</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +#ref { + display: block; + unicode-bidi: isolate; + color: gray; + border-style: inset; + border-width: 1px; + margin: 0.5em auto; + /* TODO: uncomment this when these properties are widely supported + margin-block-start: 0.5em; + margin-inline-end: auto; + margin-block-end: 0.5em; + margin-inline-start: auto; + */ + overflow: hidden; +} +</style> + +<hr id=test> +<div id=ref></div> + +<script> +setup(() => { + self.testStyle = getComputedStyle(document.getElementById('test')); + self.refStyle = getComputedStyle(document.getElementById('ref')); +}); +['display', + 'unicodeBidi', + 'color', + 'borderTopStyle', + 'borderRightStyle', + 'borderBottomStyle', + 'borderLeftStyle', + 'borderTopWidth', + 'borderRightWidth', + 'borderBottomWidth', + 'borderLeftWidth', + 'marginTop', + 'marginRight', + 'marginBottom', + 'marginLeft', + 'overflow', + // Extra tests + 'height', + 'box-sizing', +].forEach(prop => { + test(() => { + assert_equals(testStyle[prop], refStyle[prop]); + }, prop); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/setting-overflow-visible.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/setting-overflow-visible.html new file mode 100644 index 0000000000..11e3d63e34 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/setting-overflow-visible.html @@ -0,0 +1,64 @@ +<!doctype html> +<title>The hr element: setting 'overflow: visible'</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +/* Use 0 margin for hr instead of default 0.5em to make things simpler */ +hr { + margin-top: 0; + margin-bottom: 0; +} +.wrapper { + height: 150px; + position: relative; +} +#test-visible { + overflow: visible; +} +.float, hr::before { + content: ""; + float: left; + width: 50px; + height: 50px; + background-color: orange; +} +.clear { + clear: left; +} +</style> + +<div class=wrapper> + <div class=float></div> + <hr id=test-control> + <div class=float></div> +</div> + +<div class=wrapper> + <div class=float></div> + <hr id=test-visible> + <div class=float></div> +</div> + +<script> + +test(() => { + const hr = document.getElementById('test-control'); + assert_equals(hr.offsetLeft, 50, 'hr.offsetLeft'); + assert_equals(hr.offsetTop, 0, 'hr.offsetTop'); + assert_equals(hr.clientHeight, 50, 'hr.clientHeight'); + const divAfter = hr.nextElementSibling; + assert_equals(divAfter.offsetLeft, 0, 'divAfter.offsetLeft'); + assert_equals(divAfter.offsetTop, 50 + 1 + 1 /* hr border */, 'divAfter.offsetTop'); +}, 'control'); + +test(() => { + const hr = document.getElementById('test-visible'); + assert_equals(hr.offsetLeft, 0, 'hr.offsetLeft'); + assert_equals(hr.offsetTop, 0, 'hr.offsetTop'); + assert_equals(hr.clientHeight, 0, 'hr.clientHeight'); + const divAfter = hr.nextElementSibling; + assert_equals(divAfter.offsetLeft, 50 + 50, 'divAfter.offsetLeft'); + assert_equals(divAfter.offsetTop, 1 + 1 /* hr border */, 'divAfter.offsetTop'); +}, 'overflow: visible'); + +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width-ref.html new file mode 100644 index 0000000000..71e7651c1a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width-ref.html @@ -0,0 +1,19 @@ +<style> +.hr { + color: gray; + border-style: inset; + border-width: 1px; + margin: 0.5em auto; +} +</style> +<div class=hr></div> +<div class=hr style="width: 50%"></div> +<div class=hr style="width: 100px"></div> +<div class=hr style="width: 100px"></div> +<div class=hr style="width: 100px"></div> +<div class=hr style="width: 100.99px"></div> +<div class=hr style="width: 0%"></div> +<div class=hr style="width: 0%"></div> +<div class=hr></div> +<div class=hr></div> +<div class=hr></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width.html new file mode 100644 index 0000000000..a436d2ae25 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width.html @@ -0,0 +1,15 @@ +<!doctype html> +<meta charset="utf-8"> +<title></title> +<link rel="match" href="width-ref.html"> +<hr> +<hr width='50%'> +<hr width='100'> +<hr width='100foo'> +<hr width=' 100 '> +<hr width='100.99'> +<hr width='0'> +<hr width='00'> +<hr width='+0'> +<hr width='+00'> +<hr width='++0'> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1-ref.html new file mode 100644 index 0000000000..3d9d45ec94 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1-ref.html @@ -0,0 +1,2 @@ +<!doctype html> +<iframe src="data:text/html,<!doctype html><body style='margin-left: 100px; margin-right: 100px;'>100px left/right margins, default top/bottom margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1a.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1a.html new file mode 100644 index 0000000000..ba891d5021 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1a.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's marginwidth attribute has the right effect in standards mode</title> +<link rel=match href="body-margin-1-ref.html"> +<iframe src="data:text/html,<!doctype html><body marginwidth='100'>100px left/right margins, default top/bottom margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1b.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1b.html new file mode 100644 index 0000000000..431f74be29 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1b.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's marginwidth attribute has the right effect in quirks mode</title> +<link rel=match href="body-margin-1-ref.html"> +<iframe src="data:text/html,<body marginwidth='100'>100px left/right margins, default top/bottom margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1c.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1c.html new file mode 100644 index 0000000000..84eb4cfe82 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1c.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's leftmargin/rightmargin attributes have the right effect in standards mode</title> +<link rel=match href="body-margin-1-ref.html"> +<iframe src="data:text/html,<!doctype html><body leftmargin='100' rightmargin='100'>100px left/right margins, default top/bottom margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1d.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1d.html new file mode 100644 index 0000000000..938d4c2c0b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1d.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's leftmargin/rightmargin attributes have the right effect in quirks mode</title> +<link rel=match href="body-margin-1-ref.html"> +<iframe src="data:text/html,<body leftmargin='100' rightmargin='100'>100px left/right margins, default top/bottom margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1e.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1e.html new file mode 100644 index 0000000000..8cc463fb15 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1e.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that iframe's marginwidth attribute has the right effect in standards mode</title> +<link rel=match href="body-margin-1-ref.html"> +<iframe marginwidth="100" src="data:text/html,<!doctype html><body>100px left/right margins, default top/bottom margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1f.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1f.html new file mode 100644 index 0000000000..2f123b392c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1f.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that iframe's marginwidth attribute has the right effect in quirks mode</title> +<link rel=match href="body-margin-1-ref.html"> +<iframe marginwidth="100" src="data:text/html,<body>100px left/right margins, default top/bottom margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1g.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1g.html new file mode 100644 index 0000000000..052455390c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1g.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's style margin takes precedence over everything else in standards mode</title> +<link rel=match href="body-margin-1-ref.html"> +<iframe marginwidth="20" src="data:text/html,<!doctype html><body marginwidth='30' leftmargin='40' rightmargin='50' style='margin-left: 100px; margin-right: 100px'>100px left/right margins, default top/bottom margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1h.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1h.html new file mode 100644 index 0000000000..6778945494 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1h.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's style margin takes precedence over everything else in quirks mode</title> +<link rel=match href="body-margin-1-ref.html"> +<iframe marginwidth="20" src="data:text/html,<body marginwidth='30' leftmargin='40' rightmargin='50' style='margin-left: 100px; margin-right: 100px'>100px left/right margins, default top/bottom margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1i.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1i.html new file mode 100644 index 0000000000..95e21e3626 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1i.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's marginwidth attribute takes precedence over other body margin presentational attributes in standards mode</title> +<link rel=match href="body-margin-1-ref.html"> +<iframe marginwidth="20" src="data:text/html,<!doctype html><body marginwidth='100' leftmargin='40' rightmargin='50'>100px left/right margins, default top/bottom margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1j.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1j.html new file mode 100644 index 0000000000..4f945853d8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1j.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's marginwidth attribute takes precedence over other body margin presentational attributes in quirks mode</title> +<link rel=match href="body-margin-1-ref.html"> +<iframe marginwidth="20" src="data:text/html,<body marginwidth='100' leftmargin='40' rightmargin='50'>100px left/right margins, default top/bottom margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1k.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1k.html new file mode 100644 index 0000000000..c05cd24e2d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1k.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's leftmargin/rightmargin attributes take precedence over iframe marginwidth in standards mode</title> +<link rel=match href="body-margin-1-ref.html"> +<iframe marginwidth="20" src="data:text/html,<!doctype html><body leftmargin='100' rightmargin='100'>100px left/right margins, default top/bottom margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1l.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1l.html new file mode 100644 index 0000000000..f53d2c5a1d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-1l.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's leftmargin/rightmargin attributes take precedence over iframe marginwidth in quirks mode</title> +<link rel=match href="body-margin-1-ref.html"> +<iframe marginwidth="20" src="data:text/html,<body leftmargin='100' rightmargin='100'>100px left/right margins, default top/bottom margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2-ref.html new file mode 100644 index 0000000000..1bda1a8928 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2-ref.html @@ -0,0 +1,2 @@ +<!doctype html> +<iframe src="data:text/html,<!doctype html><body style='margin-top: 100px; margin-bottom: 100px;'>100px top/bottom margins, default left/right margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2a.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2a.html new file mode 100644 index 0000000000..9091ab2c78 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2a.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's marginheight attribute has the right effect in standards mode</title> +<link rel=match href="body-margin-2-ref.html"> +<iframe src="data:text/html,<!doctype html><body marginheight='100'>100px top/bottom margins, default left/right margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2b.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2b.html new file mode 100644 index 0000000000..dd7d74b635 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2b.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's marginheight attribute has the right effect in quirks mode</title> +<link rel=match href="body-margin-2-ref.html"> +<iframe src="data:text/html,<body marginheight='100'>100px top/bottom margins, default left/right margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2c.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2c.html new file mode 100644 index 0000000000..f72e4b6c71 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2c.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's topmargin/bottommargin attributes have the right effect in standards mode</title> +<link rel=match href="body-margin-2-ref.html"> +<iframe src="data:text/html,<!doctype html><body topmargin='100' bottommargin='100'>100px top/bottom margins, default left/right margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2d.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2d.html new file mode 100644 index 0000000000..40799b2277 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2d.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's topmargin/bottommargin attributes have the right effect in quirks mode</title> +<link rel=match href="body-margin-2-ref.html"> +<iframe src="data:text/html,<body topmargin='100' bottommargin='100'>100px top/bottom margins, default left/right margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2e.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2e.html new file mode 100644 index 0000000000..bab012bcf0 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2e.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that iframe's marginheight attribute has the right effect in standards mode</title> +<link rel=match href="body-margin-2-ref.html"> +<iframe marginheight="100" src="data:text/html,<!doctype html><body>100px top/bottom margins, default left/right margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2f.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2f.html new file mode 100644 index 0000000000..103cde96d9 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2f.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that iframe's marginheight attribute has the right effect in quirks mode</title> +<link rel=match href="body-margin-2-ref.html"> +<iframe marginheight="100" src="data:text/html,<body>100px top/bottom margins, default left/right margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2g.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2g.html new file mode 100644 index 0000000000..b87acacefe --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2g.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's style margin takes precedence over everything else in standards mode</title> +<link rel=match href="body-margin-2-ref.html"> +<iframe marginheight="20" src="data:text/html,<!doctype html><body marginheight='30' topmargin='40' bottommargin='50' style='margin-top: 100px; margin-bottom: 100px'>100px top/bottom margins, default left/right margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2h.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2h.html new file mode 100644 index 0000000000..53f5267f71 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2h.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's style margin takes precedence over everything else in quirks mode</title> +<link rel=match href="body-margin-2-ref.html"> +<iframe marginheight="20" src="data:text/html,<body marginheight='30' topmargin='40' bottommargin='50' style='margin-top: 100px; margin-bottom: 100px'>100px top/bottom margins, default left/right margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2i.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2i.html new file mode 100644 index 0000000000..642972ea33 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2i.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's marginheight attribute takes precedence over other body margin presentational attributes in standards mode</title> +<link rel=match href="body-margin-2-ref.html"> +<iframe marginheight="20" src="data:text/html,<!doctype html><body marginheight='100' topmargin='40' bottommargin='50'>100px top/bottom margins, default left/right margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2j.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2j.html new file mode 100644 index 0000000000..f1b1689f1f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2j.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's marginheight attribute takes precedence over other body margin presentational attributes in quirks mode</title> +<link rel=match href="body-margin-2-ref.html"> +<iframe marginheight="20" src="data:text/html,<body marginheight='100' topmargin='40' bottommargin='50'>100px top/bottom margins, default left/right margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2k.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2k.html new file mode 100644 index 0000000000..d11febeb5d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2k.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's topmargin/bottommargin attributes take precedence over iframe marginheight in standards mode</title> +<link rel=match href="body-margin-2-ref.html"> +<iframe marginheight="20" src="data:text/html,<!doctype html><body topmargin='100' bottommargin='100'>100px top/bottom margins, default left/right margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2l.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2l.html new file mode 100644 index 0000000000..2f947b984f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body-margin-2l.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test that body's topmargin/bottommargin attributes take precedence over iframe marginheight in quirks mode</title> +<link rel=match href="body-margin-2-ref.html"> +<iframe marginheight="20" src="data:text/html,<body topmargin='100' bottommargin='100'>100px top/bottom margins, default left/right margins</body>"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_link.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_link.xhtml new file mode 100644 index 0000000000..b93435de8a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_link.xhtml @@ -0,0 +1,16 @@ +<html xmlns='http://www.w3.org/1999/xhtml'> +<head> +<title>body - LINK=yellow</title> +</head> +<body link="yellow"> +<p> Test for <b> link="yellow" </b> on body </p> + +This <a href="test-body.xhtml">LINK</a> should be displayed in <b>yellow</b><i> if it has not been clicked before </i><br/> +<p>Once clicked, the link will take default color of visited link.<br /></p> +<p>To run this test again in browsers, delete your browsing history and navigate to this page.<br /></p> + +<p> +<i>Note - This test checks for User Agent requirement as per HTML5 spec NOT the author requirement</i> +</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_text_00ffff-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_text_00ffff-ref.html new file mode 100644 index 0000000000..c907a119f8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_text_00ffff-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>[body - TEXT=00ffff] Reference file</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + body { + color: blue; + } +</style> +<body> + <p>This document should have text color 'Blue' using the RGB Hexadecimal color value of "0000ff". </p> + <p>This test passes if the color of text above matches the image below.</p> + <p><img src="/images/blue.png"/></p> +</body> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_text_00ffff.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_text_00ffff.xhtml new file mode 100644 index 0000000000..42b8aa3b6b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/body_text_00ffff.xhtml @@ -0,0 +1,12 @@ +<html xmlns='http://www.w3.org/1999/xhtml'> +<head> +<title>body - TEXT=00ffff</title> +<link rel="match" href="body_text_00ffff-ref.html"/> +<meta name="assert" content="Test checks that User Agent requirement as per HTML5 spec NOT the author requirement."/> +</head> +<body text="0000ff"> +<p>This document should have text color 'Blue' using the RGB Hexadecimal color value of "0000ff". </p> +<p>This test passes if the color of text above matches the image below.</p> +<p><img src="/images/blue.png" /></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/crashtests/body-huge-attr-value-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/crashtests/body-huge-attr-value-crash.html new file mode 100644 index 0000000000..b7aea03bf3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/crashtests/body-huge-attr-value-crash.html @@ -0,0 +1,9 @@ +<html xmlns="http://www.w3.org/1999/xhtml" xlink="http://www.w3.org/1999/xlink"> +<meta charset="utf-8"> +<link rel="author" href="mailto:0xdevssh@gmail.com"> +<link rel="help" href="https://crbug.com/1238543"> +<meta name="assert" content="The renderer should not crash."> + <body topmargin="62099815446794541154677680790275022478020296315411546776807902750224780254115467768079027502247802349339973475906291022478020296313493399734759062916145353182409398397817693775043304346030250203150386848140862367251147544337900224780202963134933997347590629161453531824093983978176937750433043460302502031503868481408623672511475443379061453531824093983978176937750433043460302502031503868481408623672511475443379012223934551240400478945189095326288308770771506289350685029953926171692408537507190372257890049958209064274944598761777623561353561543911257846386780780067311874929239209275379981860757"> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-body-margin-attributes.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-body-margin-attributes.html new file mode 100644 index 0000000000..e1f4fb5154 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-body-margin-attributes.html @@ -0,0 +1,32 @@ +<!doctype html> +<title>iframe and body margin attributes</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body marginwidth=20 marginheight=20 topmargin=10 rightmargin=10 bottommargin=10 leftmargin=10> +<iframe data-desc="iframe marginwidth vs child body leftmargin" src="support/body-topmargin-leftmargin.html" marginwidth=10 marginheight=10></iframe> +<iframe data-desc="iframe marginwidth vs child body marginwidth" src="support/body-marginwidth-marginheight.html" marginwidth=10 marginheight=10></iframe> +<script> +setup({explicit_done: true}); + +onload = () => { + test(() => { + const style = getComputedStyle(document.body); + assert_style_props(style); + }, 'body marginwidth vs body leftmargin'); + + [].forEach.call(document.querySelectorAll('iframe'), iframe => { + test(() => { + const win = iframe.contentWindow; + const style = win.getComputedStyle(win.document.body); + assert_style_props(style); + }, iframe.dataset.desc); + }); + done(); +} + +function assert_style_props(style) { + for (let prop of ['marginTop', 'marginRight', 'marginBottom', 'marginLeft']) { + assert_equals(style[prop], '20px', prop); + } +} +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-marginwidth-marginheight.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-marginwidth-marginheight.html new file mode 100644 index 0000000000..b09cafbbe4 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-marginwidth-marginheight.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>iframe marginwidth and marginheight</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<iframe src="/common/blank.html" marginwidth=0 marginheight=0></iframe> +<script> +setup({ single_test: true }); +onload = () => { + assert_equals(window[0].document.body.attributes.length, 0, "Number of attributes on the child document's body"); + done(); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-ref.html new file mode 100644 index 0000000000..424e039e3f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>iframe: changing the scrolling attribute</title> +<link rel="author" href="mailto:masonf@chromium.org"> + + + +<style> + iframe { + width: 100px; + height: 100px; + } +</style> + +<p>These two iframes should *both* render with scrollbars:</p> +<iframe src="support/big-page.html" scrolling="unknown"></iframe> +<iframe src="support/big-page.html" scrolling="unknown"></iframe> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-values-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-values-ref.html new file mode 100644 index 0000000000..2ead59af39 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-values-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>The scrolling attribute</title> +<link rel="author" href="mailto:masonf@chromium.org"> + + + +<style> + iframe { + width: 100px; + height: 100px; + } +</style> + +<p>This page tests the behavior of the <tt>scrolling</tt> attribute on +<tt><iframe></tt> elements which contain a page large enough to need to +be scrolled.</p> + +<iframe src="support/big-page.html" scrolling="auto"></iframe> +<iframe src="support/big-page.html" scrolling="auto"></iframe> +<iframe src="support/big-page.html" scrolling="auto"></iframe> +<iframe src="support/big-page.html" scrolling="auto"></iframe> +<iframe src="support/big-page.html" scrolling="auto"></iframe> +<iframe src="support/big-page.html" scrolling="no"></iframe> +<iframe src="support/big-page.html" scrolling="no"></iframe> +<iframe src="support/big-page.html" scrolling="no"></iframe> +<iframe src="support/big-page.html" scrolling="no"></iframe> +<iframe src="support/big-page.html" scrolling="auto"></iframe> +<iframe src="support/big-page.html" scrolling="auto"></iframe> + diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-values.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-values.html new file mode 100644 index 0000000000..997745ba48 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute-values.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>The scrolling attribute</title> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-page"> +<link rel="match" href="iframe-scrolling-attribute-values-ref.html"> +<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-4"> + +<style> + iframe { + width: 100px; + height: 100px; + } +</style> + +<p>This page tests the behavior of the <tt>scrolling</tt> attribute on +<tt><iframe></tt> elements which contain a page large enough to need to +be scrolled.</p> + +<iframe src="support/big-page.html"></iframe> +<iframe src="support/big-page.html" scrolling></iframe> +<iframe src="support/big-page.html" scrolling=""></iframe> +<iframe src="support/big-page.html" scrolling="auto"></iframe> +<iframe src="support/big-page.html" scrolling="yes"></iframe> +<iframe src="support/big-page.html" scrolling="no"></iframe> +<iframe src="support/big-page.html" scrolling="noscroll"></iframe> +<iframe src="support/big-page.html" scrolling="off"></iframe> +<iframe src="support/big-page.html" scrolling="NoScRoLl"></iframe> +<iframe src="support/big-page.html" scrolling="bogus"></iframe> +<iframe src="support/big-page.html" scrolling="1234"></iframe> + diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute.html new file mode 100644 index 0000000000..d04e2dd56f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/iframe-scrolling-attribute.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>iframe: changing the scrolling attribute</title> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-page"> +<link rel="match" href="iframe-scrolling-attribute-ref.html"> + +<style> + iframe { + width: 100px; + height: 100px; + } +</style> + +<p>These two iframes should *both* render with scrollbars:</p> +<iframe src="support/big-page.html" scrolling="unknown"></iframe> +<iframe src="support/big-page.html" scrolling="unknown"></iframe> + +<script> + var iframe = document.getElementsByTagName("iframe")[1]; + // Setting scrolling=no and then back to scrolling=unknown + // should result in a final value of auto. + iframe.setAttribute("scrolling", "no"); + iframe.setAttribute("scrolling", "unknown"); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/big-page.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/big-page.html new file mode 100644 index 0000000000..65f2a65bcf --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/big-page.html @@ -0,0 +1,2 @@ +<p>Scroll me</p> +<div style="width: 400px; height: 400px; background-color: blue"></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/body-marginwidth-marginheight.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/body-marginwidth-marginheight.html new file mode 100644 index 0000000000..5d825e3455 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/body-marginwidth-marginheight.html @@ -0,0 +1,2 @@ +<!doctype html> +<body marginwidth=20 marginheight=20> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/body-topmargin-leftmargin.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/body-topmargin-leftmargin.html new file mode 100644 index 0000000000..7ba5e53330 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/support/body-topmargin-leftmargin.html @@ -0,0 +1,2 @@ +<!doctype html> +<body topmargin=20 rightmargin=20 bottommargin=20 leftmargin=20> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/test-body.xhtml b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/test-body.xhtml new file mode 100644 index 0000000000..cd733b17ba --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-page/test-body.xhtml @@ -0,0 +1,8 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title> This is a test page</title> +</head> +<body> +<p> To rerun this test, delete history and go <a href="body_link.xhtml">back </a> to previous test.</p> +</body> +</html>
\ No newline at end of file |
