legend-block-formatting-context.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/legend-block-formatting-context.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>The legend element: block formatting context</title>

<script src=/resources/testharness.js></script>

<script src=/resources/testharnessreport.js></script>

<style>

/* Set margin and padding for fieldset to 0 to make things simpler */

fieldset {

  margin: 0;

  padding: 0;

.wrapper {

  height: 200px;

  position: relative;

.float {

  float: left;

  width: 50px;

  height: 50px;

  background-color: orange;

</style>

<div class=wrapper>

 <div class=float></div>

 <legend id=in-body><div class=float></div></legend>

 <div class=float></div>

</div>

<div class=wrapper>

 <fieldset>

  <div class=float></div>

  <legend id=rendered-legend><div class=float></div></legend>

  <legend id=in-fieldset-second-child><div class=float></div></legend>

  <div><legend id=in-fieldset-descendant><div class=float></div></legend></div>

 </fieldset>

</div>

<script>

const fieldsetBorderWidth = 2;

const legendPadding = 2;

test(() => {

  const legend = document.getElementById('in-body');

  assert_equals(legend.offsetLeft, 0, 'legend.offsetLeft');

  assert_equals(legend.offsetTop, 0, 'legend.offsetTop');

  assert_equals(legend.clientHeight, 0, 'legend.clientHeight');

  const divAfter = legend.nextElementSibling;

  assert_equals(divAfter.offsetLeft, 100, 'divAfter.offsetLeft');

  assert_equals(divAfter.offsetTop, 0, 'divAfter.offsetTop');

}, 'in-body');

test(() => {

  const legend = document.getElementById('rendered-legend');

  assert_equals(legend.offsetLeft, fieldsetBorderWidth, 'legend.offsetLeft');

  assert_equals(legend.offsetTop, 0, 'legend.offsetTop');

  assert_equals(legend.clientHeight, 50, 'legend.clientHeight');

  const divChild = legend.firstChild;

  assert_equals(divChild.offsetLeft, fieldsetBorderWidth + legendPadding, 'divChild.offsetLeft');

  assert_equals(divChild.offsetTop, 0, 'divChild.offsetTop');

}, 'rendered-legend');

test(() => {

  const legend = document.getElementById('in-fieldset-second-child');

  assert_equals(legend.offsetLeft, fieldsetBorderWidth, 'legend.offsetLeft');

  assert_equals(legend.offsetTop, 50, 'legend.offsetTop');

  assert_equals(legend.clientHeight, 0, 'legend.clientHeight');

  const divChild = legend.firstChild;

  assert_equals(divChild.offsetLeft, fieldsetBorderWidth + 50, 'divChild.offsetLeft');

  assert_equals(divChild.offsetTop, 50, 'divChild.offsetTop');

}, 'in-fieldset-second-child');

test(() => {

  const legend = document.getElementById('in-fieldset-descendant');

  assert_equals(legend.offsetLeft, fieldsetBorderWidth, 'legend.offsetLeft');

  assert_equals(legend.offsetTop, 50, 'legend.offsetTop');

  assert_equals(legend.clientHeight, 0, 'legend.clientHeight');

  const divChild = legend.firstChild;

  assert_equals(divChild.offsetLeft, fieldsetBorderWidth + 50 + 50, 'divChild.offsetLeft');

  assert_equals(divChild.offsetTop, 50, 'divChild.offsetTop');

}, 'in-fieldset-descendant');

</script>