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