diff options
Diffstat (limited to 'testing/web-platform/tests/html/rendering/widgets/button-layout')
17 files changed, 396 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/anonymous-button-content-box-ref.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/anonymous-button-content-box-ref.html new file mode 100644 index 0000000000..243f0add0d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/button-layout/anonymous-button-content-box-ref.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>Reference for Anonymous button content box</title> +<style> +body { margin: 0 } +.button { width: 124px; height: 124px; background: papayawhip; border: 2px solid; display: table-cell; vertical-align: middle; text-align: center; box-sizing: border-box; } +.top { vertical-align: top } +.left { text-align: left } +.float { display: block; float: left; } +body > div { clear: left; } +.button > div { width: 50px; height: 50px; border: solid } +.button > .tall { height: 150px } +.button > .wide { width: 150px; margin-top: 32px } +</style> +<div> + <div class=button>input</div> + <div class="button">input grid</div> + <div class="button">input flex</div> + <div class=button>button</div> +</div> +<div> + <div class=button style="text-align: left">button left</div> + <div class=button><div>div</div></div> + <div class="button top">grid</div> + <div class="button top"><div>grid</div></div> +</div> +<div> + <div class="button top left float">flex</div> + <div class="button top float"><div>flex</div></div> + <div class="button float"><div class=tall>tall</div></div> + <div class="button float"><div class=wide>wide</div></div> +</div> diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/anonymous-button-content-box.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/anonymous-button-content-box.html new file mode 100644 index 0000000000..07c7b8e366 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/button-layout/anonymous-button-content-box.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>Anonymous button content box</title> +<link rel=match href=anonymous-button-content-box-ref.html> +<style> +body { margin: 0 } +button, input { width: 124px; height: 124px; background: papayawhip; border: 2px solid; margin: 0; padding: 0; float: left; font: inherit } +body > div { clear: left; } +button > div { width: 50px; height: 50px; border: solid } +.grid { display: grid } +.flex { display: flex } +.tall { height: 150px } +.wide { width: 150px } +</style> +<div> + <input type=button value=input> + <input type=button value="input grid" class=grid> + <input type=button value="input flex" class=flex> + <button>button</button> +</div> +<div> + <button style="text-align: left">button left</button> + <button><div>div</div></button> + <button class=grid>grid</button> + <button class=grid><div>grid</div></button> +</div> +<div> + <button class=flex>flex</button> + <button class=flex><div>flex</div></button> + <button><div class=tall>tall</div></button> + <button><div class=wide>wide</div></button> +</div> diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/computed-style.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/computed-style.html new file mode 100644 index 0000000000..d18e5d365d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/button-layout/computed-style.html @@ -0,0 +1,52 @@ +<!doctype html> +<title>computed style on buttons</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div class="tests"> + <input type="reset"> + <input type="button"> + <input type="submit"> + <input type="color"> + <input type="image"> + <button></button> +</div> +<script> +// "behave as" doesn't change computed value. +const displayValues = ['inline', 'block', 'list-item', 'inline-block', 'table', 'inline-table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group', 'table-column', 'table-cell', 'table-caption', 'none', 'contents', 'flow', 'flow-root', 'flex', 'grid', 'ruby', 'ruby-base', 'ruby-text', 'ruby-base-container', 'ruby-text-container', 'inline-flex', 'inline-grid']; +for (const val of displayValues) { + [].slice.call(document.querySelectorAll('.tests > *')).forEach(el => { + el.style.display = '' + el.style.display = val; + const attrs = el.type ? ` type=${el.type}` : ''; + const tag = `<${el.localName}${attrs}>`; + test(() => { + assert_not_equals(el.style.display, '', `display: ${val} is not supported`) + let expectedVal = val; + if (el instanceof HTMLInputElement && val === 'contents') { + expectedVal = 'none'; // https://drafts.csswg.org/css-display/#unbox-html + } + if (val == 'flow') { + // Use the more backwards-compatible form, `block` is better than `flow` + // https://drafts.csswg.org/cssom/#serializing-css-values + expectedVal = 'block'; + } + assert_equals(getComputedStyle(el).display, expectedVal); + }, `computed display of ${tag} with display: ${val}`); + }); +} + +for (let input of document.querySelectorAll("input")) { + test(() => { + if (input.type == "image") { + assert_equals(getComputedStyle(input).overflow, "visible", "Should not be clip by default"); + return; + } + assert_equals(getComputedStyle(input).overflow, "clip", "Should be clip by default"); + assert_equals(getComputedStyle(input).overflowClipMargin, "0px", "Should use 0 margin"); + input.style.overflow = "visible"; + input.style.overflowClipMargin = "10px"; + assert_equals(getComputedStyle(input).overflow, "clip", "Clip be !important"); + assert_equals(getComputedStyle(input).overflowClipMargin, "0px", "Clip margin should be !important too"); + }, `<input type=${input.type}> overflow/overflow-clip-margin`); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/display-other.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/display-other.html new file mode 100644 index 0000000000..6ed3f5894a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/button-layout/display-other.html @@ -0,0 +1,52 @@ +<!doctype html> +<title>button with other display values</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +body { margin: 0 } +.float { width: 100px; height: 100px; float: left; background: blue; margin: 10px } +</style> +<div class=float></div> +<button id=button style="display: block;"><div class=float></div></button><span id=after>after</span> +<script> +// These should all behave as flow-root. +const displayValues = ['run-in', 'flow', 'flow-root', 'table', 'list-item', + 'table-row-group', 'table-header-group', 'table-footer-group', + 'table-row', 'table-cell', 'table-column-group', 'table-column', + 'table-caption', 'ruby-base', 'ruby-text', 'ruby-base-container', + 'ruby-text-container']; +const button = document.getElementById('button'); +const after = document.getElementById('after'); +function getValues() { + return { + buttonLeft: button.offsetLeft, + buttonTop: button.offsetTop, + buttonWidth: button.clientWidth, + buttonHeight: button.clientHeight, + afterLeft: after.offsetLeft, + afterTop: after.offsetTop, + }; +} +const expected = getValues(); +test(t => { + assert_equals(expected.buttonLeft, 120, 'buttonLeft'); + assert_equals(expected.buttonTop, 0, 'buttonTop'); + assert_greater_than_equal(expected.buttonWidth, 120, 'buttonWidth'); + assert_greater_than_equal(expected.buttonHeight, 120, 'buttonHeight'); + assert_equals(expected.afterLeft, 0, 'afterLeft'); + assert_greater_than_equal(expected.afterTop, 120, 'afterTop'); +}, 'display: block'); +for (const val of displayValues) { + test(t => { + t.add_cleanup(() => { + button.style.display = 'block'; + }); + assert_true(CSS.supports(`display: ${val}`), `display: ${val} is not supported`); + button.style.display = val; + const values = getValues(); + for (const prop in values) { + assert_equals(values[prop], expected[prop], prop); + } + }, `display: ${val}`); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/flex.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/flex.html new file mode 100644 index 0000000000..7f159fc232 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/button-layout/flex.html @@ -0,0 +1,61 @@ +<!doctype html> +<title>button with flex/inline-flex</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +#inline-flex { display: inline-flex } +#flex { display: flex } +#ref > div { display: flex } + +#flexstart { + border: none; + padding: 0; + display: flex; + align-items: flex-start; + height: 3em; +} + +#stretch { + border: none; + padding: 0; + display: flex; + align-items: stretch; + height: 3em; +} +</style> +<button id=inline-flex><div>1</div><div>2</div><div>3</div><div>4</div></button> +<button id=flex><div>1</div><div>2</div><div>3</div><div>4</div></button> +<button id=ref><div><div>1</div><div>2</div><div>3</div><div>4</div></div></button> + +<div><button id="flexstart"><span id="flexstart-item">abc</span></button></div> + +<div><button id="stretch"><span id="stretch-item">abc</span></button></div> +<script> +const ref = document.getElementById('ref'); +const expectedWidth = ref.clientWidth; +const expectedHeight = ref.clientHeight; +for (const elm of [document.getElementById('inline-flex'), + document.getElementById('flex')]) { + test(() => { + // check that flex is supported + const flexValue = elm.id; + assert_equals(getComputedStyle(elm).display, flexValue, `${flexValue} is not supported`); + const width = elm.clientWidth; + const height = elm.clientHeight; + assert_equals(width, expectedWidth, 'clientWidth'); + assert_equals(height, expectedHeight, 'clientHeight'); + }, elm.id); +} + +// crbug.com/700029 +test(() => { + assert_equals(document.getElementById('flexstart').offsetTop, + document.getElementById('flexstart-item').offsetTop); +}, 'align-items:flex-start should work'); + +// crbug.com/1004163 +test(() => { + assert_equals(document.getElementById('stretch').offsetHeight, + document.getElementById('stretch-item').offsetHeight); +}, 'align-items:stretch should work'); +</script> diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/grid.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/grid.html new file mode 100644 index 0000000000..7c2a467099 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/button-layout/grid.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>button with grid/inline-grid</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +#inline-grid { display: inline-grid } +#grid { display: grid } +#ref > div { display: grid } +#inline-grid, #grid, #ref > div { grid-template: auto auto / auto auto } +</style> +<button id=inline-grid><div>1</div><div>2</div><div>3</div><div>4</div></button> +<button id=grid><div>1</div><div>2</div><div>3</div><div>4</div></button> +<button id=ref><div><div>1</div><div>2</div><div>3</div><div>4</div></div></button> +<script> +const ref = document.getElementById('ref'); +const expectedWidth = ref.clientWidth; +const expectedHeight = ref.clientHeight; +for (const elm of [document.getElementById('inline-grid'), + document.getElementById('grid')]) { + test(() => { + // check that grid is supported + const gridValue = elm.id; + assert_equals(getComputedStyle(elm).display, gridValue, `${gridValue} is not supported`); + const width = elm.clientWidth; + const height = elm.clientHeight; + assert_equals(width, expectedWidth, 'clientWidth'); + assert_equals(height, expectedHeight, 'clientHeight'); + }, elm.id); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/inline-level-ref.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/inline-level-ref.html new file mode 100644 index 0000000000..3784cc30db --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/button-layout/inline-level-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>Reference for button with inline-level display</title> +<style> +button { font: inherit } +</style> +<p>There should be three buttons below containing "1" and "2" on separate lines, and "a" and "b" before and after on the same baseline as the "2".</p> +<p>a<button>1<br>2</button>b</p> +<p>a<button>1<br>2</button>b</p> +<p>a<button>1<br>2</button>b</p> +<p>a<button>1<br>2</button>b</p> diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/inline-level.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/inline-level.html new file mode 100644 index 0000000000..e23aba731c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/button-layout/inline-level.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>button with inline-level display</title> +<link rel=match href=inline-level-ref.html> +<style> +button, input { font: inherit } +.inline { display: inline } +.inline-block { display: inline-block } +.inline-table { display: inline-table } +</style> +<p>There should be three buttons below containing "1" and "2" on separate lines, and "a" and "b" before and after on the same baseline as the "2".</p> +<p>a<button class=inline>1<br><span class=check-baseline>2</span></button><span class=ref-baseline>b</span></p> +<p>a<button class=inline-block>1<br><span class=check-baseline>2</span></button><span class=ref-baseline>b</span></p> +<p>a<button class=inline-table>1<br><span class=check-baseline>2</span></button><span class=ref-baseline>b</span></p> +<p>a<input type=button class=inline-table value="1 2">b</p> +<script> +const spans = document.querySelectorAll('.check-baseline'); +for (const span of [].slice.call(spans)) { + const baseline = span.offsetTop + span.offsetHeight; + const refSpan = span.parentNode.nextSibling; + const refBaseline = refSpan.offsetTop + refSpan.offsetHeight; + if (baseline !== refBaseline) { + refSpan.textContent += " (wrong baseline)"; + } +} +</script> diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-clip-ref.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-clip-ref.html new file mode 100644 index 0000000000..8f956d36f5 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-clip-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<style> + button { + width: 10ch; + overflow: clip; + text-overflow: ellipsis; + } +</style> +<button>aaaaaaaaaaaaaaaaaaaaaa</button> diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-clip.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-clip.html new file mode 100644 index 0000000000..db1ad35cce --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-clip.html @@ -0,0 +1,15 @@ +<!doctype html> +<meta charset="utf-8"> +<title>button input is clipped by default, and text-overflow: ellipsis works</title> +<link rel="help" href="https://github.com/whatwg/html/issues/9976"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1800077"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="input-type-button-clip-ref.html"> +<style> + input { + width: 10ch; + text-overflow: ellipsis; + } +</style> +<input type="button" value="aaaaaaaaaaaaaaaaaaaaaa"> diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-newline-2-mismatch.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-newline-2-mismatch.html new file mode 100644 index 0000000000..19930b947b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-newline-2-mismatch.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<input type=button value="1"> diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-newline-2.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-newline-2.html new file mode 100644 index 0000000000..6e21c9e98e --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-newline-2.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=922011"> +<link rel=mismatch href="input-type-button-newline-2-mismatch.html"> + +<input type=button value="1 2"> diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-newline-mismatch.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-newline-mismatch.html new file mode 100644 index 0000000000..3d6495de66 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-newline-mismatch.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<input type=button value="12"> diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-newline.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-newline.html new file mode 100644 index 0000000000..139893ed42 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/button-layout/input-type-button-newline.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=922011"> +<link rel=mismatch href="input-type-button-newline-mismatch.html"> + +<input type=button value="1 2"> diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/propagate-text-decoration-ref.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/propagate-text-decoration-ref.html new file mode 100644 index 0000000000..f33a011a20 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/button-layout/propagate-text-decoration-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>Reference for propagating text-decoration into buttons</title> +<style> +button { font: inherit } +</style> +<p>The text in the following buttons should be underlined.</p> +<p><button><u>foo</u></button><button><u>foo</u></button></p> +<p>The text in the following buttons should NOT be underlined.</p> +<p><button>foo</button><button>foo</button></p> diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/propagate-text-decoration.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/propagate-text-decoration.html new file mode 100644 index 0000000000..83608402c1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/button-layout/propagate-text-decoration.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>propagating text-decoration into buttons</title> +<link rel=match href=propagate-text-decoration-ref.html> +<meta name=fuzzy content="maxDifference=0-40;totalPixels=0-50"> +<style> +button, input { font: inherit } +.inline > u > * { display: inline } +.inline-block > u > * { display: inline-block } +</style> +<p>The text in the following buttons should be underlined.</p> +<p class=inline><u><button>foo</button><input type=button value=foo></u></p> +<p>The text in the following buttons should NOT be underlined.</p> +<p class=inline-block><u><button>foo</button><input type=button value=foo></u></p> diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/shrink-wrap.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/shrink-wrap.html new file mode 100644 index 0000000000..6d61102608 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/button-layout/shrink-wrap.html @@ -0,0 +1,42 @@ +<!doctype html> +<title>shrink-wrap button</title> +<link rel=help href=https://html.spec.whatwg.org/multipage/rendering.html#button-layout> +<link rel=help href=https://drafts.csswg.org/css2/visudet.html#shrink-to-fit-float> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<!-- + minimum preferred width 100px + preferred width 250px + available width vary +--> +<style> +div.available-width { border: thin dotted red; margin: 1em 0; padding: 1em 0 } +button { border: none; margin: 0; padding: 0; background: papayawhip; } +button > span.minimum-preferred-width { width: 100px } +button > span { width: 50px; display: inline-block; outline: thin dotted blue } +</style> +<div class="available-width" style="width: 50px"> + <button data-expected="100"><span class="minimum-preferred-width">x</span><span>x</span><span>x</span><span>x</span></button> +</div> + +<div class="available-width" style="width: 200px"> + <button data-expected="200"><span class="minimum-preferred-width">x</span><span>x</span><span>x</span><span>x</span></button> +</div> + +<div class="available-width" style="width: 300px"> + <button data-expected="250"><span class="minimum-preferred-width">x</span><span>x</span><span>x</span><span>x</span></button> +</div> + +<script> +const styles = ['display: block', 'display: inline', 'display: inline-block', + 'display: list-item', 'display: table', 'display: table-row', + 'display: table-cell', 'float: left']; +for (const style of styles) { + for (const button of [].slice.call(document.querySelectorAll('button'))) { + test(() => { + button.setAttribute('style', style); + assert_equals(button.clientWidth, parseInt(button.dataset.expected, 10)); + }, `${style} - available ${button.parentNode.getAttribute('style')}`); + } +} +</script> |