mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-02-26 04:09:50 +00:00
0636b4dae1
Always use an ancestor scroll clip of all direct children, or the original scroll clip if the children don't share the same scroll clip tree. Unfortunately this requires another pass over the stacking context display list. Also, fix clips, scroll clips and creation order of blend items: If a clipped mix-blend-mode item contains absolute / fixed positioned items, those items should not be clipped, same for blend container items. When a transform item contains blend modes, create the blend container inside the transform. Don't do tree comparisons on scroll clips from different scroll clip trees. If the inner scroll clip is nullptr, because it was cleared, it will look like it's the ancestor of the outer non-nullptr scroll clip. These changes don't look very related, but it was very hard to get tests passing with only some of the changes and not the others, and after having spent two weeks on this patch I'm not thrilled about going back and checking exactly which change was necessary to fix which test failure. MozReview-Commit-ID: IKGciUBrdNa --HG-- extra : rebase_source : e570f16ecedd80cba16051f0e1ac66764bc95815 extra : histedit_source : fcfbcbc254aaf93594d9d80c117d6ec945805993
44 lines
731 B
HTML
44 lines
731 B
HTML
<!DOCTYPE html>
|
|
<html lang="en"
|
|
reftest-async-scroll
|
|
reftest-displayport-x="0" reftest-displayport-y="0"
|
|
reftest-displayport-w="800" reftest-displayport-h="2000"
|
|
reftest-async-scroll-x="0" reftest-async-scroll-y="1200">
|
|
<meta charset="utf-8">
|
|
<title>Scrolled blend mode</title>
|
|
|
|
<style>
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 100px;
|
|
height: 4000px;
|
|
background: white;
|
|
}
|
|
|
|
#outer {
|
|
height: 4000px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#inner {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
#inner-contents {
|
|
border: 1px solid black;
|
|
box-sizing: border-box;
|
|
width: 50px;
|
|
height: 50px;
|
|
mix-blend-mode: multiply;
|
|
margin-top: 1400px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="outer">
|
|
<div id="inner">
|
|
<div id="inner-contents"></div>
|
|
</div>
|
|
</div>
|