fieldset-flexbox.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-flexbox.html - WPT Dashboard Interop Dashboard

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