Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 12:40:06 +01:00
Code Issues Projects Releases Packages Wiki Activity

Integrate iframes into the display list

Browse source 
Instead of always promoting iframes to StackingContexts, integrate them
into the display list. This prevents stacking bugs when
non-stacking-context elements should be drawn on top of iframes.

To accomplish this, we add another step to ordering layer creation,
where LayeredItems in the DisplayList are added to layers described by
the LayerInfo structures collected at the end of the DisplayList.
Unlayered items that follow these layered items are added to
synthesized layers.

Another result of this change is that iframe layers can be positioned
directly at the location of the iframe fragment, eliminating the need
for the SubpageLayerInfo struct entirely.

Iframes are the first type of content treated this way, but this change
opens up the possibility to properly order canvas and all other layered
content that does not create a stacking context.

Fixes #7566.
Fixes #7796.
This commit is contained in:
Martin Robinson 2015-10-09 17:08:35 -07:00
parent 90dd3cdc09
commit ac5525aeeb
13 changed files with 271 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

16
tests/wpt/mozilla/tests/css/stacked_layers.html
View file

@ -8,6 +8,7 @@
.gray { background: rgb(200, 200, 200); }
.grayer { background: rgb(80, 80, 80); }
.grayest { background: rgb(0, 0, 0); }
iframe { display: block; border: 0; }
</style>
</head>
<body>
@ -27,5 +28,20 @@
<div class="grayer box" style="margin-left: 10px; margin-top: 10px; opacity: 0.999; z-index: -1;"></div>
<div class="gray box" style="margin-left: 20px; margin-top: -40px; opacity: 0.999;"> </div>
</div>
<!-- The iframe should be painted in tree order since it is not positioned and
the following div is. -->
<div class="test grayest box">
<iframe class="box" style="margin-left: 10px; margin-top: 10px;" src="data:text/html;charset=utf-8;base64,PGh0bWw+PGJvZHkgc3R5bGU9ImJhY2tncm91bmQ6IHJnYig4MCwgODAsIDgwKTsiPjwvYm9keT48L2Rpdj4="></iframe>
<div class="gray box" style="position: relative; left: 20px; top: -40px;"> </div>
</div>
<!-- The iframe should be painted in tree order since both it and the inner div are
not positioned elements. -->
<div class="test grayest box">
<iframe class="box" style="position: relative; left: 10px; top: 10px;" src="data:text/html;charset=utf-8;base64,PGh0bWw+PGJvZHkgc3R5bGU9ImJhY2tncm91bmQ6IHJnYig4MCwgODAsIDgwKTsiPjwvYm9keT48L2Rpdj4="></iframe>
<div class="gray box" style="position: relative; left: 20px; top: -30px;"> </div>
</div>
</body>
</html>

10
tests/wpt/mozilla/tests/css/stacked_layers_ref.html
View file

@ -24,5 +24,15 @@
<div class="grayer box" style="margin-left: 10px; margin-top: 10px; position: absolute; opacity: 0.999;"></div>
<div class="gray box" style="margin-left: 20px; margin-top: 20px; position: relative; opacity: 0.999;"></div>
</div>
<div class="test grayest box">
<div class="grayer box" style="margin-left: 10px; margin-top: 10px;"></div>
<div class="gray box" style="margin-left: 20px; margin-top: -40px;"></div>
</div>
<div class="test grayest box">
<div class="grayer box" style="margin-left: 10px; margin-top: 10px;"></div>
<div class="gray box" style="margin-left: 20px; margin-top: -40px;"></div>
</div>
</body>
</html>