1 files changed, 81 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-formatting-context.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-formatting-context.html
new file mode 100644
index 0000000000..4e95391797
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-formatting-context.html
@@ -0,0 +1,81 @@
+<!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>