Bug 1472919 - Establish stacking context, containing block, independent formatting context for contain:layout.
MozReview-Commit-ID: H36HpePX29C
--- a/layout/generic/nsBlockFrame.cpp
+++ b/layout/generic/nsBlockFrame.cpp
@@ -7087,22 +7087,23 @@ nsBlockFrame::Init(nsIContent* aCo
}
// A display:flow-root box establishes a block formatting context.
// If a box has a different block flow direction than its containing block:
// ...
// If the box is a block container, then it establishes a new block
// formatting context.
// (http://dev.w3.org/csswg/css-writing-modes/#block-flow)
- // If the box has contain: paint (or contain: strict), then it should also
- // establish a formatting context.
+ // If the box has contain: paint or contain:layout (or contain:strict),
+ // then it should also establish a formatting context.
if (StyleDisplay()->mDisplay == mozilla::StyleDisplay::FlowRoot ||
(GetParent() && StyleVisibility()->mWritingMode !=
GetParent()->StyleVisibility()->mWritingMode) ||
- StyleDisplay()->IsContainPaint()) {
+ StyleDisplay()->IsContainPaint() ||
+ StyleDisplay()->IsContainLayout()) {
AddStateBits(NS_BLOCK_FORMATTING_CONTEXT_STATE_BITS);
}
if ((GetStateBits() &
(NS_FRAME_FONT_INFLATION_CONTAINER | NS_BLOCK_FLOAT_MGR)) ==
(NS_FRAME_FONT_INFLATION_CONTAINER | NS_BLOCK_FLOAT_MGR)) {
AddStateBits(NS_FRAME_FONT_INFLATION_FLOW_ROOT);
}
--- a/layout/generic/nsFrame.cpp
+++ b/layout/generic/nsFrame.cpp
@@ -10970,16 +10970,17 @@ nsIFrame::IsStackingContext(EffectSet* a
const nsStyleDisplay* aStyleDisplay,
const nsStylePosition* aStylePosition,
const nsStyleEffects* aStyleEffects,
bool aIsPositioned)
{
return HasOpacity(aEffectSet) ||
IsTransformed(aStyleDisplay) ||
aStyleDisplay->IsContainPaint() ||
+ aStyleDisplay->IsContainLayout() ||
// strictly speaking, 'perspective' doesn't require visual atomicity,
// but the spec says it acts like the rest of these
ChildrenHavePerspective(aStyleDisplay) ||
aStyleEffects->mMixBlendMode != NS_STYLE_BLEND_NORMAL ||
nsSVGIntegrationUtils::UsingEffectsForFrame(this) ||
(aIsPositioned && (aStyleDisplay->IsPositionForcingStackingContext() ||
aStylePosition->mZIndex.GetUnit() == eStyleUnit_Integer)) ||
(aStyleDisplay->mWillChangeBitField & NS_STYLE_WILL_CHANGE_STACKING_CONTEXT) ||
copy from layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001.html
copy to layout/reftests/w3c-css/submitted/contain/contain-layout-containing-block-absolute-001.html
--- a/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001.html
+++ b/layout/reftests/w3c-css/submitted/contain/contain-layout-containing-block-absolute-001.html
@@ -1,19 +1,20 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
- <title>CSS Test: 'contain: paint' element should contain absolute position elements.</title>
+ <title>CSS Test: 'contain: layout' element should contain absolute position elements.</title>
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
- <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+ <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+ <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
<link rel="match" href="contain-paint-containing-block-absolute-001-ref.html">
<style>
#a {
- contain: paint;
+ contain: layout;
width: 100px;
height: 100px;
background: red;
margin: 50px;
}
#b {
position: absolute;
top: 0;
copy from layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001.html
copy to layout/reftests/w3c-css/submitted/contain/contain-layout-containing-block-fixed-001.html
--- a/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001.html
+++ b/layout/reftests/w3c-css/submitted/contain/contain-layout-containing-block-fixed-001.html
@@ -1,19 +1,20 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
- <title>CSS Test: 'contain: paint' element should contain fixed position elements.</title>
+ <title>CSS Test: 'contain: layout' element should contain fixed position elements.</title>
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
- <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+ <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+ <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
<link rel="match" href="contain-paint-containing-block-fixed-001-ref.html">
<style>
#a {
- contain: paint;
+ contain: layout;
width: 100px;
height: 100px;
background: red;
margin: 50px;
}
#b {
position: fixed;
top: 0;
copy from layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-float-001.html
copy to layout/reftests/w3c-css/submitted/contain/contain-layout-formatting-context-float-001.html
--- a/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-float-001.html
+++ b/layout/reftests/w3c-css/submitted/contain/contain-layout-formatting-context-float-001.html
@@ -1,25 +1,26 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
- <title>CSS Test: 'contain: paint' should contain floats as a formatting context.</title>
+ <title>CSS Test: 'contain: layout' should contain floats as a formatting context.</title>
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
- <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+ <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+ <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-layout">
<link rel="match" href="contain-paint-formatting-context-float-001-ref.html">
<style>
#left {
float: left;
height: 50px;
width: 10px;
background: blue;
}
#a {
- contain: paint;
+ contain: layout;
background: red;
margin: 10px;
width: 50px;
height: 50px;
}
#b {
clear: left;
width: 50px;
copy from layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001-ref.html
copy to layout/reftests/w3c-css/submitted/contain/contain-layout-formatting-context-margin-001-ref.html
--- a/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001-ref.html
+++ b/layout/reftests/w3c-css/submitted/contain/contain-layout-formatting-context-margin-001-ref.html
@@ -1,30 +1,37 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Reftest Test</title>
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
<style>
#a {
background: blue;
margin: 10px;
width: 50px;
height: 50px;
}
#b {
width: 50px;
height: 40px;
background: green;
}
#b-padding {
height: 10px;
}
+ #c {
+ width: 50px;
+ height: 10px;
+ background: lightblue;
+ }
</style>
</head>
<body>
<div id="a">
<div id="b-padding"></div>
<div id="b"></div>
+ <div id="c"></div>
</div>
</body>
</html>
copy from layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001.html
copy to layout/reftests/w3c-css/submitted/contain/contain-layout-formatting-context-margin-001.html
--- a/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001.html
+++ b/layout/reftests/w3c-css/submitted/contain/contain-layout-formatting-context-margin-001.html
@@ -1,32 +1,33 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
- <title>CSS Test: 'contain: paint' with a vertical margin child. Margin collapse should not occur.</title>
+ <title>CSS Test: 'contain: layout' with a vertical margin child. Margin collapse should not occur, and neither should overflow clipping.</title>
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
- <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+ <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+ <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-layout">
<link rel="match" href="contain-paint-formatting-context-margin-001-ref.html">
<style>
#a {
- contain: paint;
+ contain:layout;
background: blue;
margin: 10px;
width: 50px;
height: 50px;
}
#b {
width: 50px;
height: 40px;
background: green;
margin-top: 10px;
}
#c {
- background: red;
+ background: lightblue;
width: 50px;
height: 10px;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
copy from layout/reftests/w3c-css/submitted/contain/contain-paint-ignored-cases-no-principal-box-001.html
copy to layout/reftests/w3c-css/submitted/contain/contain-layout-ignored-cases-no-principal-box-001.html
--- a/layout/reftests/w3c-css/submitted/contain/contain-paint-ignored-cases-no-principal-box-001.html
+++ b/layout/reftests/w3c-css/submitted/contain/contain-layout-ignored-cases-no-principal-box-001.html
@@ -1,33 +1,33 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
- <title>CSS Test: 'contain: paint' with 'display: contents'.</title>
+ <title>CSS Test: 'contain: layout' should not create a stacking context when no principle box is generated.</title>
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
- <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
+ <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+ <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
<link rel="match" href="contain-paint-ignored-cases-no-principal-box-001-ref.html">
- <meta name="assert" content="Contain:paint should have no effect when no principle box is generated.">
<style>
div {
position: relative;
width: 100px;
}
#div1,
#div3 {
background-color: #cfc;
height: 100px;
}
#div1 {
z-index: 5;
}
#div2 {
display: contents;
- contain: paint;
+ contain: layout;
background-color: #fdd;
height: 100px;
top: -20px;
}
#div2_1 {
background-color: #ffc;
z-index: 6;
top: -10px;
copy from layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001-ref.html
copy to layout/reftests/w3c-css/submitted/contain/contain-layout-ignored-cases-no-principal-box-002-ref.html
--- a/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001-ref.html
+++ b/layout/reftests/w3c-css/submitted/contain/contain-layout-ignored-cases-no-principal-box-002-ref.html
@@ -1,19 +1,33 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
<style>
#a {
+ display: contents;
width: 100px;
height: 100px;
background: green;
margin: 50px;
}
+ #b {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background: green;
+ }
</style>
</head>
<body>
- <div id="a"></div>
+ <div id="a">
+ <div>
+ <div id="b"></div>
+ </div>
+ </div>
</body>
-</html>
+</html>
\ No newline at end of file
copy from layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001.html
copy to layout/reftests/w3c-css/submitted/contain/contain-layout-ignored-cases-no-principal-box-002.html
--- a/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001.html
+++ b/layout/reftests/w3c-css/submitted/contain/contain-layout-ignored-cases-no-principal-box-002.html
@@ -1,19 +1,21 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
- <title>CSS Test: 'contain: paint' element should contain absolute position elements.</title>
- <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
- <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
- <link rel="match" href="contain-paint-containing-block-absolute-001-ref.html">
+ <title>CSS Test: 'contain: layout' element should not contain absolute/fixed position elements when no principal box is generated.</title>
+ <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
+ <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+ <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+ <link rel="match" href="contain-layout-ignored-cases-no-principal-box-002-ref.html">
<style>
#a {
- contain: paint;
+ contain: layout;
+ display: contents;
width: 100px;
height: 100px;
background: red;
margin: 50px;
}
#b {
position: absolute;
top: 0;
copy from layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001-ref.html
copy to layout/reftests/w3c-css/submitted/contain/contain-layout-ignored-cases-no-principal-box-003-ref.html
--- a/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001-ref.html
+++ b/layout/reftests/w3c-css/submitted/contain/contain-layout-ignored-cases-no-principal-box-003-ref.html
@@ -1,19 +1,33 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
<style>
#a {
- width: 100px;
- height: 100px;
- background: green;
- margin: 50px;
+ display: contents;
+ width: 100px;
+ height: 100px;
+ background: red;
+ margin: 50px;
+ }
+ #b {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background: green;
}
</style>
</head>
<body>
- <div id="a"></div>
+ <div id="a">
+ <div>
+ <div id="b"></div>
+ </div>
+ </div>
</body>
</html>
copy from layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001.html
copy to layout/reftests/w3c-css/submitted/contain/contain-layout-ignored-cases-no-principal-box-003.html
--- a/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001.html
+++ b/layout/reftests/w3c-css/submitted/contain/contain-layout-ignored-cases-no-principal-box-003.html
@@ -1,31 +1,33 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
- <title>CSS Test: 'contain: paint' element should contain fixed position elements.</title>
- <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
- <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
- <link rel="match" href="contain-paint-containing-block-fixed-001-ref.html">
+ <title>CSS Test: 'contain: layout' element should not contain absolute/fixed position elements when no principal box is generated.</title>
+ <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
+ <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+ <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+ <link rel="match" href="contain-layout-ignored-cases-no-principal-box-003-ref.html">
<style>
#a {
- contain: paint;
- width: 100px;
- height: 100px;
- background: red;
- margin: 50px;
+ contain: layout;
+ display: contents;
+ width: 100px;
+ height: 100px;
+ background: red;
+ margin: 50px;
}
#b {
- position: fixed;
- top: 0;
- left: 0;
- width: 100px;
- height: 100px;
- background: green;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background: green;
}
</style>
</head>
<body>
<div id="a">
<div>
<div id="b"></div>
</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-layout-stacking-context-001.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: 'contain: layout' with stacking contents. Z-index is defined only for siblings and children.</title>
+ <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
+ <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+ <link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
+ <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
+ <link rel="match" href="contain-paint-stacking-context-001-ref.html">
+ <style>
+ div {
+ position: relative;
+ width: 100px;
+ }
+ #div1,
+ #div3 {
+ background-color: #cfc;
+ }
+ #div1 {
+ z-index: 5;
+ }
+ #div2 {
+ contain: layout;
+ background-color: #fdd;
+ height: 100px;
+ top: -20px;
+ }
+ #div2_1 {
+ background-color: #ffc;
+ z-index: 6;
+ top: -10px;
+ }
+ #div2_2 {
+ z-index: 3;
+ position: absolute;
+ top: -15px;
+ width: 40px;
+ height: 100px;
+ background-color: #ddf;
+ }
+ #div3 {
+ z-index: 2;
+ top: -50px;
+ }
+ </style>
+</head>
+<body>
+ <div id="div1">
+ <br/><br/>
+ </div>
+
+ <div id="div2">
+ <div id="div2_1">
+ <br/><br/>
+ </div>
+
+ <div id="div2_2">
+ </div>
+ </div>
+
+ <div id="div3">
+ <br/><br/>
+ </div>
+</body>
+</html>
--- a/layout/reftests/w3c-css/submitted/contain/reftest.list
+++ b/layout/reftests/w3c-css/submitted/contain/reftest.list
@@ -25,8 +25,16 @@ fuzzy-if(webrender&&winWidget,3,2) == co
== contain-size-multicol-001.html contain-size-multicol-001-ref.html
== contain-size-fieldset-001.html contain-size-fieldset-001-ref.html
== contain-size-fieldset-002.html contain-size-fieldset-002-ref.html
== contain-size-multicol-002.html contain-size-multicol-002-ref.html
== contain-size-multicol-003.html contain-size-multicol-003-ref.html
== contain-layout-overflow-001.html contain-layout-overflow-001-ref.html
fails == contain-layout-overflow-002.html contain-layout-overflow-002-ref.html # bug 1481951
== contain-size-table-caption-001.html contain-size-table-caption-001-ref.html
+== contain-layout-stacking-context-001.html contain-paint-stacking-context-001-ref.html
+== contain-layout-formatting-context-float-001.html contain-paint-formatting-context-float-001-ref.html
+== contain-layout-formatting-context-margin-001.html contain-layout-formatting-context-margin-001-ref.html
+== contain-layout-containing-block-fixed-001.html contain-paint-containing-block-fixed-001-ref.html
+== contain-layout-containing-block-absolute-001.html contain-paint-containing-block-absolute-001-ref.html
+== contain-layout-ignored-cases-no-principal-box-001.html contain-paint-ignored-cases-no-principal-box-001-ref.html
+== contain-layout-ignored-cases-no-principal-box-002.html contain-layout-ignored-cases-no-principal-box-002-ref.html
+== contain-layout-ignored-cases-no-principal-box-003.html contain-layout-ignored-cases-no-principal-box-003-ref.html
--- a/layout/style/nsStyleStructInlines.h
+++ b/layout/style/nsStyleStructInlines.h
@@ -166,19 +166,17 @@ nsStyleDisplay::IsFixedPosContainingBloc
}
return aStyle.ThreadsafeStyleEffects()->HasFilters();
}
bool
nsStyleDisplay::IsFixedPosContainingBlockForContainLayoutAndPaintSupportingFrames() const
{
- // FIXME (bug 1472919): 'contain: layout' should also establish a
- // containing block for fixed and absolute positioned elements.
- return IsContainPaint();
+ return IsContainPaint() || IsContainLayout();
}
bool
nsStyleDisplay::IsFixedPosContainingBlockForTransformSupportingFrames() const
{
// NOTE: Any CSS properties that influence the output of this function
// should have the FIXPOS_CB flag set on them.
return HasTransformStyle() || HasPerspectiveStyle();
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-contain/contain-layout-006.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[contain-layout-006.html]
- expected: FAIL
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-contain/contain-layout-007.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[contain-layout-007.html]
- expected: FAIL
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-contain/contain-layout-008.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[contain-layout-008.html]
- expected: FAIL
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-contain/contain-layout-013.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[contain-layout-013.html]
- expected: FAIL
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-contain/contain-layout-014.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[contain-layout-014.html]
- expected: FAIL
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-contain/contain-layout-016.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[contain-layout-016.html]
- expected: FAIL
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-contain/contain-layout-ifc-022.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[contain-layout-ifc-022.html]
- expected: FAIL
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-contain/contain-layout-size-003.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[contain-layout-size-003.html]
- expected: FAIL
