forked from mirrors/gecko-dev
Bug 1483499: Give <legend> consistent default padding, regardless of whether it's a child of fieldset. r=mats
Differential Revision: https://phabricator.services.mozilla.com/D4029 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Daniel Holbert
parent
6d48a286a1
commit
6fc91f26dc
13 changed files with 191 additions and 27 deletions
|
|
@ -1,5 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<style>
|
||||
legend { padding: 0; }
|
||||
</style>
|
||||
<script>
|
||||
function doTest() {
|
||||
var l = document.createElement("legend");
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<body>
|
||||
|
||||
<div>
|
||||
<legend>The legend</legend>
|
||||
<legend style="padding: 0">The legend</legend>
|
||||
The rest of the div.
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@
|
|||
<div class="contents c3"><div>3</div></div>
|
||||
</div>
|
||||
|
||||
<span class="c2 b"><legend class="inline c1">Legend</legend><legend class="inline c1">Legend</legend></span>
|
||||
<span class="c2 b"><span class="inline c1">Legend</span><span class="inline c1">Legend</span></span>
|
||||
<br clear="all">
|
||||
<span class="c3">x<div class="inline c1">float:left</div></span>
|
||||
<span class="c3">y<div class="inline c1">position:absolute</div></span>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ legend { border: 1px solid; }
|
|||
.before::before { content:"::before"; }
|
||||
.nb legend.static { border: 1px solid; }
|
||||
.nb legend { border-style:none; }
|
||||
.p0 legend { padding:0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -30,11 +29,11 @@ legend { border: 1px solid; }
|
|||
<fieldset class="test2 after"></fieldset>
|
||||
<fieldset class="test2"><legend class="static"></legend></fieldset>
|
||||
<fieldset class="test2"><legend class="static contents"></legend></fieldset>
|
||||
<fieldset class="test2"><legend class="static" style="padding:0"></legend></fieldset>
|
||||
<fieldset class="test2 p0"></fieldset>
|
||||
<fieldset class="test3 p0"></fieldset>
|
||||
<fieldset class="test2 p0"><legend class="static"></legend></fieldset>
|
||||
<fieldset class="test3 p0"><legend class="static"></legend></fieldset>
|
||||
<fieldset class="test2"><legend class="static"></legend></fieldset>
|
||||
<fieldset class="test2"></fieldset>
|
||||
<fieldset class="test3"></fieldset>
|
||||
<fieldset class="test2"><legend class="static"></legend></fieldset>
|
||||
<fieldset class="test3"><legend class="static"></legend></fieldset>
|
||||
<script>
|
||||
document.body.offsetHeight;
|
||||
var tests = document.querySelectorAll('.test');
|
||||
|
|
|
|||
43
layout/reftests/forms/legend/legend-padding-1-ref.html
Normal file
43
layout/reftests/forms/legend/legend-padding-1-ref.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference for bug 1483499</title>
|
||||
<style>
|
||||
legend, .legendRef {
|
||||
/* Here in the reference case, we explicitly specify padding, and we also
|
||||
use a custom-styled div as the reference case for any legend element
|
||||
that is not directly snapped into a fieldset border. */
|
||||
background: yellow;
|
||||
border: 1px solid brown;
|
||||
padding: 0px 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Test: legend default styling shouldn't be affected
|
||||
by presence of a display:contents wrapper: -->
|
||||
<fieldset>
|
||||
<legend>DisplayContentsWrapper</legend>
|
||||
</fieldset>
|
||||
<br>
|
||||
|
||||
<!-- Test: legend should get the same 2px of inline-axis padding, even
|
||||
if it's not inside of a fieldset at all. -->
|
||||
<div class="legendRef">JustALegend</div>
|
||||
<br>
|
||||
|
||||
<div class="legendRef">
|
||||
<div class="legendRef">NestedLegend</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<fieldset>
|
||||
<legend>
|
||||
<div class="legendRef">
|
||||
<div class="legendRef">NestedLegendInFieldset</div>
|
||||
</div>
|
||||
</legend>
|
||||
</fieldset>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
42
layout/reftests/forms/legend/legend-padding-1.html
Normal file
42
layout/reftests/forms/legend/legend-padding-1.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for bug 1483499</title>
|
||||
<style>
|
||||
legend {
|
||||
background: yellow;
|
||||
border: 1px solid brown;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Test: legend default styling shouldn't be affected
|
||||
by presence of a display:contents wrapper: -->
|
||||
<fieldset>
|
||||
<div style="display: contents">
|
||||
<legend>DisplayContentsWrapper</legend>
|
||||
</div>
|
||||
</fieldset>
|
||||
<br>
|
||||
|
||||
<!-- Test: legend should get the same 2px of inline-axis padding, even
|
||||
if it's not inside of a fieldset at all. -->
|
||||
<legend>JustALegend</legend>
|
||||
<br>
|
||||
|
||||
<!-- ...and if it's nested, each nesting level will add 2px of padding. -->
|
||||
<legend>
|
||||
<legend>NestedLegend</legend>
|
||||
</legend>
|
||||
<br>
|
||||
|
||||
<fieldset>
|
||||
<legend>
|
||||
<legend>
|
||||
<legend>NestedLegendInFieldset</legend>
|
||||
</legend>
|
||||
</legend>
|
||||
</fieldset>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
44
layout/reftests/forms/legend/legend-padding-2-ref.html
Normal file
44
layout/reftests/forms/legend/legend-padding-2-ref.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference for bug 1483499</title>
|
||||
<style>
|
||||
html { writing-mode: vertical-rl }
|
||||
legend, .legendRef {
|
||||
/* Here in the reference case, we explicitly specify padding, and we also
|
||||
use a custom-styled div as the reference case for any legend element
|
||||
that is not directly snapped into a fieldset border. */
|
||||
background: yellow;
|
||||
border: 1px solid brown;
|
||||
padding: 2px 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Test: legend default styling shouldn't be affected
|
||||
by presence of a display:contents wrapper: -->
|
||||
<fieldset>
|
||||
<legend>DisplayContentsWrapper</legend>
|
||||
</fieldset>
|
||||
<br>
|
||||
|
||||
<!-- Test: legend should get the same 2px of inline-axis padding, even
|
||||
if it's not inside of a fieldset at all. -->
|
||||
<div class="legendRef">JustALegend</div>
|
||||
<br>
|
||||
|
||||
<div class="legendRef">
|
||||
<div class="legendRef">NestedLegend</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<fieldset>
|
||||
<legend>
|
||||
<div class="legendRef">
|
||||
<div class="legendRef">NestedLegendInFieldset</div>
|
||||
</div>
|
||||
</legend>
|
||||
</fieldset>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
43
layout/reftests/forms/legend/legend-padding-2.html
Normal file
43
layout/reftests/forms/legend/legend-padding-2.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for bug 1483499</title>
|
||||
<style>
|
||||
html { writing-mode: vertical-rl }
|
||||
legend {
|
||||
background: yellow;
|
||||
border: 1px solid brown;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Test: legend default styling shouldn't be affected
|
||||
by presence of a display:contents wrapper: -->
|
||||
<fieldset>
|
||||
<div style="display: contents">
|
||||
<legend>DisplayContentsWrapper</legend>
|
||||
</div>
|
||||
</fieldset>
|
||||
<br>
|
||||
|
||||
<!-- Test: legend should get the same 2px of inline-axis padding, even
|
||||
if it's not inside of a fieldset at all. -->
|
||||
<legend>JustALegend</legend>
|
||||
<br>
|
||||
|
||||
<!-- ...and if it's nested, each nesting level will add 2px of padding. -->
|
||||
<legend>
|
||||
<legend>NestedLegend</legend>
|
||||
</legend>
|
||||
<br>
|
||||
|
||||
<fieldset>
|
||||
<legend>
|
||||
<legend>
|
||||
<legend>NestedLegendInFieldset</legend>
|
||||
</legend>
|
||||
</legend>
|
||||
</fieldset>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<title>Testcase for bug 740743</title>
|
||||
<title>Reference case for bug 740743</title>
|
||||
<style type="text/css">
|
||||
|
||||
html,body {
|
||||
|
|
@ -9,8 +9,9 @@
|
|||
|
||||
fieldset { padding: 2px; }
|
||||
legend { padding: 0; }
|
||||
span { background: lime; display: block;}
|
||||
legend > span {
|
||||
span {
|
||||
background: lime;
|
||||
display: block;
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
== legend.html legend-ref.html
|
||||
== legend-padding-1.html legend-padding-1-ref.html
|
||||
== legend-padding-2.html legend-padding-2-ref.html
|
||||
fuzzy-if(Android,0-255,0-41) random-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) == 1273433.html 1273433-ref.html # Bug 1392106
|
||||
fails == 1339287.html 1339287-ref.html # bug 1383868
|
||||
|
|
|
|||
|
|
@ -56,13 +56,13 @@
|
|||
/* miscellaneous form elements */
|
||||
|
||||
fieldset > legend {
|
||||
padding-inline-start: 2px;
|
||||
padding-inline-end: 2px;
|
||||
inline-size: -moz-fit-content;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
padding-inline-start: 2px;
|
||||
padding-inline-end: 2px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,3 @@
|
|||
[legend.html]
|
||||
[in-body: paddingRight]
|
||||
expected: FAIL
|
||||
|
||||
[in-body: paddingLeft]
|
||||
expected: FAIL
|
||||
|
||||
[in-fieldset-second-child: width]
|
||||
expected: FAIL
|
||||
|
||||
[in-fieldset-descendant: paddingRight]
|
||||
expected: FAIL
|
||||
|
||||
[in-fieldset-descendant: paddingLeft]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@
|
|||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<title>CSS Test Reference</title>
|
||||
<fieldset style="color: green">P<legend style="padding: 0">legend</legend>ASS</fieldset>
|
||||
<fieldset style="color: green">P<legend>legend</legend>ASS</fieldset>
|
||||
|
|
|
|||
Loading…
Reference in a new issue