corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1498873 - Pass the right frame to PushAbsoluteContainingBlock to determine whether we're a fixed-pos containing block. r=bzbarsky

Browse Source 
When we're creating a scrollframe with let's say, display: flex or grid, the
containing block is the grid container itself, but the transformed frame is the
scroll frame.

This is the only caller that (incorrectly) passes the same frame to
PushAbsoluteContainingBlock.

Our painting code deals with it, mostly, because it starts from the placeholder
to paint fixed items, and it hits the scrollframe, but it gets confused
sometimes causing the issue described here.

I'll find a way to add a crashtest for this, and maybe a reftest, though this
works in non-WR.

We should probably add a few more assertions to the frame constructor...

Differential Revision: https://phabricator.services.mozilla.com/D8724
This commit is contained in:
Emilio Cobos Álvarez
2018-10-17 20:22:38 +00:00
parent cd1ef4a529
commit a6bbfc28c2
3 changed files with 114 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
layout/base/nsCSSFrameConstructor.cpp
View File

@@ -3927,9 +3927,8 @@ nsCSSFrameConstructor::ConstructFrameFromItemInternal(FrameConstructionItem& aIt
maybeAbsoluteContainingBlockDisplay->IsFixedPosContainingBlock(
maybeAbsoluteContainingBlockStyleFrame)) &&
!nsSVGUtils::IsInSVGTextSubtree(maybeAbsoluteContainingBlockStyleFrame)) {
nsContainerFrame* cf = static_cast<nsContainerFrame*>(
maybeAbsoluteContainingBlock);
aState.PushAbsoluteContainingBlock(cf, cf, absoluteSaveState);
auto* cf = static_cast<nsContainerFrame*>(maybeAbsoluteContainingBlock);
aState.PushAbsoluteContainingBlock(cf, maybeAbsoluteContainingBlockStyleFrame, absoluteSaveState);
}
}

47
testing/web-platform/tests/css/css-transforms/dynamic-fixed-pos-cb-change-ref.html Normal file
View File

@@ -0,0 +1,47 @@
<!doctype html>
<title>CSS Test Reference</title>
<meta charset="utf-8">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<style>
html,
body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background-color: #222;
}
body {
display: flex;
transform: scale(0.9);
}
#fixed {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
background: black;
}
#popup {
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: 0;
z-index: 2;
background: green;
transform: scale( 1.1111 );
}
body, #popup {
transform-origin: 50% 50%;
}
</style>
<div id="popup"></div>
<div id="fixed"></div>

65
testing/web-platform/tests/css/css-transforms/dynamic-fixed-pos-cb-change.html Normal file
View File

@@ -0,0 +1,65 @@
<!doctype html>
<html class="reftest-wait">
<title>CSS Test: Checks that dynamic changes to whether we're a fixed-pos containing block are handled correctly</title>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#containing-block-for-all-descendants">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1498873">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="match" href="dynamic-fixed-pos-cb-change-ref.html">
<style>
html,
body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background-color: #222;
}
body {
display: flex;
}
#fixed {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
background: black;
}
#popup {
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: 0;
z-index: 2;
background: red;
transform: scale( 1.1111 );
}
body, #popup {
transform-origin: 50% 50%;
}
</style>
<div id="popup">
<!-- Seeing this box change color should not move me or change my size. -->
</div>
<div id="fixed"></div>
<script>
onload = function() {
requestAnimationFrame(() => {
document.body.style.transform = "scale(0.9)";
requestAnimationFrame(() => {
popup.style.backgroundColor = "green";
requestAnimationFrame(() => {
document.documentElement.className = "";
});
});
});
}
</script>