mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-23 18:26:15 +00:00
b4b0f124bf
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.
43 lines
878 B
HTML
43 lines
878 B
HTML
<!DOCTYPE html>
|
|
<html><head>
|
|
<style>
|
|
.first {
|
|
transform: translateZ(10px);
|
|
background-color: blue;
|
|
top: 0px;
|
|
}
|
|
.second {
|
|
background-color: green;
|
|
top: 40px;
|
|
}
|
|
.third {
|
|
top: 80px;
|
|
}
|
|
.preserve {
|
|
transform-style: preserve-3d;
|
|
}
|
|
.leaf {
|
|
width: 100px;
|
|
height: 100px;
|
|
position:absolute;
|
|
}
|
|
</style>
|
|
</head><body>
|
|
|
|
<div class="preserve">
|
|
<div style="opacity:0.5; transform:translateX(0px)">
|
|
<div class="leaf first"></div>
|
|
<div class="leaf second"></div>
|
|
<canvas class="leaf third" 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>
|
|
|