1 files changed, 64 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-block-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-block-size.html
new file mode 100644
index 0000000000..e98de892d3
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-block-size.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<title>fieldset percentage block size</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+ fieldset { block-size: 100px; margin: 20px; padding: 0; border: 10px solid; }
+ .rendered-legend { block-size: 80%; background: lime; padding: 0; }
+ .second-legend { block-size: 100%; background: yellow; padding: 0; }
+ fieldset > div { block-size: 100%; background: fuchsia; }
+</style>
+<div style="writing-mode: horizontal-tb">
+ <fieldset>
+  <legend class="rendered-legend">rendered legend</legend>
+  <legend class="second-legend">second legend</legend>
+  <div>div</div>
+ </fieldset>
+</div>
+
+<div style="writing-mode: vertical-lr">
+ <fieldset>
+  <legend class="rendered-legend">rendered legend</legend>
+  <legend class="second-legend">second legend</legend>
+  <div>div</div>
+ </fieldset>
+</div>
+
+<div style="writing-mode: vertical-rl">
+ <fieldset>
+  <legend class="rendered-legend">rendered legend</legend>
+  <legend class="second-legend">second legend</legend>
+  <div>div</div>
+ </fieldset>
+</div>
+
+<table cellspacing="0" cellpadding="0" style="width:100px; height:60px;">
+  <tr>
+    <td>
+      <fieldset style="border:none; padding:0; height:100%; margin:0; margin-top:13px;">
+        <div><div id="elm"></div></div>
+      </fieldset>
+    </td>
+  </tr>
+</table>
+
+<script>
+ for (const div of document.querySelectorAll('div[style]')) {
+   for (const el of div.firstElementChild.children) {
+     test(() => {
+       const expected = el.textContent === 'rendered legend' ? '80px' : '30px';
+       // 30px because: 100px - (max(0, legend-block-size - border-block-start))
+       assert_equals(getComputedStyle(el).blockSize, expected);
+     }, `${el.textContent} (${div.getAttribute('style')})`);
+   }
+ }
+
+// crbug.com/1138204. Though the specification doesn't mention this behavior,
+// there must be no doubt about the expected behavior.
+test(() => {
+  const fieldset = document.querySelector('table fieldset');
+  const initialHeight = fieldset.offsetHeight;
+  document.querySelector('#elm').style.display = 'none';
+  assert_equals(fieldset.offsetHeight, initialHeight);
+}, 'Fieldset with a percentage height should not increase the height on every reflow.');
+</script>