blob: 142d23f58d7ebda69fc12d30cc718baadd16a7b6 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 100px;
}
#testCase1 {
position: absolute;
top: 10px;
left: 10px;
}
#testCase2 {
position: absolute;
top: 120px;
left: 10px;
}
#testCase3 {
position: absolute;
top: 230px;
left: 10px;
}
#testCase4 {
position: absolute;
top: 340px;
left: 10px;
}
</style>
</head>
<body>
<!-- This test checks various configurations of backface visibility when there is no 3d
rendering context (i.e. no layer preserves-3d). -->
<!-- No back faces are visible, so we should see the lime div inside the blue narrow div
inside the green div. -->
<div id="testCase1" style="background-color: green">
<div style="background-color: blue; -webkit-backface-visibility: hidden; -webkit-transform: rotateY(80deg)">
<div style="background-color: lime; -webkit-backface-visibility: hidden; -webkit-transform: rotateX(80deg)">
</div>
</div>
</div>
<!-- The lime div has its back facing, so we should see only the blue strip inside the
green div. -->
<div id="testCase2" style="background-color: green">
<div style="background-color: blue; -webkit-backface-visibility: hidden; -webkit-transform: rotateY(80deg)">
<div style="background-color: lime; -webkit-backface-visibility: hidden; -webkit-transform: rotateX(100deg)">
</div>
</div>
</div>
<!-- The blue div should not be visible, but the lime div should be visible, because the
W3C spec says that without a 3d context that they should use their own local
transforms. -->
<div id="testCase3" style="background-color: green">
<div style="background-color: blue; -webkit-backface-visibility: hidden; -webkit-transform: rotateY(100deg)">
<div style="background-color: lime; -webkit-backface-visibility: hidden; -webkit-transform: rotateX(80deg)">
</div>
</div>
</div>
<!-- Only the green div should be visible. -->
<div id="testCase4" style="background-color: green">
<div style="background-color: blue; -webkit-backface-visibility: hidden; -webkit-transform: rotateY(100deg)">
<div style="background-color: lime; -webkit-backface-visibility: hidden; -webkit-transform: rotateX(100deg)">
</div>
</div>
</div>
<script>
if (window.testRunner) {
testRunner.dumpAsText(true); // This is only useful as a pixel test.
document.write("<span style='position:absolute; top:-5000px'>This test is only useful as a pixel test</span>");
}
</script>
</body>
</html>