| <!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> |
| |
| <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')})`); |
| } |
| } |
| </script> |
