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