blob: 18e22de6f5485672f50939b7f20f477cab6d1b6e [file] [log] [blame]
<!DOCTYPE html>
<style type="text/css" media="screen">
.container {
-webkit-perspective: 1000;
.frame {
-webkit-transform-style: preserve-3d;
transform: translateX(200px) rotateY(85deg);
.front {
background-color: red;
.back {
background-color: green;
transform: rotateY(180deg);
div {
height: 200px;
width: 200px;
.backfaceHidden {
backface-visibility: hidden;
<!-- In the pixel results, the green side should be visible. -->
<div class="container">
<div class="frame">
<div class="backfaceHidden front"></div>
<div class="backfaceHidden back"></div>
if (window.testRunner) {
testRunner.dumpAsTextWithPixelResults(); // 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>");