84 lines
2.5 KiB
HTML
84 lines
2.5 KiB
HTML
<!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>
|