layout: Ensure abs-pos elements establish block formatting contexts

This commit is contained in:
Paul Rouget 2019-11-14 12:14:55 +01:00
parent df9065afb6
commit 0ea9f69ca8
4 changed files with 71 additions and 0 deletions

View file

@ -1682,6 +1682,13 @@ impl BlockFlow {
/// Determines the type of formatting context this is. See the definition of
/// `FormattingContextType`.
pub fn formatting_context_type(&self) -> FormattingContextType {
if self
.base
.flags
.contains(FlowFlags::IS_ABSOLUTELY_POSITIONED)
{
return FormattingContextType::Other;
}
if self.is_inline_flex_item() || self.is_block_flex_item() {
return FormattingContextType::Other;
}

View file

@ -43,6 +43,18 @@
{}
]
],
"css/absolute_block_format_ctx.html": [
[
"css/absolute_block_format_ctx.html",
[
[
"/_mozilla/css/absolute_block_format_ctx_ref.html",
"=="
]
],
{}
]
],
"css/absolute_clipping_of_own_contents.html": [
[
"css/absolute_clipping_of_own_contents.html",
@ -7692,6 +7704,9 @@
"css/abs_rel_explicit_height_ref.html": [
[]
],
"css/absolute_block_format_ctx_ref.html": [
[]
],
"css/absolute_clipping_of_own_contents_ref.html": [
[]
],
@ -13461,6 +13476,14 @@
"4e9833c29529e58690f5f26e546e0d66a22ca369",
"support"
],
"css/absolute_block_format_ctx.html": [
"e7540c1cfe8eaab06e9c3b87214263d2c3abec34",
"reftest"
],
"css/absolute_block_format_ctx_ref.html": [
"42420061724718702f611abd2ff4c61774fc4b86",
"support"
],
"css/absolute_clipping_of_own_contents.html": [
"19919ff89c72d3425d188c49c27916a9eb885359",
"reftest"

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<link rel=match href=absolute_block_format_ctx_ref.html>
<style>
div {
display: inline;
position: absolute;
}
span {
float: left;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div>
<span style="background:red"></span>
<span style="background:blue"></span>
</div>
</body>
</html>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<style>
div {
float: left;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div style="background:red"></div>
<div style="background:blue"></div>
</body>
</html>