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