Bug 976364: Make 'perspective' create a stacking context. r=mattwoodrow

While it seems a little silly since 'perspective' doesn't require
atomicity (rather, it adds an additional transformation to any 3-D
descendants, which already require atomicity), the spec requires it, and
it matches WebKit.
This commit is contained in:
L. David Baron 2014-02-26 13:36:36 -08:00
parent 9c9aa42fb5
commit b38b58369f
6 changed files with 75 additions and 0 deletions

View File

@ -2180,6 +2180,9 @@ nsIFrame::BuildDisplayListForChild(nsDisplayListBuilder* aBuilder,
const nsStylePosition* pos = child->StylePosition(); const nsStylePosition* pos = child->StylePosition();
bool isVisuallyAtomic = child->HasOpacity() bool isVisuallyAtomic = child->HasOpacity()
|| child->IsTransformed() || child->IsTransformed()
// strictly speaking, 'perspective' doesn't require visual atomicity,
// but the spec says it acts like the rest of these
|| disp->mChildPerspective.GetUnit() == eStyleUnit_Coord
|| disp->mMixBlendMode != NS_STYLE_BLEND_NORMAL || disp->mMixBlendMode != NS_STYLE_BLEND_NORMAL
|| nsSVGIntegrationUtils::UsingEffectsForFrame(child); || nsSVGIntegrationUtils::UsingEffectsForFrame(child);

View File

@ -1,2 +1,4 @@
== 480053-1.html 480053-1-ref.html == 480053-1.html 480053-1-ref.html
== z-index-1.html z-index-1-ref.html == z-index-1.html z-index-1-ref.html
!= stacking-context-yes.html stacking-context-no.html
== stacking-context-perspective.html stacking-context-yes.html

View File

@ -0,0 +1,26 @@
.contain, .maybesc {
width: 100px;
height: 100px;
}
.contain, .maybesc {
position: relative;
}
.inner1, .inner3, .intruder {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.inner1 {
left: 5px; right: 30px;
background: rgba(0, 255, 255, 0.5); /* aqua */
z-index: 1;
}
.inner3 {
left: 30px; right: 5px;
background: rgba(255, 255, 0, 0.5); /* yellow */
z-index: 3;
}
.intruder {
top: 20px; bottom: 20px;
background: rgba(255, 0, 255, 0.5); /* fuchsia */
z-index: 2;
}

View File

@ -0,0 +1,11 @@
<!DOCTYPE HTML>
<meta charset="UTF-8">
<title>Reference for things that do not create a stacking context</title>
<link rel="stylesheet" href="stacking-context-common.css">
<div class="contain">
<div class="maybesc">
<div class="inner1"></div>
<div class="inner3"></div>
</div>
<div class="intruder"></div>
</div>

View File

@ -0,0 +1,17 @@
<!DOCTYPE HTML>
<meta charset="UTF-8">
<title>Does 'perspective' create a stacking context?</title>
<link rel="stylesheet" href="stacking-context-common.css">
<style>
.perspective {
-webkit-perspective: 200px;
perspective: 200px;
}
</style>
<div class="contain">
<div class="maybesc perspective">
<div class="inner1"></div>
<div class="inner3"></div>
</div>
<div class="intruder"></div>
</div>

View File

@ -0,0 +1,16 @@
<!DOCTYPE HTML>
<meta charset="UTF-8">
<title>Reference for things that create a stacking context</title>
<link rel="stylesheet" href="stacking-context-common.css">
<style>
.sc {
z-index: 0;
}
</style>
<div class="contain">
<div class="maybesc sc">
<div class="inner1"></div>
<div class="inner3"></div>
</div>
<div class="intruder"></div>
</div>