mirror of
https://github.com/servo/servo.git
synced 2025-08-26 15:48:22 +01:00
Handle inline margins when avoiding floats (#30072)
This commit is contained in:
Oriol Brufau
GitHub
parent
5cfec2fbdf
commit
8dceb8e412
17 changed files with 317 additions and 76 deletions
|
|
@ -0,0 +1,2 @@
|
|||
[floats-wrap-bfc-with-margin-008.tentative.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[floats-wrap-bfc-with-margin-009.tentative.html]
|
||||
expected: FAIL
|
||||
|
|
@ -61729,6 +61729,58 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"floats-wrap-bfc-with-margin-006.tentative.html": [
|
||||
"fa337713259eab84315012ee3a1f598014fa0cb8",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/CSS2/reference/ref-filled-green-100px-square.xht",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"floats-wrap-bfc-with-margin-007.tentative.html": [
|
||||
"552b3bc3dacd6b0ae9d8f1caae1ecde902efbdf1",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/CSS2/reference/ref-filled-green-100px-square.xht",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"floats-wrap-bfc-with-margin-008.tentative.html": [
|
||||
"34c0ee86113e9b818f2014fb49412b580a2b47ce",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/CSS2/reference/ref-filled-green-100px-square.xht",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"floats-wrap-bfc-with-margin-009.tentative.html": [
|
||||
"61db4b1fa3eaa9ebe5fa210d00c24d4cdaf24dec",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/CSS2/reference/ref-filled-green-100px-square.xht",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"floats-wrap-top-below-bfc-001l.xht": [
|
||||
"17bec33eb143ce14f13c439e83f433c3fef74fdd",
|
||||
[
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[floats-wrap-bfc-with-margin-004.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[floats-wrap-bfc-with-margin-005.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[new-fc-beside-float-with-margin-rtl.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[new-fc-beside-float-with-margin.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[zero-width-floats-positioning.tentative.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[flex-direction-modify.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[block_formatting_context_margin_inout_a.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[block_formatting_context_negative_margins_a.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/#floats">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="The BFC roots fit next to the floats, so they shouldn't be moved below.">
|
||||
<style>
|
||||
.wrapper {
|
||||
width: 50px;
|
||||
margin-left: 50px;
|
||||
background: red;
|
||||
}
|
||||
.float {
|
||||
float: right;
|
||||
clear: right;
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
}
|
||||
.bfc {
|
||||
overflow: hidden;
|
||||
height: 50px;
|
||||
margin-left: -50px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="wrapper">
|
||||
<div class="float"></div>
|
||||
<div class="bfc"></div>
|
||||
<div class="float"></div>
|
||||
<div class="bfc" style="width: 75px"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/#floats">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="The BFC roots fit next to the floats, so they shouldn't be moved below.">
|
||||
<style>
|
||||
.wrapper {
|
||||
width: 50px;
|
||||
background: red;
|
||||
}
|
||||
.float {
|
||||
float: left;
|
||||
clear: left;
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
}
|
||||
.bfc {
|
||||
overflow: hidden;
|
||||
height: 50px;
|
||||
margin-right: -50px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="wrapper">
|
||||
<div class="float"></div>
|
||||
<div class="bfc"></div>
|
||||
<div class="float"></div>
|
||||
<div class="bfc" style="width: 75px"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/#floats">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="The BFC root doesn't fit next to the float, so it should be moved below.">
|
||||
<style>
|
||||
.wrapper {
|
||||
width: 100px;
|
||||
background: green;
|
||||
}
|
||||
.float {
|
||||
float: right;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
}
|
||||
.bfc {
|
||||
overflow: hidden;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="wrapper">
|
||||
<div class="float"></div>
|
||||
<div style="margin-right: 50px">
|
||||
<div class="bfc"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/#floats">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="The BFC root doesn't fit next to the float, so it should be moved below.">
|
||||
<style>
|
||||
.wrapper {
|
||||
width: 100px;
|
||||
background: green;
|
||||
}
|
||||
.float {
|
||||
float: left;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
}
|
||||
.bfc {
|
||||
overflow: hidden;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
margin-left: -50px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="wrapper">
|
||||
<div class="float"></div>
|
||||
<div style="margin-left: 50px">
|
||||
<div class="bfc"></div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue