gecko-dev/layout/reftests/transform-3d/opacity-preserve3d-4-ref.html
Matt Woodrow b4b0f124bf Bug 1283827 - Flatten transform-style:preserve-3d when combined with opacity. r=dbaron
This matches the behaviour required by the latest editor's draft spec and matches what blink is planning on shipping soon.
It may not be an entirely web compatible change, but we expect only a small number of websites to be affected. See
the bug for more details.
2016-07-02 14:47:12 +02:00

39 lines
774 B
HTML

<!DOCTYPE html>
<html><head>
<style>
.first {
transform: translateZ(10px);
background-color: blue;
top: 0px;
}
.second {
background-color: green;
top: 40px;
}
.preserve {
transform-style: preserve-3d;
}
.leaf {
width: 100px;
height: 100px;
position:absolute;
}
</style>
</head><body>
<div class="preserve">
<div style="opacity:0.5">
<div class="leaf first"></div>
<canvas class="leaf second" width="100px" height="100px" id="canvas"></canvas>
</div>
</div>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 100);
</script>
</body>
</html>