display-other.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 13 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/rendering/widgets/button-layout/display-other.html - WPT Dashboard Interop Dashboard

<!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>