mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
layout: Disallow margins from collapsing through blocks with clearance
per CSS 2.1 § 8.3.1. Fixes the test failure in #10458.
This commit is contained in:
Patrick Walton
parent
e32455f7b8
commit
a3fd226341
37 changed files with 223 additions and 94 deletions
|
|
@ -51,4 +51,4 @@
|
|||
<div class="class1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
[Flexible-order.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[adjacent-floats-001.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
4
tests/wpt/metadata-css/css21_dev/html4/bidi-010b.htm.ini
Normal file
4
tests/wpt/metadata-css/css21_dev/html4/bidi-010b.htm.ini
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
[bidi-010b.htm]
|
||||
type: reftest
|
||||
disabled: intermittent failure on reference, starting from PR #10458
|
||||
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[border-right-color-175.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[c414-flt-fit-002.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[c414-flt-fit-003.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[c414-flt-fit-004.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[c414-flt-fit-005.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[c414-flt-fit-006.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[clear-002.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[clear-float-004.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[clear-float-005.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[clear-float-006.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[clear-float-007.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[clear-float-008.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[clear-float-009.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[float-006.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[float-applies-to-009.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[float-applies-to-012.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[float-non-replaced-height-001.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[floats-003.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[floats-004.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[floats-123.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[floats-141.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[floats-144.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
[floats-145.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
disabled: depends on unspecified line-height behavior, see PR #10458
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
[floats-146.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[position-absolute-007.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1571,6 +1571,30 @@
|
|||
"url": "/_mozilla/css/floated_table_with_margin_a.html"
|
||||
}
|
||||
],
|
||||
"css/floats_margin_collapse_a.html": [
|
||||
{
|
||||
"path": "css/floats_margin_collapse_a.html",
|
||||
"references": [
|
||||
[
|
||||
"/_mozilla/css/floats_margin_collapse_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
"url": "/_mozilla/css/floats_margin_collapse_a.html"
|
||||
}
|
||||
],
|
||||
"css/floats_margin_collapse_with_clearance_a.html": [
|
||||
{
|
||||
"path": "css/floats_margin_collapse_with_clearance_a.html",
|
||||
"references": [
|
||||
[
|
||||
"/_mozilla/css/floats_margin_collapse_with_clearance_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
"url": "/_mozilla/css/floats_margin_collapse_with_clearance_a.html"
|
||||
}
|
||||
],
|
||||
"css/focus_selector.html": [
|
||||
{
|
||||
"path": "css/focus_selector.html",
|
||||
|
|
@ -8161,6 +8185,30 @@
|
|||
"url": "/_mozilla/css/floated_table_with_margin_a.html"
|
||||
}
|
||||
],
|
||||
"css/floats_margin_collapse_a.html": [
|
||||
{
|
||||
"path": "css/floats_margin_collapse_a.html",
|
||||
"references": [
|
||||
[
|
||||
"/_mozilla/css/floats_margin_collapse_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
"url": "/_mozilla/css/floats_margin_collapse_a.html"
|
||||
}
|
||||
],
|
||||
"css/floats_margin_collapse_with_clearance_a.html": [
|
||||
{
|
||||
"path": "css/floats_margin_collapse_with_clearance_a.html",
|
||||
"references": [
|
||||
[
|
||||
"/_mozilla/css/floats_margin_collapse_with_clearance_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
"url": "/_mozilla/css/floats_margin_collapse_with_clearance_a.html"
|
||||
}
|
||||
],
|
||||
"css/focus_selector.html": [
|
||||
{
|
||||
"path": "css/focus_selector.html",
|
||||
|
|
|
|||
42
tests/wpt/mozilla/tests/css/floats_margin_collapse_a.html
Normal file
42
tests/wpt/mozilla/tests/css/floats_margin_collapse_a.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="match" href="floats_margin_collapse_ref.html">
|
||||
<!--
|
||||
From https://github.com/servo/servo/pull/10458:
|
||||
|
||||
https://drafts.csswg.org/css2/visuren.html#float-rules
|
||||
|
||||
A floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
|
||||
|
||||
#a is not "in the flow" since it’s a float, which makes #b the first in-flow child of <body>, which makes the top margins of <body> and #b "adjoining" (even if the former is zero) which makes them collapse.
|
||||
|
||||
So the quoted rule applies and there’s an hypothetical block around #a. Since that blocks has no in-flow content, margins collapse through it.
|
||||
|
||||
Then I believe this rule applies:
|
||||
|
||||
https://drafts.csswg.org/css2/box.html#collapsed-through
|
||||
|
||||
If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.
|
||||
|
||||
The top border edge of <body> is below its top margin, which is collapsed with that of #b.
|
||||
-->
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
div {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
#a {
|
||||
float: left;
|
||||
background: green;
|
||||
}
|
||||
#b {
|
||||
background: blue;
|
||||
margin-top: 32px;
|
||||
}
|
||||
</style>
|
||||
<div id=a></div>
|
||||
<div id=b></div>
|
||||
|
||||
19
tests/wpt/mozilla/tests/css/floats_margin_collapse_ref.html
Normal file
19
tests/wpt/mozilla/tests/css/floats_margin_collapse_ref.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
div {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
#a {
|
||||
top: 32px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div id=a></div>
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<link rel="match" href="floats_margin_collapse_with_clearance_ref.html">
|
||||
<!--
|
||||
From https://github.com/servo/servo/pull/10458:
|
||||
|
||||
https://drafts.csswg.org/css2/visuren.html#float-rules
|
||||
|
||||
A floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
|
||||
|
||||
#a is not "in the flow" since it’s a float, which makes #b the first in-flow child of <body>, which makes the top margins of <body> and #b "adjoining" (even if the former is zero) which makes them collapse.
|
||||
|
||||
So the quoted rule applies and there’s an hypothetical block around #a. Since that blocks has no in-flow content, margins collapse through it.
|
||||
|
||||
Then I believe this rule applies:
|
||||
|
||||
https://drafts.csswg.org/css2/box.html#collapsed-through
|
||||
|
||||
If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.
|
||||
|
||||
The top border edge of <body> is below its top margin, which is collapsed with that of #b.
|
||||
-->
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
div {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
#a {
|
||||
float: left;
|
||||
background: green;
|
||||
}
|
||||
#b {
|
||||
background: blue;
|
||||
margin-top: 32px;
|
||||
clear: left;
|
||||
}
|
||||
</style>
|
||||
<div id=a></div>
|
||||
<div id=b></div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
div {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
#a {
|
||||
background: green;
|
||||
top: 0;
|
||||
}
|
||||
#b {
|
||||
background: blue;
|
||||
top: 32px;
|
||||
}
|
||||
</style>
|
||||
<div id=a></div>
|
||||
<div id=b></div>
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue