HTML: Test rendering of fieldset with a tall legend

Fixes whatwg/html#4014
tungnh28 · Sep 17, 2018 · 0de4f6b · 0de4f6b
1 parent e6fd8f3
commit 0de4f6b
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall-ref.html b/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>Reference for tall legend</title>
+<style>
+body, p { margin: 0; }
+.legend { position: absolute; height: 160px; margin-left: 20px; inline-size: fit-content; background: lime }
+.fieldset {
+  position: absolute;
+  z-index: -1;
+  margin-top: calc((/* half legend height */ 160px / 2) - (/* half top border */ 20px / 2));
+  background: green;
+  height: 40px;
+  left: 0;
+  right: 0;
+}
+.hello { margin-top: 160px; margin-left: 20px; }
+</style>
+<p>There should be no red.</p>
+<div class=legend>X</div>
+<div class=fieldset></div>
+<div class=hello>HELLO</div>
diff --git a/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall.html b/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>tall legend</title>
+<link rel=match href=legend-tall-ref.html>
+<style>
+body, p { margin: 0; }
+fieldset { height: 30px; margin: 0; border: 20px solid green; padding: 0px; background: red; }
+legend { height: 160px; background: lime; padding: 0; }
+#behind {
+  position: absolute;
+  z-index: -1;
+  margin-top: calc((/* half legend height */ 160px / 2) - (/* half top border */ 20px / 2));
+  background: red;
+  height: 40px;
+  left: 0;
+  right: 0;
+}
+</style>
+<p>There should be no red.</p>
+<div id=behind></div>
+<fieldset><legend>X</legend>HELLO</fieldset>