diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements')
108 files changed, 3190 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/META.yml b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/META.yml new file mode 100644 index 0000000000..f5b533c377 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/META.yml @@ -0,0 +1,4 @@ +suggested_reviewers: + - emilio + - mstensho + - zcorpan diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend-ref.html new file mode 100644 index 0000000000..f82faee114 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<style> +div { + display: block; + font-size: 32px; + background: lime; + width: 10em; +} +</style> + +<div>legend</div> +<div>legend</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend.html new file mode 100644 index 0000000000..56d296977c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/absolute-fixed-in-legend.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<title>Absolute/fixed-positioned boxes in LEGEND should be painted on the fieldset content</title> +<link rel=match href=absolute-fixed-in-legend-ref.html> +<style> +.absolute-container { + position: relative; + border: none; + padding: 0; + margin: 0; +} + +.absolute-container .legend-content { + display: block; + font-size: 32px; + position: absolute; + left: 0px; + background: lime; + width: 10em; +} + +.fixed-container { + contain: paint; + border: none; + padding: 0; + margin: 0; +} + +.fixed-container .legend-content { + display: block; + font-size: 32px; + position: fixed; + left: 0px; + background: lime; + width: 10em; +} + +.fieldset-content { + background: red; + font-size: 32px; + width: 10em; +} +</style> + +<fieldset class="absolute-container"> + <legend><span class="legend-content">legend</span></legend> + <div class="fieldset-content">content</div> +</fieldset> + +<fieldset class="fixed-container"> + <legend><span class="legend-content">legend</span></legend> + <div class="fieldset-content">content</div> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable-ref.html new file mode 100644 index 0000000000..7fa15da174 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<div style="all:initial; display:block; overflow:scroll; width:100px; height:100px; background:blue;"></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable.html new file mode 100644 index 0000000000..c968ed3f13 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/empty-scrollable.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements"> +<link rel="match" href="empty-scrollable-ref.html"> +<fieldset style="all:initial; display:block; overflow:scroll; width:100px; height:100px; background:blue;"></fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline-ref.html new file mode 100644 index 0000000000..ff583435a6 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<style> +span { + border: solid 2px; + padding: 10px; + margin: 5px; +} +</style> +<div> + text <span style="display: inline-block;">line1<br>line2</span> +</div> +<div> + text <span style="display: inline-flex;">line1<br>line2</span> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline.html new file mode 100644 index 0000000000..23f5ad76f3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-baseline.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1305890"> +<link rel="match" href="fieldset-baseline-ref.html"> +<style> +fieldset { + border: solid 2px; + padding: 10px; + margin: 5px; +} +</style> +<div> + text <fieldset style="display: inline-block;">line1<br>line2</fieldset> +</div> +<div> + text <fieldset style="display: inline-flex;">line1<br>line2</fieldset> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-formatting-context.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-formatting-context.html new file mode 100644 index 0000000000..c38944ae79 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-formatting-context.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>The fieldset element: block formatting context</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +* { + margin: 0; + padding: 0; +} +fieldset { border: none; } +.float { + float: left; + width: 50px; + height: 50px; + background-color: orange; +} +</style> + +<div class=float></div> +<fieldset><div class=float></div></fieldset> + +<script> +test(() => { + const fieldset = document.querySelector('fieldset'); + assert_equals(fieldset.offsetTop, 0, 'fieldset.offsetTop'); + assert_equals(fieldset.offsetLeft, 50, 'fieldset.offsetLeft'); + assert_equals(fieldset.clientHeight, 50, 'fieldset.clientHeight'); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-size.html new file mode 100644 index 0000000000..e1247637db --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-block-size.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<link rel="help" href="https://html.spec.whatwg.org/C/#the-fieldset-and-legend-elements"> +<!-- A test for the following paragraph: +For the purpose of calculating the used 'block-size', if the computed +'block-size' is not 'auto', the space allocated for the rendered legend's +margin box that spills out past the border, if any, is expected to be +subtracted from the 'block-size'. If the content box's block-size would be +negative, then let the content box's block-size be zero instead. +--> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +fieldset { + margin: 0; + padding: 0; + border: 2px solid black; +} +legend { + height: 102px; + background-color: yellow; +} +.content { + background-color: lime; +} +</style> +<fieldset style="block-size: 200px;"> +<legend>Legend</legend> +<div class="content" style="height:100%"></div> +</fieldset> + +<fieldset style="block-size: 40px;"> +<legend>Legend</legend> +<div class="content" style="height:100%"></div> +</fieldset> + +<script> +test(() => { + let cs = document.querySelectorAll('.content'); + assert_equals(cs[0].offsetHeight, Math.max(202 - 102, 0)); + assert_equals(cs[1].offsetHeight, Math.max(42 - 102, 0)); +}, 'Test content\'s block-size'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-negative-margin.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-negative-margin.html new file mode 100644 index 0000000000..563a2aa68d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-negative-margin.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>fieldset border gap with negative margin</title> +<link rel=match href=no-red-ref.html> +<style> +fieldset { border:none; border-left: 100px solid red; margin: 0; padding: 0; height:100px; } +legend { padding: 0; margin-left: -100px; width: 100px; height: 100px; transform: rotate(45deg); } +</style> +<p>There should be no red.</p> +<fieldset> + <legend></legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative-ref.html new file mode 100644 index 0000000000..95e2347121 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>Reference for fieldset border gap</title> +<style> +div { position: relative; top: 25px; width: 100px; height: 50px; background: lime; } +</style> +<p>There should be no red.</p> +<div></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative.html new file mode 100644 index 0000000000..1dbef479a9 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-position-relative.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>fieldset border gap</title> +<link rel=match href=fieldset-border-gap-position-relative-ref.html> +<style> +fieldset, legend { margin: 0; padding: 0; } +fieldset { border: none; border-top: 100px solid red; width: 100px; } +legend { width: 100px; height: 50px; background: lime; } +</style> +<p>There should be no red.</p> +<fieldset><legend></legend></fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-hittest.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-hittest.html new file mode 100644 index 0000000000..9ab10159d8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-hittest.html @@ -0,0 +1,14 @@ +<!doctype html> +<title>fieldset, border-radius and hit testing</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +fieldset { width: 80px; height: 80px; border-radius: 100px; border: 10px solid; background: lime; } +</style> +<fieldset> +</fieldset> +<script> +test(() => { + assert_equals(document.elementFromPoint(20, 20), document.body); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha-ref.html new file mode 100644 index 0000000000..5cfe13c40d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<style> +div { + background-color: green; + height: 110px; + position: absolute; + width: 150px; + top: 70px; +} +</style> +<p>There should be no red.</p> +<div></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha.html new file mode 100644 index 0000000000..7a942076fb --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-radius-with-alpha.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Fieldset with a border-radius and non-opaque border-color</title> +<link rel="match" href="fieldset-border-radius-with-alpha-ref.html"> +<style> +fieldset { + background-color: green; + border: 3px solid rgba(255, 0, 0, 0.9); + border-radius: 4px; + height: 100px; + width: 100px; +} +legend { + height: 50px; + width: 50px; +} +div { + background-color: green; + height: 110px; + position: absolute; + width: 150px; + top: 70px; +} +</style> +<p>There should be no red.</p> +<fieldset><legend></legend></fieldset> +<div></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-calculating-min-max-content.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-calculating-min-max-content.html new file mode 100644 index 0000000000..4a9f261895 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-calculating-min-max-content.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>fieldset calculating min-/max-content</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +fieldset { margin: 0; padding: 0; } +.min-content { width: 0; } +legend { padding: 0; } +fieldset, #ref-max-content, #ref-min-content { float: left; clear: left; border: 1px solid; } +#log { clear: left; } +</style> +<fieldset class=max-content><legend>foo fooo</legend>x x</fieldset> +<fieldset class=max-content><legend>x x</legend>foo fooo</fieldset> +<div id=ref-max-content>foo fooo</div> + +<fieldset class=min-content><legend>foo fooo</legend>x x</fieldset> +<fieldset class=min-content><legend>x x</legend>foo fooo</fieldset> +<div id=ref-min-content>fooo</div> + +<script> +test(() => { + const ref = document.querySelector('#ref-max-content'); + for (const e of document.querySelectorAll('.max-content')) { + assert_equals(e.clientWidth, ref.clientWidth); + } +}, 'max-content'); + +test(() => { + const ref = document.querySelector('#ref-min-content'); + for (const e of document.querySelectorAll('.min-content')) { + assert_equals(e.clientWidth, ref.clientWidth); + } +}, 'min-content'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block-ref.html new file mode 100644 index 0000000000..282c0d4ef1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>Reference for fieldset containing block</title> +<style> +p { margin: 0; height: 100px } +.div1 { position: absolute; top: 108px; width: 100px; height: 100px; background: lime; } +.div2 { position: absolute; top: 158px; width: 200px; height: 100px; background: lime; } +</style> +<p>There should be no red.</p> +<div class="div1"></div> +<div class="div2"></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block.html new file mode 100644 index 0000000000..cefb3584ea --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-containing-block.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>fieldset containing block</title> +<link rel=match href=fieldset-containing-block-ref.html> +<style> +p { margin: 0; height: 100px } +fieldset { position: relative; border: none; padding: 0; margin: 0; } +legend { padding: 0; width: 100px; height: 50px; background: lime; } +div { position: absolute; top: 0; width: 100px; height: 50px; background: lime; } +.behind { height:100px; top: 108px; background: red; } + +.fixed-container { + filter: invert(); + overflow: hidden; + width: 200px; + height: 200px; +} +.fixed { + position: fixed; + width: 400px; + height: 100px; + background: linear-gradient(to right, #ff00ff 50%, #00ffff 50%); +} +.has-fixed { + width: 0px; + height: 0px; +} +</style> +<p>There should be no red.</p> +<div class="behind"></div> +<fieldset><legend></legend><div></div></fieldset> + +<fieldset class="fixed-container"> +<legend class="has-fixed"><div style="position:fixed; width:0; height0;"></div></legend> +<div class="fixed"></div> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-before-legend.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-before-legend.html new file mode 100644 index 0000000000..5bd1fbc161 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-before-legend.html @@ -0,0 +1,41 @@ +<!doctype html> +<title>fieldset content before legend</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +fieldset { + /* Paddings might have fractional values by default, and they can cause + rounding differences between the test element and the reference element. */ + padding: 0; +} +</style> + +<fieldset id=test> + X + <legend>legend</legend> + Y +</fieldset> +<fieldset id=ref> + <legend>legend</legend> + X Y +</fieldset> + +<fieldset id="test2"> + P<span id="hidden" style="display:none;">AS</span><legend>legend</legend>S +</fieldset> + +<script> + test(() => { + const testElm = document.getElementById('test'); + const refElm = document.getElementById('ref'); + assert_equals(testElm.clientHeight, refElm.clientHeight); + }); + + test(() => { + const testElm = document.getElementById('test2'); + testElm.clientHeight; + const span = document.getElementById('hidden'); + span.style.display = 'inline'; + testElm.clientHeight; + }, 'Showing a node just before the rendered legend should not crash'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-percentage-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-percentage-size.html new file mode 100644 index 0000000000..6195d8bb05 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-percentage-size.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1140595"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div style="height:100px;"> + <fieldset style="margin:0; padding:0; border:none;"> + <div id="inner" style="height:59%;"></div> + </fieldset> +</div> +<script> +test(() => { + let innerDiv = document.querySelector('#inner'); + assert_equals(innerDiv.clientHeight, 0); +}, 'A percentage height for an element in an auto-height fieldset should be ignored'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl-ref.html new file mode 100644 index 0000000000..b7c080bfac --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html dir="rtl"> +<head> +<meta charset="utf-8"> +<style> +.control { + background: blue; + width: 200px; + height: 1em; +} +.container { + border: 2px groove ThreeDFace; + margin: 0; + padding: 1em; +} +</style> +</head> +<body> +<div class="container"> + <label>Label</label> + <div class="control" id="ctrl-d"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl.html new file mode 100644 index 0000000000..0f12c6f92a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-content-rtl.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html dir="rtl"> +<head> +<meta charset="utf-8"> +<title>crbug.com/1130174; Non-auto-width block should be right-aligned in an RTL fieldset</title> +<link rel="match" href="fieldset-content-rtl-ref.html"> +<style> +.control { + background: blue; + width: 200px; + height: 1em; +} +fieldset { + border: 2px groove ThreeDFace; + margin: 0; + padding: 1em; +} +</style> +</head> +<body> +<fieldset> + <label>Label</label> + <div class="control"></div> +</fieldset> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-crash.html new file mode 100644 index 0000000000..111dcbe533 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-crash.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1039241"> +<div style="width: min-content;"> + <div style="writing-mode:vertical-lr;"> + <fieldset> + <div style="width:10%;"></div> + </fieldset> + </div> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-default-style.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-default-style.html new file mode 100644 index 0000000000..9a711383e6 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-default-style.html @@ -0,0 +1,57 @@ +<!doctype html> +<title>fieldset default style</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +#ref { + display: block; + margin-left: 2px; + margin-right: 2px; + /* TODO replace above declarations with these when they are widely supported. + margin-inline-start: 2px; + margin-inline-end: 2px; + */ + border: groove 2px; + padding: 0.35em 0.75em 0.625em 0.75em; + /* TODO replace above declarations with these when they are widely supported. + padding-block-start: 0.35em; + padding-inline-end: 0.75em; + padding-block-end: 0.625em; + padding-inline-start: 0.75em; + */ + min-width: min-content; + /* TODO change the above to min-inline-size when it's widely supported. */ +} +</style> +<fieldset id=test></fieldset> +<div id=ref></div> +<script> + const testElm = document.querySelector('#test'); + const refElm = document.querySelector('#ref'); + const props = ['display', + 'margin-top', + 'margin-right', + 'margin-bottom', + 'margin-left', + 'border-top-style', + 'border-right-style', + 'border-bottom-style', + 'border-left-style', + 'border-top-width', + 'border-right-width', + 'border-bottom-width', + 'border-left-width', + 'padding-top', + 'padding-right', + 'padding-bottom', + 'padding-left', + 'min-width', + ]; + const testStyle = getComputedStyle(testElm); + const refStyle = getComputedStyle(refElm); + props.forEach(prop => { + test(() => { + assert_equals(testStyle[prop], refStyle[prop]); + }, `${prop}`); + }); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-display.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-display.html new file mode 100644 index 0000000000..a8a553c836 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-display.html @@ -0,0 +1,37 @@ +<!doctype html> +<title>fieldset and CSS display</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + #inline-ref { display: inline-block; } +</style> +<fieldset id="block-ref">x</fieldset> +<fieldset id="inline-ref">x</fieldset> +<fieldset id="test">x</fieldset> +<script> + const blockWidth = getComputedStyle(document.querySelector('#block-ref')).width; + const inlineWidth = getComputedStyle(document.querySelector('#inline-ref')).width; + const testElm = document.querySelector('#test'); + // Please only add canonical values to these lists: + const blocks = ['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-root', 'run-in', 'block ruby']; + const inlines = ['inline', 'inline-block', 'inline-table', 'ruby', 'ruby-base', 'ruby-text', 'ruby-base-container', 'ruby-text-container']; + + function test_display(val, expectedWidth) { + test(() => { + testElm.style.removeProperty('display'); + testElm.style.display = val; + const computed = getComputedStyle(testElm); + assert_equals(computed.display, val, `display: ${val} is not supported`); + assert_equals(computed.width, expectedWidth); + }, `fieldset with display: ${val}`); + } + + for (const val of blocks) { + test_display(val, blockWidth); + } + + for (const val of inlines) { + test_display(val, inlineWidth); + } +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-div-display-contents.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-div-display-contents.html new file mode 100644 index 0000000000..5d17b91290 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-div-display-contents.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>fieldset and div with display: contents</title> +<link rel=fieldset-foo-ref.html> +<style> +div { display: contents; } +</style> +<p>There should be a normal fieldset below with the legend "Foo".</p> +<fieldset> + <div> + <legend>Foo</legend> + </div> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline-ref.html new file mode 100644 index 0000000000..c34096f270 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +baseline +<fieldset style="display: inline-block;"> + <div style="position: relative;"> + line1<br>line2 + </div> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline.html new file mode 100644 index 0000000000..88aeed28c1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-baseline.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1307140"> +<link rel="match" href="fieldset-dynamic-baseline-ref.html"> +baseline +<fieldset style="display: inline-block;"> + <div style="position: relative;"> + line1<br>line2<div id="target" style="position: absolute;"></div> + </div> +</fieldset> +<script> +document.body.offsetTop; +document.getElementById('target').style.top = '10px'; +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-oof-container-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-oof-container-crash.html new file mode 100644 index 0000000000..a2b999fa00 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-oof-container-crash.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html class="test-wait"> +<title>No crash after stop being an asbolute container.</title> +<link rel="help" href="https://crbug.com/1395688"> +<style> +.c2 { + transform: rotate3d(0, 1, 0, 45deg); + column-width: 100px; +} +.c19 { + overflow: auto; + padding-left: 65536px; + column-count: 3; +} + +q { + position: absolute; + column-width: 1px; +} + +body { + column-count: 3; +} +</style> +<script> +function animationFrame() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} + +async function doTest() { + document.documentElement.appendChild(document.createElement('body')); + await animationFrame(); + document.body.innerHTML = '<fieldset class=c2><q>q</q></fieldset>'; + window.scrollBy(28, 71); + await animationFrame(); + document.querySelector('fieldset').setAttribute('class', 'c19'); + await animationFrame(); + document.body.remove(); + await animationFrame(); + await animationFrame(); + document.documentElement.classList.remove('test-wait'); +} + +doTest(); +</script> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo-ref.html new file mode 100644 index 0000000000..5bdf78db55 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<style> +*::after { content:"after text"; border:3px solid black;} +*::before { content:"before text"; border:3px solid black; } +</style> +</head> +<body> +<fieldset><legend>Legend</legend></fielset> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo.html new file mode 100644 index 0000000000..c5fbf53000 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-dynamic-pseudo.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- +Chrome had a crash bug in a case of dynamic addition of pseudo elements. +crbug.com/1242229 +--> +<html class="reftest-wait"> +<head> +<link rel="match" href="fieldset-dynamic-pseudo-ref.html"> +<style> +*::after { content:"after text"; border:3px solid black;} +*::before { content:"before text"; border:3px solid black; } +</style> +</head> +<body> +<fieldset><legend>Legend</legend></fielset> +<script> +document.styleSheets[0].disabled = true; + +requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.styleSheets[0].disabled = false; + document.documentElement.className = ''; + }); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-flexbox.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-flexbox.html new file mode 100644 index 0000000000..9e1c9ed152 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-flexbox.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<title>fieldset and CSS Flexbox</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +#test, #ref, #test-inline, #ref-inline { + display: flex; + justify-content: space-around; + margin: 0; + padding: 0; + border: none +} +#test-inline, #ref-inline { display: inline-flex } +legend { + float: left; /* Makes it not the "rendered legend" */ + padding: 0; +} +</style> +<fieldset id=test> + <legend>1</legend> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</fieldset> +<hr> +<div id=ref> + <legend>1</legend> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</div> +<hr> +<fieldset id=test-inline> + <legend>1</legend> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</fieldset> +<div id=ref-inline> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</div> +<script> + test(() => { + const testElm = document.getElementById('test'); + const refElm = document.getElementById('ref'); + assert_equals(getComputedStyle(testElm).height, + getComputedStyle(refElm).height, 'height'); + assert_equals(testElm.querySelector('legend').offsetTop, + testElm.querySelector('div').offsetTop, 'offsetTop') + }, "Flex"); + + test(() => { + const testElm = document.getElementById('test-inline'); + const refElm = document.getElementById('ref-inline'); + assert_equals(getComputedStyle(testElm).height, + getComputedStyle(refElm).height, 'height'); + assert_equals(testElm.querySelector('legend').offsetTop, + testElm.querySelector('div').offsetTop, 'offsetTop') + + }, "Inline flex"); + +test(() => { + const testElm = document.getElementById('test'); + testElm.style.flexDirection = 'row'; + const item0 = testElm.querySelectorAll('div')[0]; + const item1 = testElm.querySelectorAll('div')[1]; + assert_equals(item0.offsetTop, item1.offsetTop); + + testElm.style.flexDirection = 'column'; + assert_true(item0.offsetTop < item1.offsetTop); +}, "Dynamic change of flex-direction"); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-foo-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-foo-ref.html new file mode 100644 index 0000000000..cace814a8c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-foo-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<title>Reference with a fieldset and legend "Foo"</title> +<p>There should be a normal fieldset below with the legend "Foo".</p> +<fieldset> + <legend>Foo</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-generated-content.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-generated-content.html new file mode 100644 index 0000000000..25a36bc42c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-generated-content.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>fieldset generated content</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +body { + /* Use Ahem to avoid fractional letter widths. */ + font: 20px/1 Ahem; +} + +fieldset { + display: inline-block; + /* Paddings might have fractional values by default, and they can cause + rounding differences between the test element and the reference element. */ + padding: 0; +} + +#test::before, #test::after { content:"X"; } +</style> +<fieldset id=test><legend>A</legend>Y</fieldset> +<fieldset id=ref><legend>A</legend>XYX</fieldset> +<script> +test(() => { + const testElm = document.querySelector('#test'); + const refElm = document.querySelector('#ref'); + assert_equals(testElm.clientWidth, refElm.clientWidth, 'clientWidth'); + assert_equals(testElm.clientHeight, refElm.clientHeight, 'clientHeight'); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-grid.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-grid.html new file mode 100644 index 0000000000..bbb71dfa70 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-grid.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<title>fieldset and CSS Grid</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +#test, #ref, #test-inline, #ref-inline { + display: grid; + grid-template-columns: auto 50px auto; + grid-template-rows: auto 50px auto; + margin: 0; + padding: 0; + border: none +} +#test-inline, #ref-inline { display: inline-grid } +legend { + float: left; /* Makes it not the "rendered legend" */ + padding: 0; +} +</style> +<fieldset id=test> + <legend>1</legend> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</fieldset> +<hr> +<div id=ref> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</div> +<hr> +<fieldset id=test-inline> + <legend>1</legend> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</fieldset> +<div id=ref-inline> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</div> +<script> + test(() => { + const testElm = document.getElementById('test'); + const refElm = document.getElementById('ref'); + assert_equals(getComputedStyle(testElm).height, + getComputedStyle(refElm).height, 'height'); + assert_equals(testElm.querySelector('legend').offsetTop, + testElm.querySelector('div').offsetTop, 'offsetTop') + }, "Grid"); + + test(() => { + const testElm = document.getElementById('test-inline'); + const refElm = document.getElementById('ref-inline'); + assert_equals(getComputedStyle(testElm).height, + getComputedStyle(refElm).height, 'height'); + assert_equals(testElm.querySelector('legend').offsetTop, + testElm.querySelector('div').offsetTop, 'offsetTop') + + }, "Inline grid"); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item-ref.html new file mode 100644 index 0000000000..05b8ca4770 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<title>Reference for fieldset and dipslay: list-item</title> +<style> + fieldset { margin: 0 40px; } +</style> +<p>There should be no bullet points below.</p> +<fieldset> + <legend>X</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item.html new file mode 100644 index 0000000000..7726947bec --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-list-item.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>fieldset and dipslay: list-item</title> +<link rel=match href=fieldset-list-item-ref.html> +<style> + fieldset { margin: 0 40px; display: list-item; } +</style> +<p>There should be no bullet points below.</p> +<fieldset> + <legend>X</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size-ref.html new file mode 100644 index 0000000000..07c9da85b5 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<style> +.fieldset { + border: 2px solid gray; + margin: 1em; + padding: 0; + width: 20em; +} + +.f1 { + overflow: auto; + max-height: 3em; +} +.f2 { + max-height: 0; +} +</style> + +<div class="fieldset f1"> +<div>foo</div> +<div>foo</div> +<div>foo</div> +<div>foo</div> +<div>foo</div> +</div> + +<div class="fieldset f1"> +<div>foo</div> +</div> + +<div class="fieldset f2"> +<div>foo</div> +</div> + diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size.html new file mode 100644 index 0000000000..170dedd606 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-max-block-size.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="help" href="http://crbug.com/1151858"> +<link rel="match" href="fieldset-max-block-size-ref.html"> +<style> +fieldset { + border: 2px solid gray; + margin: 1em; + padding: 0; + width: 20em; +} + +.f1 { + overflow: auto; + max-height: 3em; +} +.f2 { + max-height: 0; +} +</style> + +<fieldset class="f1"> +<div>foo</div> +<div>foo</div> +<div>foo</div> +<div>foo</div> +<div>foo</div> +</fieldset> + +<fieldset class="f1"> +<div>foo</div> +</fieldset> + +<fieldset class="f2"> +<div>foo</div> +</fieldset> + diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-multicol.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-multicol.html new file mode 100644 index 0000000000..bdb2c2fd94 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-multicol.html @@ -0,0 +1,29 @@ +<!doctype html> +<title>fieldset multicol</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + #test { margin: 0; padding: 0; border: none } + #test, #ref { columns: 5 } + p { margin: 0 } +</style> +<fieldset id=test> + <p>1 + <p>2 + <p>3 + <p>4 + <p>5 +</fieldset> +<div id=ref> + <p>1 + <p>2 + <p>3 + <p>4 + <p>5 +</div> +<script> + test(() => { + assert_equals(getComputedStyle(document.getElementById('test')).height, + getComputedStyle(document.getElementById('ref')).height); + }); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-cssomview.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-cssomview.html new file mode 100644 index 0000000000..c47c7cdd5d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-cssomview.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +fieldset { + height: 200px; + overflow: scroll; + padding: 0; +} + +.content { + height: 400px; +} +</style> + +<fieldset> + <legend>Legend</legend> + <div class="content"></div> +</fieldset> + +<script> +test(() => { + const fieldset = document.querySelector('fieldset'); + assert_equals(getComputedStyle(fieldset)['overflow-x'], 'scroll'); + assert_equals(getComputedStyle(fieldset)['overflow-y'], 'scroll'); + assert_equals(fieldset.scrollHeight, 400); + fieldset.scrollTop = 500; + assert_greater_than_equal(fieldset.scrollTop, 200); +}, 'Test cssom-view API for FIELDSET'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden-ref.html new file mode 100644 index 0000000000..9fe632f7c2 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<title>Reference for fieldset and overflow</title> +<p>It should say PASS below.</p> +PASS diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden.html new file mode 100644 index 0000000000..cacbdbae00 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>fieldset and overflow</title> +<link rel=match href=fieldset-overflow-hidden-ref.html> +<style> +fieldset { margin:0; padding: 0; overflow: hidden; border: none; border-top: 1em solid transparent; } +legend { padding: 0; } +</style> +<p>It should say PASS below.</p> +<fieldset> + <legend>PASS</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-ref.html new file mode 100644 index 0000000000..42ecb22aef --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE HTML> +<title>Reference for fieldset overflow</title> +<style> +.fieldset, .legend { + border: 1em solid; + background: lime; +} +.fieldset { + height: 1em; + margin-top: 2em; +} +.legend { + height: 1em; + width: 5em; + line-height: 1; + margin-top: -4em; + margin-left: 1em; + margin-bottom: 1em; +} + +.fieldset2 { + background: lime; + padding: 50px; + max-height: 50px; + overflow: scroll; +} + +.fieldset3 { + width: 20em; + max-height: 250px; + padding: 7px; + margin: 0; + overflow: auto; + box-sizing: border-box; + border: 1em solid transparent; + border-top: 40px solid transparent; +} +</style> +<p>There should be no red.</p> +<div class=fieldset> +</div> +<div class=legend></div> + +<div class=fieldset2> + <div style="height:200px; background:blue"></div> +</div> + +<div class="fieldset3"> + <p> +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. + </p> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow.html new file mode 100644 index 0000000000..83813f9020 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<title>fieldset overflow</title> +<link rel=match href=fieldset-overflow-ref.html> +<style> +fieldset, legend { + border: 1em solid; + margin: 0; + padding: 0; + background: lime +} +#f1 { + overflow: auto; + height: 2em; +} +legend { + height: 1em; + width: 5em; +} +div { + background: red; + height: 2em; +} + +#f2 { + border: none; + padding: 50px; + max-height: 50px; + overflow: scroll; +} + +#f3 { + width: 20em; + max-height: 250px; + padding: 7px; + overflow: auto; + box-sizing: border-box; + border-color: transparent; + background: transparent; +} + +#f3 legend { + height: 40px; + border: none; + color: transparent; + background: transparent; +} +</style> +<p>There should be no red.</p> +<fieldset id="f1"> + <legend></legend> + <div></div> + <div id=last></div> +</fieldset> + +<!-- crbug.com/1247733 --> +<fieldset id="f2"> + <div style="height:200px; background:blue"></div> +</fieldset> +<script> + document.getElementById('last').scrollIntoView(); +</script> + +<!-- crbug.com/1282408 --> +<fieldset id="f3"> + <legend>Legend</legend> + <p> +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. +The quick brown fox jumps over the lazy dog. + </p> +</fieldset> + diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order-ref.html new file mode 100644 index 0000000000..13b262a804 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>Reference for fieldset painting order</title> +<style> +div { width: 200px; height: 200px; } +#a { background: green; } +#b { background: lime; position: relative; top: -100px; left: 100px; } +</style> +<p>There should be no red.</p> +<div id=a></div> +<div id=b></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order.html new file mode 100644 index 0000000000..7bd2cedb1b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-painting-order.html @@ -0,0 +1,17 @@ +<!doctype html> +<title>fieldset painting order</title> +<link rel=match href=fieldset-painting-order-ref.html> +<style> +fieldset, legend { margin: 0; padding: 0; } +fieldset { + border: 100px solid red; + width: 0; + min-width: 0; + height: 0; +} +legend { width: 200px; height: 200px; margin-left: -100px; background: green; } +legend > span { float: right; margin-top: 100px; width: 100px; height: 100px; background: red; } +fieldset > div { margin-top: -100px; background: lime; width: 200px; height: 200px; } +</style> +<p>There should be no red.</p> +<fieldset><legend><span></span></legend><div></div></fieldset> 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> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-padding.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-padding.html new file mode 100644 index 0000000000..61ad4ed4c9 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-padding.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>fieldset percentage padding</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + body { margin: 0; } + .outer { width: 500px; position: relative; } + fieldset { width: 100px; padding: 10%; margin: 0; border: none; } + .overflow { overflow: auto; } +</style> +<div class=outer> + <fieldset> + <div id=no-overflow>x</div> + </fieldset> +</div> +<div class=outer> + <fieldset class=overflow> + <div id=with-overflow>x</div> + </fieldset> +</div> +<script> +const noOverflow = document.getElementById('no-overflow'); +const withOverflow = document.getElementById('with-overflow'); +for (const div of [noOverflow, withOverflow]) { + test(() => { + assert_equals(div.offsetLeft, 50, "offsetLeft"); + assert_equals(div.clientWidth, 100, "clientWidth"); + assert_equals(div.offsetTop, 50, "offsetTop"); + }, div.id); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-shadow-dom.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-shadow-dom.html new file mode 100644 index 0000000000..3b46eb03c6 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-shadow-dom.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>fieldset and shadow DOM</title> +<link rel=fieldset-foo-ref.html> +<p>There should be a normal fieldset below with the legend "Foo".</p> +<template id="my-fieldset"> + <fieldset><slot name="my-text"></slot></fieldset> +</template> + +<my-fieldset> + <legend slot="my-text">Foo</legend> +</my-fieldset> + +<script> +customElements.define('my-fieldset', + class extends HTMLElement { + constructor() { + super(); + + const template = document.getElementById('my-fieldset'); + const templateContent = template.content; + + this.attachShadow({mode: 'open'}).appendChild( + templateContent.cloneNode(true) + ); + } + } +); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez-ref.html new file mode 100644 index 0000000000..8200e67194 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>Reference for Fieldset and transform: translateZ(0)</title> +<style> +fieldset { background: #eee; margin: 0 0 10px; } +</style> +<p>It should say PASS below without anything obscuring the text.</p> + +<fieldset> + <legend>PASS</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez.html new file mode 100644 index 0000000000..df30468b00 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-transform-translatez.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Fieldset and transform: translateZ(0)</title> +<link rel=match href=fieldset-transform-translatez-ref.html> +<style> +#outer { transform: translateZ(0); } +fieldset { background: #eee; overflow: hidden; margin: 0 0 10px; } +#inner { position: relative; } +</style> +<p>It should say PASS below without anything obscuring the text.</p> +<div id=outer> + <fieldset> + <legend> + <div id="inner">PASS</div> + </legend> + </fieldset> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical-ref.html new file mode 100644 index 0000000000..29c28ea5f8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Reference for fieldset vertical</title> +<link rel=stylesheet href=resources/fieldset-vertical.css> +<p>vertical-lr +<div style="writing-mode: vertical-lr"> + <div class=fieldset><div class="legend top">foo bar</div>normal</div> + <div class="fieldset rtl"><div class="legend bottom">foo bar</div>dir=rtl</div> + <div class="fieldset rtl"><div class="legend top">foo bar</div>dir=rtl align=left</div> + <div class="fieldset rtl"><div class="legend center">foo bar</div>dir=rtl align=center</div> + <div class="fieldset rtl"><div class="legend bottom">foo bar</div>dir=rtl align=right</div> + <div class=fieldset><div class="legend top">foo bar</div>align=left</div> + <div class=fieldset><div class="legend center">foo bar</div>align=center</div> + <div class=fieldset><div class="legend bottom">foo bar</div>align=right</div> +</div> +<hr> +<p>vertical-rl +<div style="writing-mode: vertical-rl"> + <div class=fieldset><div class="legend top">foo bar</div>normal</div> + <div class="fieldset rtl"><div class="legend bottom">foo bar</div>dir=rtl</div> + <div class="fieldset rtl"><div class="legend top">foo bar</div>dir=rtl align=left</div> + <div class="fieldset rtl"><div class="legend center">foo bar</div>dir=rtl align=center</div> + <div class="fieldset rtl"><div class="legend bottom">foo bar</div>dir=rtl align=right</div> + <div class=fieldset><div class="legend top">foo bar</div>align=left</div> + <div class=fieldset><div class="legend center">foo bar</div>align=center</div> + <div class=fieldset><div class="legend bottom">foo bar</div>align=right</div></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical.html new file mode 100644 index 0000000000..c11b466669 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-vertical.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>fieldset vertical</title> +<link rel=stylesheet href=resources/fieldset-vertical.css> +<link rel=match href=fieldset-vertical-ref.html> +<p>vertical-lr +<div style="writing-mode: vertical-lr"> + <fieldset><legend>foo bar</legend>normal</fieldset> + <fieldset dir=rtl><legend>foo bar</legend>dir=rtl</fieldset> + <fieldset dir=rtl><legend align=left>foo bar</legend>dir=rtl align=left</fieldset> + <fieldset dir=rtl><legend align=center>foo bar</legend>dir=rtl align=center</fieldset> + <fieldset dir=rtl><legend align=right>foo bar</legend>dir=rtl align=right</fieldset> + <fieldset><legend align=left>foo bar</legend>align=left</fieldset> + <fieldset><legend align=center>foo bar</legend>align=center</fieldset> + <fieldset><legend align=right>foo bar</legend>align=right</fieldset> +</div> +<hr> +<p>vertical-rl +<div style="writing-mode: vertical-rl"> + <fieldset><legend>foo bar</legend>normal</fieldset> + <fieldset dir=rtl><legend>foo bar</legend>dir=rtl</fieldset> + <fieldset dir=rtl><legend align=left>foo bar</legend>dir=rtl align=left</fieldset> + <fieldset dir=rtl><legend align=center>foo bar</legend>dir=rtl align=center</fieldset> + <fieldset dir=rtl><legend align=right>foo bar</legend>dir=rtl align=right</fieldset> + <fieldset><legend align=left>foo bar</legend>align=left</fieldset> + <fieldset><legend align=center>foo bar</legend>align=center</fieldset> + <fieldset><legend align=right>foo bar</legend>align=right</fieldset> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/flex-legend-float-abspos.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/flex-legend-float-abspos.html new file mode 100644 index 0000000000..f6eead471c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/flex-legend-float-abspos.html @@ -0,0 +1,97 @@ +<!doctype html> +<title> + legend and float and position: absolute/fixed when the display type of + the fieldset is flex. +</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + body { margin: 0; } + fieldset { + border: 10px solid; + display: flex; + margin: 0; + padding: 20px; + width: 300px; + } + legend { height: 10px; } + #legend1 { float: left; } + #legend2 { float: right; } + #legend3 { position: absolute; } + #legend4 { position: fixed; } +</style> +<fieldset id=fieldset> + <div>div</div> + <legend id=legend1>legend1</legend> + <legend id=legend2>legend2</legend> + <legend id=legend3>legend3</legend> + <legend id=legend4>legend4</legend> + <legend id=legend5>legend5</legend> +</fieldset> +<script> + const fieldset = document.getElementById('fieldset'); + const legends = document.getElementsByTagName('legend'); + const [legend1, legend2, legend3, legend4, legend5] = legends; + const expectedTop = 0; + const expectedLeft = 10 + 20; + + function assert_rendered_legend(legend) { + assert_equals(legend.offsetTop, expectedTop, `${legend.id}.offsetTop`); + assert_equals(legend.offsetLeft, expectedLeft, `${legend.id}.offsetLeft`); + for (const other of legends) { + if (other === legend) { + continue; + } + if (other.offsetTop === expectedTop && other.offsetLeft === expectedLeft) { + assert_unreached(`${other.id} should not be the "rendered legend"`); + } + } + } + + test(t => { + assert_rendered_legend(legend5); + }, 'no dynamic changes'); + + test(t => { + const legend = document.createElement('legend'); + t.add_cleanup(() => { + legend.remove(); + }); + legend.id = 'script-inserted'; + legend.textContent = 'script-inserted legend'; + fieldset.insertBefore(legend, legend1); + assert_rendered_legend(legend); + legend.remove(); + assert_rendered_legend(legend5); + }, 'inserting a new legend and removing it again'); + + test(t => { + t.add_cleanup(() => { + legend1.id = 'legend1'; + legend2.id = 'legend2'; + }); + legend2.id = ''; + assert_rendered_legend(legend2); + legend1.id = ''; + assert_rendered_legend(legend1); + legend1.id = 'legend1'; + assert_rendered_legend(legend2); + legend2.id = 'legend2'; + assert_rendered_legend(legend5); + }, 'dynamic changes to float'); + + test(t => { + t.add_cleanup(() => { + legend3.id = 'legend3'; + legend4.id = 'legend4'; + }); + legend4.id = ''; + assert_rendered_legend(legend4); + legend3.id = ''; + assert_rendered_legend(legend3); + legend3.id = 'legend3'; + assert_rendered_legend(legend4); + legend4.id = 'legend4'; + assert_rendered_legend(legend5); + }, 'dynamic changes to position'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation-ref.html new file mode 100644 index 0000000000..954bcab573 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<p>There should be a green box below.</p> +<div style="background: green; width: 100px; height: 100px;"></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation.html new file mode 100644 index 0000000000..aa51ebac62 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/grid-template-propagation.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="match" href="grid-template-propagation-ref.html"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1222988"> +<link rel="help" href="https://html.spec.whatwg.org/C/#anonymous-fieldset-content-box"> +<style> +fieldset { + display: grid; + grid-template: auto / 1fr; + grid-template-areas: "a"; + width: 100px; + height: 100px; + margin: 0; + border: none; + padding: 0; +} +</style> +<p>There should be a green box below.</p> +<fieldset> + <div style="background: green; grid-area: a"></div> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/insert-legend-in-multicol-fieldset-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/insert-legend-in-multicol-fieldset-crash.html new file mode 100644 index 0000000000..aad552dbe2 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/insert-legend-in-multicol-fieldset-crash.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1211926"> +<fieldset id="fieldset"> + <legend id="legend"></legend> + <div></div> +</fieldset> +<script> + document.body.offsetTop; + fieldset.style.columns = "2"; + legend.style.position = "relative"; +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-justify-self.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-justify-self.html new file mode 100644 index 0000000000..29df29d177 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-justify-self.html @@ -0,0 +1,34 @@ +<!doctype html> +<title>legend align to justify-self</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<fieldset><legend>x</legend></fieldset> +<fieldset><legend align=left>x</legend></fieldset> +<fieldset><legend align=center>x</legend></fieldset> +<fieldset><legend align=right>x</legend></fieldset> +<fieldset><legend align=lEfT>x</legend></fieldset> +<fieldset><legend align=cEnTeR>x</legend></fieldset> +<fieldset><legend align=rIgHt>x</legend></fieldset> +<!-- invalid values --> +<fieldset><legend align=justify>x</legend></fieldset> +<fieldset><legend align="left ">x</legend></fieldset> +<!-- dir --> +<fieldset><legend dir=ltr>x</legend></fieldset> +<fieldset><legend dir=rtl>x</legend></fieldset> +<fieldset dir=rtl><legend dir=ltr>x</legend></fieldset> +<fieldset dir=rtl><legend dir=rtl>x</legend></fieldset> +<script> +for (const fieldset of document.querySelectorAll('fieldset')) { + test(() => { + const legend = fieldset.firstChild; + const align = legend.align.toLowerCase(); + let expected = 'auto'; + switch (align) { + case 'left': expected = 'left'; break; + case 'center': expected = 'center'; break; + case 'right': expected = 'right'; break; + } + assert_equals(getComputedStyle(legend).justifySelf, expected); + }, `${fieldset.outerHTML}`) +} +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-text-align.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-text-align.html new file mode 100644 index 0000000000..01483bf8ad --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align-text-align.html @@ -0,0 +1,27 @@ +<!doctype html> +<title>legend align does not map to text-align</title> +<!-- See discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1488228 --> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + legend { width: 13em } +</style> +<fieldset><legend>foo bar abcdefghijklmnopqrstuvwxyz</legend></fieldset> +<fieldset><legend align=left>foo bar abcdefghijklmnopqrstuvwxyz</legend></fieldset> +<fieldset><legend align=center>foo bar abcdefghijklmnopqrstuvwxyz</legend></fieldset> +<fieldset><legend align=right>foo bar abcdefghijklmnopqrstuvwxyz</legend></fieldset> +<fieldset><legend align=justify>foo bar abcdefghijklmnopqrstuvwxyz</legend></fieldset> +<script> +function test_align(selectorTest, expectedAlign) { + const testElm = document.querySelector(selectorTest); + test(() => { + assert_equals(getComputedStyle(testElm).textAlign, expectedAlign); + }, selectorTest); +} + +test_align('legend', 'start'); + +for (const val of ['left', 'center', 'right', 'justify']) { + test_align(`legend[align=${val}]`, 'start'); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align.html new file mode 100644 index 0000000000..e774599819 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-align.html @@ -0,0 +1,50 @@ +<!doctype html> +<title>legend align</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<fieldset><legend align=left>x</legend></fieldset> +<fieldset><legend align=center>x</legend></fieldset> +<fieldset><legend align=right>x</legend></fieldset> +<fieldset><legend align=justify>x</legend></fieldset> +<div align=left> + <fieldset><legend>x</legend></fieldset> +</div> +<div align=center> + <fieldset><legend>x</legend></fieldset> +</div> +<div align=right> + <fieldset><legend>x</legend></fieldset> +</div> +<div align=justify> + <fieldset><legend>x</legend></fieldset> +</div> +<div style="text-align: center"> + <fieldset><legend>x</legend></fieldset> +</div> +<div style="text-align: center" align=center> + <fieldset><legend>x</legend></fieldset> +</div> +<fieldset><legend style="margin: 0 auto">x</legend></fieldset> +<fieldset><legend style="margin: 0 0 0 auto">x</legend></fieldset> +<fieldset dir=rtl><legend>x</legend></fieldset> +<fieldset dir=rtl><legend style="text-align: left">x</legend></fieldset> +<script> +function test_align(selectorTest, selectorRef) { + const testElm = document.querySelector(selectorTest); + const refElm = document.querySelector(selectorRef); + test(() => { + assert_equals(testElm.offsetLeft, refElm.offsetLeft, `expected ${selectorRef}`); + }, selectorTest); +} + +for (const val of ['left', 'center', 'right', 'justify']) { + test_align(`div[align=${val}] legend`, `legend[align=left]`); +} + +test_align(`div[style="text-align: center"] legend`, `legend[align=left]`); +test_align(`div[style="text-align: center"][align=center] legend`, `legend[align=left]`); +test_align(`legend[style="margin: 0 auto"]`, `legend[align=center]`); +test_align(`legend[style="margin: 0 0 0 auto"]`, `legend[align=right]`); +test_align(`fieldset[dir=rtl] legend`, `legend[align=right]`); +test_align(`fieldset[dir=rtl] legend[style="text-align: left"]`, `legend[align=right]`); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins-ref.html new file mode 100644 index 0000000000..8b1258727f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<title>legend inline auto margins</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1488301"> +<style> +body, html { padding:0; margin: 0; } +div { + border: 1px solid black; + border-width: 10px 17px 7px 23px; + padding: 0; + margin: 0; + width: 448px; + height: 5px; + margin-top: 5px; + position: relative; +} +span { + position: absolute; + top: -15px; + width: 200px; + height: 20px; + padding: 0; + margin: 0; + background: grey; +} +center { width: 200px; height: 20px; background: red; } +</style> +</head> +<body> + <div><span style="right:17px"></span></div> + <div><span style="left:31px"></span></div> + <div><span style="left:131px"></span></div> + <div><span style="right:32px"></span></div> + <div><span style="left:46px"></span></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins.html new file mode 100644 index 0000000000..dd1964ba25 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-auto-margins.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<title>legend inline auto margins</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1488301"> +<link rel="match" href="legend-auto-margins-ref.html"> +<style> +body, html { padding:0; margin: 0; } +fieldset { + border: 1px solid black; + border-width: 10px 17px 7px 23px; + padding: 0 17px 0 31px; + margin: 0; + width: 400px; +} +legend { + width: 200px; + height: 20px; + padding: 0; + margin: 0; + background: grey; +} +</style> +</head> +<body> + <fieldset><legend style="margin-left:auto"></legend></fieldset> + <fieldset><legend style="margin-right:auto"></legend></fieldset> + <fieldset><legend style="margin:0 auto"></legend></fieldset> + <fieldset><legend style="margin:0 15px 0 auto"></legend></fieldset> + <fieldset><legend style="margin:0 auto 0 15px"></legend></fieldset> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-formatting-context.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-formatting-context.html new file mode 100644 index 0000000000..4e95391797 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-formatting-context.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<title>The legend element: block formatting context</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +/* Set margin and padding for fieldset to 0 to make things simpler */ +fieldset { + margin: 0; + padding: 0; +} +.wrapper { + height: 200px; + position: relative; +} +.float { + float: left; + width: 50px; + height: 50px; + background-color: orange; +} +</style> + +<div class=wrapper> + <div class=float></div> + <legend id=in-body><div class=float></div></legend> + <div class=float></div> +</div> + +<div class=wrapper> + <fieldset> + <div class=float></div> + <legend id=rendered-legend><div class=float></div></legend> + <legend id=in-fieldset-second-child><div class=float></div></legend> + <div><legend id=in-fieldset-descendant><div class=float></div></legend></div> + </fieldset> +</div> + +<script> +const fieldsetBorderWidth = 2; +const legendPadding = 2; + +test(() => { + const legend = document.getElementById('in-body'); + assert_equals(legend.offsetLeft, 0, 'legend.offsetLeft'); + assert_equals(legend.offsetTop, 0, 'legend.offsetTop'); + assert_equals(legend.clientHeight, 0, 'legend.clientHeight'); + const divAfter = legend.nextElementSibling; + assert_equals(divAfter.offsetLeft, 100, 'divAfter.offsetLeft'); + assert_equals(divAfter.offsetTop, 0, 'divAfter.offsetTop'); +}, 'in-body'); + +test(() => { + const legend = document.getElementById('rendered-legend'); + assert_equals(legend.offsetLeft, fieldsetBorderWidth, 'legend.offsetLeft'); + assert_equals(legend.offsetTop, 0, 'legend.offsetTop'); + assert_equals(legend.clientHeight, 50, 'legend.clientHeight'); + const divChild = legend.firstChild; + assert_equals(divChild.offsetLeft, fieldsetBorderWidth + legendPadding, 'divChild.offsetLeft'); + assert_equals(divChild.offsetTop, 0, 'divChild.offsetTop'); +}, 'rendered-legend'); + +test(() => { + const legend = document.getElementById('in-fieldset-second-child'); + assert_equals(legend.offsetLeft, fieldsetBorderWidth, 'legend.offsetLeft'); + assert_equals(legend.offsetTop, 50, 'legend.offsetTop'); + assert_equals(legend.clientHeight, 0, 'legend.clientHeight'); + const divChild = legend.firstChild; + assert_equals(divChild.offsetLeft, fieldsetBorderWidth + 50, 'divChild.offsetLeft'); + assert_equals(divChild.offsetTop, 50, 'divChild.offsetTop'); +}, 'in-fieldset-second-child'); + +test(() => { + const legend = document.getElementById('in-fieldset-descendant'); + assert_equals(legend.offsetLeft, fieldsetBorderWidth, 'legend.offsetLeft'); + assert_equals(legend.offsetTop, 50, 'legend.offsetTop'); + assert_equals(legend.clientHeight, 0, 'legend.clientHeight'); + const divChild = legend.firstChild; + assert_equals(divChild.offsetLeft, fieldsetBorderWidth + 50 + 50, 'divChild.offsetLeft'); + assert_equals(divChild.offsetTop, 50, 'divChild.offsetTop'); +}, 'in-fieldset-descendant'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2-ref.html new file mode 100644 index 0000000000..1680cc8884 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2-ref.html @@ -0,0 +1,142 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference for legend block-axis margins</title> +<style> +.fieldset { + display: block; + position: relative; + width: 40px; + border: 2px solid blue; + padding: 4px; +} +.legend { + display: block; + position: absolute; + width: 10px; + height: 20px; + padding: 0; + margin: 0; + background: grey; +} + +.t2 .fieldset { border-top-width: 12px; } +.t3 .fieldset { border-top-width: 12px; } +.t3 .legend { height: 12px; background:white; } +.legend > x { display:block; position:relative; height:6px; background:grey; margin-top:3px; } + +div { border: 1px solid; margin: 0 2px 10px 0; } +c { display:block; height:10px; background: lightgrey; } +f { float: left; } +</style> +</head> +<body> + +<f> +<div> + <span class="fieldset" style="margin-top:9px"><span class="legend" style="top:-11px"></span><c style="margin-top:9px"></c></span> +</div> + +<div> + <span class="fieldset" style="margin-top:19px"><span class="legend" style="top:-11px"></span><c style="margin-top:9px"></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="top:-12px"></span><c style="margin-top:8px"></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span> +</div> + +<div> + <span class="fieldset" style="margin-top:9px"><span class="legend" style="top:-11px"></span><c style="margin-top:19px"></c></span> +</div> + +<div> + <span class="fieldset" style="margin-top:9px"><span class="legend" style="top:-11px"></span><c style="margin-top:29px"></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="top:-2px; z-index:1"></span><c style="position:relative; z-index:1"></c></span> +</div> +</f> + +<f class=t2> +<div> + <span class="fieldset" style="margin-top:4px"><span class="legend" style="top:-16px"></span><c style="margin-top:4px"></c></span> +</div> + +<div> + <span class="fieldset" style="margin-top:14px"><span class="legend" style="top:-16px"></span><c style="margin-top:4px"></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span> +</div> + +<div> + <span class="fieldset" style="margin-top:4px"><span class="legend" style="top:-16px"></span><c style="margin-top:14px"></c></span> +</div> + +<div> + <span class="fieldset" style="margin-top:4px"><span class="legend" style="top:-16px"></span><c style="margin-top:24px"></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="top:-12px; height:16px"></span><c></c></span> +</div> +</f> + +<f class=t3> +<div> + <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span> +</div> + +<div> + <span class="fieldset" style="margin-top: 4px"><span class="legend" style="margin-top: -16px"><x style="top:3px"></x></span><c></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="margin-top: -16px"><x style="top:-3px"></x></span><c style="margin-top:4px"></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="margin-top: -16px"><x style="top:-3px"></x></span><c style="margin-top:14px"></c></span> +</div> + +<div> + <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span> +</div> +</f> + +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2.html new file mode 100644 index 0000000000..9ca9e18adf --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-2.html @@ -0,0 +1,139 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>legend block-axis margins</title> + <link rel="match" href="legend-block-margins-2-ref.html"> +<style> +fieldset { + width: 40px; + border: 2px solid blue; + padding: 4px; + margin: 0; +} +legend { + width: 10px; + height: 20px; + padding: 0; + background: grey; + +} + +.t2 fieldset { border-top-width: 12px; } +.t3 fieldset { border-top-width: 12px; } +.t3 legend { height: 6px; } + +div { border: 1px solid; margin: 0 2px 10px 0; } +c { display:block; height:10px; background: lightgrey; } +f { float: left; } +</style> +</head> +<body> + +<f> +<div> + <fieldset><legend></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: 10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -20px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -30px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: 10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: 20px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: -20px"></legend><c></c></fieldset> +</div> +</f> + +<f class=t2> +<div> + <fieldset><legend></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: 10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -20px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -30px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: 10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: 20px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: -20px"></legend><c></c></fieldset> +</div> +</f> + +<f class=t3> +<div> + <fieldset><legend></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: 10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -20px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-top: -30px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: 10px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: 20px"></legend><c></c></fieldset> +</div> + +<div> + <fieldset><legend style="margin-bottom: -20px"></legend><c></c></fieldset> +</div> +</f> + +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-ref.html new file mode 100644 index 0000000000..f2701d26f3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>Reference for legend block margins</title> +<style> +body { margin: 0; } +.fieldset { margin: 2em 1em 1em 1em; border: 1em solid green; } +.legend { position: absolute; margin-top: -1em; margin-left: 1em; background: white; height: 1em; } +.inner { margin: 3em 1em 1em 1em; height: 1em; } +</style> +<p>There should be no red.</p> +<div class=fieldset> + <div class=legend>X</div> + <div class=inner>Y</div> +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins.html new file mode 100644 index 0000000000..98cd16c7c1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-margins.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>legend block margins</title> +<link rel=match href=legend-block-margins-ref.html> +<style> + body { margin: 0; } + fieldset { margin: 1em; border: 1em solid green; padding: 0; background: white; } + legend { margin: 1em 1em 2em 1em; height: 1em; padding: 0; } + .inner { margin: 1em; height: 1em; } + .behind { position: absolute; left: 1em; right: 1em; margin-top: 1em; height: 7em; background: red; z-index: -1; } +</style> +<p>There should be no red.</p> +<div class=behind></div> +<fieldset> + <legend>X</legend> + <div class=inner>Y</div> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-position-centering.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-position-centering.html new file mode 100644 index 0000000000..a4eda6e3ef --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-block-position-centering.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<link rel="help" href="https://html.spec.whatwg.org/C/#the-fieldset-and-legend-elements"> +<!-- A test for the following paragraph: +The element is expected to be positioned in the block-flow direction such that +its border box is centered over the border on the block-start side of the +fieldset element. +--> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +fieldset { + margin: 0; + padding: 0; + border: 100px solid black; +} +legend { + height: 0px; + border-color: yellow; + border-style: solid; +} +</style> +<fieldset> +<legend style="border-width:50px"></legend> +<br> +</fieldset> +<br> + +<fieldset> +<legend style="border-width:25px 50px"></legend> +<br> +</fieldset> +<br> + +<fieldset> +<legend style="border-width:10px 50px 40px 50px"></legend> +<br> +</fieldset> +<br> + +<fieldset> +<legend style="border-width:40px 50px 10px 50px"></legend> +<br> +</fieldset> + +<script> +function legendBlockOffset(fieldset) { + let legend = fieldset.querySelector('legend'); + return legend.getBoundingClientRect().y - fieldset.getBoundingClientRect().y; +} + +test(() => { + let fieldsets = document.querySelectorAll('fieldset'); + assert_equals(legendBlockOffset(fieldsets[0]), 0); + assert_equals(legendBlockOffset(fieldsets[1]), 25); + assert_equals(legendBlockOffset(fieldsets[2]), 25); + assert_equals(legendBlockOffset(fieldsets[3]), 25); +}, 'Legend\'s border-box should be centere on the fieldset border'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering-ref.html new file mode 100644 index 0000000000..e6eff47e53 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>Reference for Rendering of display: none legend</title> +<style> + div { border: 2em solid lime; width: 0; } +</style> +<p>There should be a green box below.</p> +<div></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering.html new file mode 100644 index 0000000000..abf3c45df7 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none-rendering.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>Rendering of display: none legend</title> +<link rel=match href=legend-display-none-rendering-ref.html> +<style> + fieldset { border: 2em solid lime; width: 0; margin: 0; padding: 0; } + legend { display: none; background: red; } +</style> +<p>There should be a green box below.</p> +<fieldset> + <legend>FAIL</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none.html new file mode 100644 index 0000000000..689454ac49 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-none.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>legend display: none</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + legend { display: none; } +</style> +<fieldset> + <legend>Foo</legend> +</fieldset> +<script> + test(() => { + const display = getComputedStyle(document.querySelector('legend')).display; + assert_equals(display, 'none'); + }); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering-ref.html new file mode 100644 index 0000000000..189b195f61 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering-ref.html @@ -0,0 +1,34 @@ +<!doctype html> +<title>Reference for rendered legend and CSS display rendering</title> +<style> +body { margin: 0; } +div { width: 600px; box-sizing: border-box; background: #ddd; border: 1px solid; } +.padding { padding-left: 5em; } +.margin { margin-left: 5em; } +.cell { display: inline-block; width: 50%; } +.ruby { display: block; } +</style> +<div><span class=cell>table</span><span class=cell>table</span></div> +<div class=padding>table-row-group</div> +<div class=padding>table-header-group</div> +<div class=padding>table-footer-group</div> +<div class=padding>table-row</div> +<div class=margin>table-cell</div> +<div class=padding>table-column-group</div> +<div class=padding>table-column</div> +<div>table-caption</div> +<div>flow</div> +<div>flow-root</div> +<div>run-in</div> +<div>inline</div> +<div>inline-block</div> +<div><span class=cell>inline-table</span><span class=cell>inline-table</span></div> +<div><span class=ruby>ruby</span><span class=ruby>ruby</span></div> +<div>ruby-base</div> +<div>ruby-text</div> +<div>ruby-base-container</div> +<div>ruby-text-container</div> +<div><span class=cell>grid</span><span class=cell>grid</span></div> +<div><span class=cell>inline-grid</span><span class=cell>inline-grid</span></div> +<div><span class=cell>flex</span><span class=cell>flex</span></div> +<div><span class=cell>inline-flex</span><span class=cell>inline-flex</span></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering.html new file mode 100644 index 0000000000..ba6610503a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display-rendering.html @@ -0,0 +1,119 @@ +<!doctype html> +<title>rendered legend and CSS display rendering</title> +<link rel=match href=legend-display-rendering-ref.html> +<style> +body { margin: 0; } +fieldset { margin: 0; padding: 0; border: none; } +legend { width: 600px; box-sizing: border-box; padding: 0; background: #ddd; border: 1px solid; } +[style="display: table"] span, +[style="display: inline-table"] span { display: table-cell; } +[style="display: table-row-group"], +[style="display: table-header-group"], +[style="display: table-footer-group"], +[style="display: table-row"], +[style="display: table-column-group"], +[style="display: table-column"] { padding-left: 5em; /* would be ignored if not blockified */ } +[style="display: table-cell"] { margin-left: 5em; /* would be ignored if not blockified */ } +.rb { display: ruby-base; } +.rt { display: ruby-text; } +[style="display: grid"], +[style="display: inline-grid"] { grid-template-columns: auto auto; } +[style="display: flex"] span, +[style="display: inline-flex"] span { display: block; flex-grow: 1 } +</style> +<fieldset> + <legend style="display: table"><span>table</span><span>table</span></legend> +</fieldset> + +<fieldset> + <legend style="display: table-row-group">table-row-group</legend> +</fieldset> + +<fieldset> + <legend style="display: table-header-group">table-header-group</legend> +</fieldset> + +<fieldset> + <legend style="display: table-footer-group">table-footer-group</legend> +</fieldset> + +<fieldset> + <legend style="display: table-row">table-row</legend> +</fieldset> + +<fieldset> + <legend style="display: table-cell">table-cell</legend> +</fieldset> + +<fieldset> + <legend style="display: table-column-group">table-column-group</legend> +</fieldset> + +<fieldset> + <legend style="display: table-column">table-column</legend> +</fieldset> + +<fieldset> + <legend style="display: table-caption">table-caption</legend> +</fieldset> + +<fieldset> + <legend style="display: flow">flow</legend> +</fieldset> + +<fieldset> + <legend style="display: flow-root">flow-root</legend> +</fieldset> + +<fieldset> + <legend style="display: run-in">run-in</legend> +</fieldset> + +<fieldset> + <legend style="display: inline">inline</legend> +</fieldset> + +<fieldset> + <legend style="display: inline-block">inline-block</legend> +</fieldset> + +<fieldset> + <legend style="display: inline-table"><span>inline-table</span><span>inline-table</span></legend> +</fieldset> + +<fieldset> + <legend style="display: ruby"><span class=rb>ruby</span><span class=rt>ruby</span></legend> +</fieldset> + +<fieldset> + <legend style="display: ruby-base">ruby-base</legend> +</fieldset> + +<fieldset> + <legend style="display: ruby-text">ruby-text</legend> +</fieldset> + +<fieldset> + <legend style="display: ruby-base-container">ruby-base-container</legend> +</fieldset> + +<fieldset> + <legend style="display: ruby-text-container">ruby-text-container</legend> +</fieldset> + +<fieldset> + <legend style="display: grid"><span>grid</span><span>grid</span></legend> +</fieldset> + +<fieldset> + <legend style="display: inline-grid"><span>inline-grid</span><span>inline-grid</span></legend> +</fieldset> + +<fieldset> + <legend style="display: flex"><span>flex</span><span>flex</span></legend> +</fieldset> + +<fieldset> + <legend style="display: inline-flex"><span>inline-flex</span><span>inline-flex</span></legend> +</fieldset> + diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display.html new file mode 100644 index 0000000000..b6c57a67ba --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-display.html @@ -0,0 +1,40 @@ +<!doctype html> +<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> + const refElm = document.querySelector('#ref'); + const refStyle = getComputedStyle(refElm); + 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', '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 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> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-dynamic-update.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-dynamic-update.html new file mode 100644 index 0000000000..5dc68244fe --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-dynamic-update.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>legend and dynamic update</title> +<link rel=fieldset-foo-ref.html> +<p>There should be a normal fieldset below with the legend "Foo".</p> +<fieldset> + <legend>F</legend> +</fieldset> +<script> + const legend = document.querySelector('legend'); + // force layout + legend.offsetTop; + requestAnimationFrame(() => { + legend.textContent += "oo"; + requestAnimationFrame(() => { + document.documentElement.removeAttribute('class'); + }); + }); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-abspos.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-abspos.html new file mode 100644 index 0000000000..7979e1d03e --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-abspos.html @@ -0,0 +1,88 @@ +<!doctype html> +<title>legend and float and position: absolute/fixed</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + body { margin: 0; } + fieldset { margin: 0; padding: 20px; border: 10px solid; width: 300px; } + legend { height: 10px; } + #legend1 { float: left; } + #legend2 { float: right; } + #legend3 { position: absolute; } + #legend4 { position: fixed; } +</style> +<fieldset id=fieldset> + <div>div</div> + <legend id=legend1>legend1</legend> + <legend id=legend2>legend2</legend> + <legend id=legend3>legend3</legend> + <legend id=legend4>legend4</legend> + <legend id=legend5>legend5</legend> +</fieldset> +<script> + const fieldset = document.getElementById('fieldset'); + const legends = document.getElementsByTagName('legend'); + const [legend1, legend2, legend3, legend4, legend5] = legends; + const expectedTop = 0; + const expectedLeft = 10 + 20; + + function assert_rendered_legend(legend) { + assert_equals(legend.offsetTop, expectedTop, `${legend.id}.offsetTop`); + assert_equals(legend.offsetLeft, expectedLeft, `${legend.id}.offsetLeft`); + for (const other of legends) { + if (other === legend) { + continue; + } + if (other.offsetTop === expectedTop && other.offsetLeft === expectedLeft) { + assert_unreached(`${other.id} should not be the "rendered legend"`); + } + } + } + + test(t => { + assert_rendered_legend(legend5); + }, 'no dynamic changes'); + + test(t => { + const legend = document.createElement('legend'); + t.add_cleanup(() => { + legend.remove(); + }); + legend.id = 'script-inserted'; + legend.textContent = 'script-inserted legend'; + fieldset.insertBefore(legend, legend1); + assert_rendered_legend(legend); + legend.remove(); + assert_rendered_legend(legend5); + }, 'inserting a new legend and removing it again'); + + test(t => { + t.add_cleanup(() => { + legend1.id = 'legend1'; + legend2.id = 'legend2'; + }); + legend2.id = ''; + assert_rendered_legend(legend2); + legend1.id = ''; + assert_rendered_legend(legend1); + legend1.id = 'legend1'; + assert_rendered_legend(legend2); + legend2.id = 'legend2'; + assert_rendered_legend(legend5); + }, 'dynamic changes to float'); + + test(t => { + t.add_cleanup(() => { + legend3.id = 'legend3'; + legend4.id = 'legend4'; + }); + legend4.id = ''; + assert_rendered_legend(legend4); + legend3.id = ''; + assert_rendered_legend(legend3); + legend3.id = 'legend3'; + assert_rendered_legend(legend4); + legend4.id = 'legend4'; + assert_rendered_legend(legend5); + }, 'dynamic changes to position'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-ref.html new file mode 100644 index 0000000000..c51bca231e --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>Reference for floated legend should not disappear</title> +<style> + div { width: 100px; height: 100px; background: lime; } +</style> +<p>There should be no red.</p> +<div></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float.html new file mode 100644 index 0000000000..f70e952ed0 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-float.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>floated legend should not disappear</title> +<link rel=match href=legend-float-ref.html> +<style> + fieldset { margin: 0; padding: 0; border: none; width: 100px; height: 50px; background: red; } + legend { width: 100px; height: 50px; background: lime; padding: 0; } + .left { float: left; } + .right { float: right; } +</style> +<p>There should be no red.</p> +<fieldset><legend class=left></legend></fieldset> +<fieldset><legend class=right></legend></fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-grid-flex-multicol.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-grid-flex-multicol.html new file mode 100644 index 0000000000..edd2600d4a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-grid-flex-multicol.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>legend and flexbox, grid & multicol</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +legend { width: 200px; background: silver } +#flex { display: flex; } +#inline-flex { display: inline-flex; } +#grid { display: grid; } +#inline-grid { display: inline-grid; } +#grid, #inline-grid { grid-template-columns: auto auto } +#multicol { columns: 2; } +</style> +<fieldset><legend id=ref>12</legend></fieldset> +<fieldset><legend id=flex><div>1</div><div>2</div></legend></fieldset> +<fieldset><legend id=inline-flex><div>1</div><div>2</div></legend></fieldset> +<fieldset><legend id=grid><div>1</div><div>2</div></legend></fieldset> +<fieldset><legend id=inline-grid><div>1</div><div>2</div></legend></fieldset> +<fieldset><legend id=multicol><div>1</div><div>2</div></legend></fieldset> +<script> + const ref = document.getElementById('ref'); + for (const id of ["flex", "inline-flex", "grid", "inline-grid", "multicol"]) { + test(() => { + const elm = document.getElementById(id); + assert_equals(elm.offsetHeight, ref.offsetHeight, 'offsetHeight'); + if (id !== "multicol") { + assert_equals(getComputedStyle(elm).display, id, 'display'); + } + }, id); + } +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-hover.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-hover.html new file mode 100644 index 0000000000..170e3cc874 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-hover.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<style> +legend:hover { + background: lime; +} +</style> +<h1>Header</h1> +<fieldset> + <legend>Legend</legend> +</fieldset> +<script> +// https://crbug.com/1127743 +promise_test(async () => { + await test_driver.click(document.querySelector('legend')); + assert_not_equals(document.querySelector('legend:hover'), null); +}, 'The rendered LEGEND should work well for :hover.'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot-ref.html new file mode 100644 index 0000000000..ee64e81762 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<fieldset> + <legend>Is rendered legend</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot.html new file mode 100644 index 0000000000..c4ab5a3ea0 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-in-slot.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="match" href="legend-in-slot-ref.html"> + +<div id="host"> + <legend id="legend">Was rendered legend</legend> + <legend>Is rendered legend</legend> +</div> +<script> +let root = document.querySelector('#host').attachShadow({mode:"open"}); +root.innerHTML = ` +<fieldset> + <slot></slot> +</fieldset>`; +document.body.offsetTop; +document.querySelector('#legend').remove(); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-inline-position-with-fieldset-padding.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-inline-position-with-fieldset-padding.html new file mode 100644 index 0000000000..0b2624859e --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-inline-position-with-fieldset-padding.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<link rel="help" href="https://html.spec.whatwg.org/C/#the-fieldset-and-legend-elements"> +<!-- A test for the following paragraphs: +The element's box is expected to be constrained in the inline direction by +the inline content size of the fieldset as if it had used its computed +inline padding. +Example: +For example, if the fieldset has a specified padding of 50px, then the +rendered legend will be positioned 50px in from the fieldset's border. The +padding will further apply to the anonymous fieldset content box instead +of the fieldset element itself. +--> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +fieldset { + width: 400px; + margin: 0; + padding: 0 50px; + border: 2px solid black; +} +legend { + width: 100%; + padding: 0; + background-color: yellow; +} +.content { + background-color: lime; +} +</style> +<fieldset> +<legend>Legend</legend> +</fieldset> + +<script> +test(() => { + let fieldset = document.querySelector('fieldset'); + let legend = document.querySelector('legend'); + assert_equals(legend.offsetLeft - fieldset.offsetLeft, 52); + assert_equals(legend.offsetWidth, 400); +}, 'Test legend\'s inline-size in a fieldset with inline paddings'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering-ref.html new file mode 100644 index 0000000000..f7b4754e09 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference for legend and display: list-item numbering</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + +<style> +ol { margin: 0; padding: 0; border: none; } +ol > * { margin: 0 40px; padding: 0; } +</style> + +<ol> + <li value="2">B</li> + <li value="1">A</li> + <li value="3">C</li> +</ol> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering.html new file mode 100644 index 0000000000..d7d904b8c7 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-numbering.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Legend and display: list-item numbering</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel=match href="legend-list-item-numbering-ref.html"> + +<style> +fieldset { margin: 0; padding: 0; border: none; list-style-type: decimal; } +fieldset > * { margin: 0 40px; padding: 0; display: list-item; } +</style> + +<fieldset> + <div>A</div> + <legend>B</legend> + <div>C</div> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-ref.html new file mode 100644 index 0000000000..ee76e93b64 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>Reference for legend and dipslay: list-item</title> +<style> + div { margin: 0 40px; display: list-item; } +</style> +<p>There should be a bullet point below.</p> +<div>X</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item.html new file mode 100644 index 0000000000..e967643572 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-list-item.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>legend and dipslay: list-item</title> +<link rel=match href=legend-list-item-ref.html> +<style> + fieldset { margin: 0; padding: 0; border: none; } + legend { margin: 0 40px; padding: 0; display: list-item; } +</style> +<p>There should be a bullet point below.</p> +<fieldset> + <legend>X</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-margin-inline.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-margin-inline.html new file mode 100644 index 0000000000..8daf78db99 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-margin-inline.html @@ -0,0 +1,50 @@ +<!doctype html> +<title>legend and margin (inline direction)</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + fieldset { margin: 0 0 10px 0; padding: 20px; border: 10px solid; width: 500px; } + legend { height: 10px; width: 200px; padding: 0; } + + #legend-center { margin-left: auto; margin-right: auto; } + #legend-right { margin-left: auto; } + #legend-10 { margin-left: 10px; } +</style> +<fieldset> + <legend id=legend-left>left</legend> +</fieldset> +<fieldset> + <legend id=legend-center>center</legend> +</fieldset> +<fieldset> + <legend id=legend-right>right</legend> +</fieldset> +<fieldset> + <legend id=legend-10>10px</legend> +</fieldset> + +<script> + const legends = document.getElementsByTagName('legend'); + const [legendLeft, legendCenter, legendRight, legend10] = legends; + + const expectedLeft = 8 + 10 + 20; + const expectedCenter = expectedLeft + (500 / 2) - (200 / 2); + const expectedRight = expectedLeft + 500 - 200; + const expected10 = expectedLeft + 10; + + test(() => { + assert_equals(legendLeft.offsetLeft, expectedLeft); + }, 'left'); + + test(() => { + assert_equals(legendCenter.offsetLeft, expectedCenter); + }, 'center'); + + test(() => { + assert_equals(legendRight.offsetLeft, expectedRight); + }, 'right'); + + test(() => { + assert_equals(legend10.offsetLeft, expected10); + }, '10px'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order-ref.html new file mode 100644 index 0000000000..94f4991f22 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>Reference for fieldset painting order</title> + +<p>There should be a green square below, and no red.</p> +<div style="width:100px; height:100px; background:green;"></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order.html new file mode 100644 index 0000000000..ac0bd43037 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-painting-order.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>Legend painting order</title> +<link rel=match href=legend-painting-order-ref.html> + +<p>There should be a green square below, and no red.</p> +<div style="float:left; width:0px; height:0px;"> + <div style="width:100px; height:100px; background:red;"></div> +</div> +<fieldset style="margin:0; border:none; padding:0;"> + <legend style="padding:0;"> + <div style="float:left; width:100px; height:100px; background:green;"></div> + </legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2-ref.html new file mode 100644 index 0000000000..da2dd3e1c6 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Reference for legend position: relative</title> +<style> +#fieldset2 { + background: lime; + border: 2px solid lime; + width: 200px; + padding: 0; + margin: 0; +} +#legend2 { + background: #00ffff; +} +</style> +<p>"Legend" should be shown.</p> +<fieldset id="fieldset2"><legend id="legend2">Legend</legend></fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2.html new file mode 100644 index 0000000000..3fbdbd5c20 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-2.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>legend position: relative</title> +<link ref=help href="http://crbug.com/1151295"> +<link rel=match href=legend-position-relative-2-ref.html> +<style> +#fieldset2 { + background: lime; + border: 2px solid lime; + width: 200px; + padding: 0; + margin: 0; + overflow: hidden; +} +#legend2 { + position: relative; + overflow: hidden; + background: #00ffff; +} +</style> +<p>"Legend" should be shown.</p> +<fieldset id="fieldset2"><legend id="legend2">Legend</legend></fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-ref.html new file mode 100644 index 0000000000..fd6c11a005 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>Reference for legend position: relative</title> +<style> +div { display: inline-block; background: lime; } +.a { width: 100px; height: 200px; } +.b { width: 100px; height: 100px; } +.c { width: 200px; height: 200px; } +</style> +<p>There should be no red.</p> +<div class=a></div><div class=b></div><div class=c></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative.html new file mode 100644 index 0000000000..9938361261 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>legend position: relative</title> +<link rel=match href=legend-position-relative-ref.html> +<style> +fieldset { border: 100px solid lime; width: 200px; padding: 0; margin: 0 } +legend { position: relative; left: 100px; width: 100px; height: 100px; padding: 0 } +.behind { position: absolute; left: 208px; width: 100px; height: 100px; background: red; z-index: -1 } +</style> +<p>There should be no red.</p> +<div class=behind></div> +<fieldset><legend></legend></fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sans-fieldset-display.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sans-fieldset-display.html new file mode 100644 index 0000000000..5f27ca5c29 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sans-fieldset-display.html @@ -0,0 +1,68 @@ +<!doctype html> +<title>legend sans fieldset and CSS display</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + * { margin: 0; padding: 0; } + .table, table { display: table; width: 200px; border-collapse: collapse; } + .tbody { display: table-row-group; } + .tr { display: table-row; } + .td, td { display: table-cell; } + .col { display: table-column; } + .caption { display: table-caption; } + .li { display: list-item; } + .inline { display: inline; } + .inline-block { display: inline-block; } + .inline-table { display: inline-table; } + .ruby { display: ruby; } + .rt { display: ruby-text; } + rt { font-size: inherit; } +</style> +<legend class=table> + <legend class=caption>caption</legend> + <legend class=col></legend><legend class=col></legend> + <legend class=tbody> + <legend class=tr> + <legend class=td>td</legend><legend class=td>td</legend> + </legend> + </legend> +</legend> +<table> + <caption>caption</caption> + <col><col> + <tbody> + <tr> + <td>td<td>td +</table> +<ul> + <legend class=li>li</legend> + <li>li</li> +</ul> +<p>foo <legend class=inline>inline</legend> <span>inline</span> +<p>foo <legend class=inline-block>inline-block</legend> <span class=inline-block>inline-block</span> +<p><legend class=ruby>ruby<legend class=rt>rt</legend></legend> <ruby>ruby<rt>rt</ruby> +<script> + function test_display(testSelector, refSelector) { + test(() => { + const testElm = document.querySelector(testSelector); + const refElm = document.querySelector(refSelector); + const testStyle = getComputedStyle(testElm); + const refStyle = getComputedStyle(refElm); + assert_equals(testStyle.display, refStyle.display, testSelector + ' display'); + assert_equals(testStyle.width, refStyle.width, testSelector + ' width'); + assert_equals(testStyle.height, refStyle.height, testSelector + ' height'); + }, testSelector); + } + + test_display('.table', 'table'); + test_display('.caption', 'caption'); + test_display('.col', 'col'); + test_display('.tbody', 'tbody'); + test_display('.tr', 'tr'); + test_display('.td', 'td'); + test_display('.li', 'li'); + test_display('.inline', 'span'); + test_display('.inline-block', 'span.inline-block'); + test_display('.ruby', 'ruby'); + test_display('.rt', 'rt'); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sticky-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sticky-crash.html new file mode 100644 index 0000000000..71debf7e44 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sticky-crash.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="http://crbug.com/1197946"> +<style> +legend { + position: sticky; + left: -1em; +} +fieldset { + position: sticky; + left: -1em; + overflow-y: auto; +} +</style> +<fieldset> +<legend>Legend</legend> +</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall-ref.html new file mode 100644 index 0000000000..004ce42129 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>Reference for tall legend</title> +<style> +body, p { margin: 0; } +.legend { position: absolute; height: 160px; margin-left: 20px; inline-size: fit-content; background: lime } +.fieldset { + position: absolute; + z-index: -1; + margin-top: calc((/* half legend height */ 160px / 2) - (/* half top border */ 20px / 2)); + background: green; + height: 40px; + left: 0; + right: 0; +} +.hello { margin-top: 160px; margin-left: 20px; } +</style> +<p>There should be no red.</p> +<div class=legend>X</div> +<div class=fieldset></div> +<div class=hello>HELLO</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall.html new file mode 100644 index 0000000000..7b9495946e --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-tall.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>tall legend</title> +<link rel=match href=legend-tall-ref.html> +<style> +body, p { margin: 0; } +fieldset { height: 30px; margin: 0; border: 20px solid green; padding: 0px; background: red; } +legend { height: 160px; background: lime; padding: 0; } +#behind { + position: absolute; + z-index: -1; + margin-top: calc((/* half legend height */ 160px / 2) - (/* half top border */ 20px / 2)); + background: red; + height: 40px; + left: 0; + right: 0; +} +</style> +<p>There should be no red.</p> +<div id=behind></div> +<fieldset><legend>X</legend>HELLO</fieldset> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend.html new file mode 100644 index 0000000000..1cda91f32b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend.html @@ -0,0 +1,62 @@ +<!doctype html> +<title>The legend element</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +#ref { + display: block; + unicode-bidi: isolate; + padding-left: 2px; + padding-right: 2px; + /* TODO: uncomment this when these properties are widely supported + padding-inline-start: 2px; padding-inline-end: 2px; + */ +} +</style> + +<legend id=in-body></legend> +<fieldset> + <legend id=rendered-legend></legend> + <legend id=in-fieldset-second-child></legend> + <div><legend id=in-fieldset-descendant></legend></div> +</fieldset> +<div id=ref></div> + +<script> +setup(() => { + self.legends = [].slice.call(document.querySelectorAll('legend')); + self.refStyle = getComputedStyle(document.getElementById('ref')); + self.props = ['display', + 'unicodeBidi', + 'marginTop', + 'marginRight', + 'marginBottom', + 'marginLeft', + 'paddingTop', + 'paddingRight', + 'paddingBottom', + 'paddingLeft', + 'overflow', + // Extra tests + 'height', + 'box-sizing', + ]; +}); +legends.forEach(legend => { + const testStyle = getComputedStyle(legend); + props.forEach(prop => { + test(() => { + assert_equals(testStyle[prop], refStyle[prop]); + }, `${legend.id}: ${prop}`); + }); + + // Test width separately since it differs outside fieldset vs. in fieldset vs. rendered legend + test(() => { + if (legend.id === 'rendered-legend') { + assert_equals(testStyle.width, '0px'); + } else { + assert_not_equals(testStyle.width, '0px'); + } + }, `${legend.id}: width`); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/min-inline-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/min-inline-size.html new file mode 100644 index 0000000000..92c3302970 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/min-inline-size.html @@ -0,0 +1,39 @@ +<!doctype html> +<title>fieldset min-inline-size</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + fieldset { width: 0; height: 0 } + fieldset > div { width: 100px; height: 100px } + #vertical-lr { writing-mode: vertical-lr } + #vertical-rl { writing-mode: vertical-rl } + .override { min-inline-size: 5px } +</style> +<fieldset id=horizontal-tb><div></div></fieldset> +<fieldset id=vertical-lr><div></div></fieldset> +<fieldset id=vertical-rl><div></div></fieldset> +<script> + for (const className of ['', 'override']) { + const expected = className === '' ? '100px' : '5px'; + test(() => { + const fieldset = document.getElementById('horizontal-tb'); + fieldset.className = className; + assert_equals(getComputedStyle(fieldset).width, expected, 'width'); + assert_equals(getComputedStyle(fieldset).height, '0px', 'height'); + }, `horizontal-tb ${className}`); + + test(() => { + const fieldset = document.getElementById('vertical-lr'); + fieldset.className = className; + assert_equals(getComputedStyle(fieldset).width, '0px', 'width'); + assert_equals(getComputedStyle(fieldset).height, expected, 'height'); + }, `vertical-lr ${className}`); + + test(() => { + const fieldset = document.getElementById('vertical-rl'); + fieldset.className = className; + assert_equals(getComputedStyle(fieldset).width, '0px', 'width'); + assert_equals(getComputedStyle(fieldset).height, expected, 'height'); + }, `vertical-rl ${className}`); + } +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/multicol-legend-becomes-floated-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/multicol-legend-becomes-floated-crash.html new file mode 100644 index 0000000000..0e7f87232a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/multicol-legend-becomes-floated-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1122722"> +<fieldset id="fieldset"> + <legend id="legend"></legend> +</fieldset> +<script> + document.body.offsetTop; + fieldset.style.columns = "2"; + legend.style.cssFloat = "left"; +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/no-red-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/no-red-ref.html new file mode 100644 index 0000000000..32b7d46d6f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/no-red-ref.html @@ -0,0 +1,3 @@ +<!doctype html> +<title>Reference there should be no red</title> +<p>There should be no red.</p> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/resources/fieldset-vertical.css b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/resources/fieldset-vertical.css new file mode 100644 index 0000000000..b358d925a7 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/resources/fieldset-vertical.css @@ -0,0 +1,18 @@ +body > div { display: inline-block } +fieldset, .fieldset { padding: 0; height:10em; width:2em; border:1em groove; margin: 0em; line-height:1 } +legend, .legend { padding: 0; width: 1em } +.legend { + background: white; /* overlap the border to emulate the border not being painted */ + display: table; /* shrink-wrap */ +} + +[style="writing-mode: vertical-lr"] .legend { + margin-left: -1em; +} +[style="writing-mode: vertical-rl"] .legend { + margin-right: -1em; +} +.top { margin-bottom: auto } +.center { margin-top: auto; margin-bottom: auto } +.bottom { margin-top: auto } +.rtl { direction: rtl } diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/second-legend-becomes-rendered-legend-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/second-legend-becomes-rendered-legend-crash.html new file mode 100644 index 0000000000..6e36b3bb5a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/second-legend-becomes-rendered-legend-crash.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1119400"> +<fieldset> + <legend id="legend1"></legend> + <legend id="legend2"><div id="child" style="float:left;"></div></legend> +</fieldset> +<script> + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + legend1.style.display = "none"; + document.body.offsetTop; + + child.style.width = "22px"; + document.body.offsetTop; + + child.style.display = "none"; + }); + }); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-crash.html new file mode 100644 index 0000000000..a6e8fa7a82 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-crash.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="help" href="http://crbug.com/1146872"> +<body> +<fieldset><span><span></span></span></fieldset> +<div id="host"><span></span></div> +<script> +const host = document.querySelector('#host'); +const shadowRoot = host.attachShadow({mode: 'closed'}); +const fieldset = shadowRoot.appendChild(document.createElement('fieldset')); +fieldset.setAttribute('style', 'overflow: scroll'); +fieldset.innerHTML = '<slot></slot>'; +</script> +<style> +*:not(fieldset, div) { + position: sticky; + bottom: 72pc; +} +fieldset { + overflow: visible scroll; +} +</style> +</body> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-ref.html new file mode 100644 index 0000000000..95e3c05cd8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<body> +<style> +body { + margin: 0; +} + +.fieldset div { + height:1000px; +} + +span { + background: lime; + display: block; + height: 40px; + position: absolute; + top: 4px; + left: 0px; + width: 40px; +} + +.fieldset { + border: none; + height: 400px; + margin: 0; + overflow: scroll; + padding: 0; +} +</style> +<div class="fieldset"><div><span></span></div></div> +<script> +document.querySelector('.fieldset').scrollTop = 1000; +</script> +</body> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content.html new file mode 100644 index 0000000000..f60d9ec528 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/sticky-content.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="help" href="http://crbug.com/1146925"> +<link rel="match" href="sticky-content-ref.html"> +<body> +<style> +body { + margin: 0; +} + +fieldset div { + height:1000px; +} + +span { + background: lime; + display: block; + height: 40px; + position: sticky; + top: 4px; + width: 40px; +} + +fieldset { + border: none; + height: 400px; + margin: 0; + overflow: scroll; + padding: 0; +} +</style> +<fieldset><div><span></span></div></fieldset> +<script> +document.querySelector('fieldset').scrollTop = 1000; +</script> +</body> |