diff options
Diffstat (limited to '')
-rw-r--r-- | testing/web-platform/tests/html/rendering/widgets/button-layout/shrink-wrap.html | 42 |
1 files changed, 42 insertions, 0 deletions
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> |