Support Grid/Flex/Table/Column layout for the rendered legend of a fieldset.
Differential Revision: https://phabricator.services.mozilla.com/D101555
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1683748
gecko-commit: 6141de941e717cdb5485e1aa1ca00ffcd74f8a81
gecko-reviewers: emilio
diff --git a/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display.html b/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display.html
index 914547f..b6c57a6 100644
--- a/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display.html
+++ b/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display.html
@@ -2,6 +2,9 @@
<title>rendered legend and CSS display</title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
+<style>
+legend { width:initial; }
+</style>
<fieldset><legend id="ref">x</legend></fieldset>
<fieldset><legend id="test">x</legend></fieldset>
<script>
@@ -10,22 +13,28 @@
const testElm = document.querySelector('#test');
const values = ['block', 'table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-cell',
'table-column-group', 'table-column', 'table-caption', 'list-item', 'flow', 'flow-root','run-in','inline',
- 'inline-block', 'inline-table', 'ruby', 'ruby-base', 'ruby-text', 'ruby-base-container', 'ruby-text-container',
+ 'inline-block', 'inline-table', 'block ruby', 'ruby', 'ruby-base', 'ruby-text', 'ruby-base-container', 'ruby-text-container',
'grid', 'inline-grid', 'flex', 'inline-flex'];
+ const extraStyle = ['', 'overflow:hidden', 'columns:1', 'overflow:hidden;columns:1'];
- for (const val of values) {
- test(() => {
- testElm.style.removeProperty('display');
- testElm.style.display = val;
- const computed = getComputedStyle(testElm);
- // Note that computed value is different from the used value.
- // E.g., if ruby is not supported, the following assertion will
- // fail as the computed value of display will be block.
- // If ruby is supported, computed.display will return "ruby",
- // but the used value is supposed to be "block".
- assert_equals(computed.display, val, `display: ${val} is not supported`);
- assert_equals(computed.width, refStyle.width, 'width');
- assert_equals(testElm.offsetLeft, refElm.offsetLeft, 'offsetLeft');
- }, `rendered legend with display: ${val}`);
+ for (const style of extraStyle) {
+ for (const val of values) {
+ test(() => {
+ testElm.style.removeProperty('display');
+ testElm.style = style;
+ testElm.style.display = val;
+ const computed = getComputedStyle(testElm);
+ // Note that computed value is different from the used value.
+ // E.g., if ruby is not supported, the following assertion will
+ // fail as the computed value of display will be block.
+ // If ruby is supported, computed.display will return "ruby",
+ // but the used value is supposed to be "block ruby".
+ // Also, 'flow' is serialized as 'block' for legacy reasons.
+ let expected = val == 'flow' ? 'block' : val;
+ assert_equals(computed.display, expected, `display: ${val} is not supported`);
+ assert_equals(computed.width, refStyle.width, 'width');
+ assert_equals(testElm.offsetLeft, refElm.offsetLeft, 'offsetLeft');
+ }, `rendered legend with display: ${val}` + (style == '' ? '' : "; " + style));
+ }
}
</script>
