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

Auto merge of #8140 - mrobinson:canvas, r=pcwalton

Browse source 
Integrate Canvas into the DisplayList

Canvas is currently given a layer at the stacking context level.
Instead it's DisplayItem should be given a layer directly. This fixes
painting order issues where canvases are painted on top of other
positioned content that is later in tree order. It always simplifies
the code a bit.

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/8140)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2015-10-23 17:17:12 -05:00
commit 22a6884a67
5 changed files with 83 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -43,5 +43,30 @@
<div class="gray box" style="position: relative; left: 20px; top: -30px;"> </div>
</div>
<!-- The canvas should be painted in tree order since it is not positioned and
the following div is. -->
<div class="test grayest box">
<canvas class="box" id="canvas1" style="display: block; padding-left: 10px; padding-top: 10px;" width="50" height="50"></canvas>
<div class="gray box" style="position: relative; left: 20px; top: -40px;"> </div>
</div>
<!-- The canvas should be painted in tree order since both it and the inner div are
not positioned elements. -->
<div class="test grayest box">
<canvas class="box" id="canvas2" style="display: block; position: relative; left: 10px; top: 10px;" width="50" height="50"></canvas>
<div class="gray box" style="position: relative; left: 20px; top: -30px;"> </div>
</div>
<script>
function paintCanvas(id) {
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "rgb(80, 80, 80)";
context.fillRect(0, 0, 100, 100);
}
paintCanvas("canvas1");
paintCanvas("canvas2");
</script>
</body>
</html>

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

@ -34,5 +34,15 @@
<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>
<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>