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