backface-visibility-transformed.html

<!DOCTYPE html>
<html>
<head>
  <style type="text/css" media="screen">
    .container {
        -webkit-perspective: 1000;
    }
    .frame {
        -webkit-transform-style: preserve-3d;
        transform: translateX(200px) rotateY(85deg);
    }
    .front {
        position:absolute;
        background-color: red;
    }

    .back {
        position:absolute;
        background-color: green;
        transform: rotateY(180deg);
    }
    div {
      height: 200px;
      width: 200px;
    }
    
    .backfaceHidden {
      backface-visibility: hidden;
    }
  </style>
</head>
<body>
  <!-- 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>
      </div>
  </div>
</body>
</html>

chromium/third_party/blink/web_tests/compositing/backface-visibility-transformed.html