Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/compositing/backface-visibility/backface-visibility-non3d.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; backface-visibility: hidden; transform: rotateY(80deg)">
    <div style="background-color: lime; backface-visibility: hidden; 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; backface-visibility: hidden; transform: rotateY(80deg)">
    <div style="background-color: lime; backface-visibility: hidden; 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; backface-visibility: hidden; transform: rotateY(100deg)">
    <div style="background-color: lime; backface-visibility: hidden; 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; backface-visibility: hidden; transform: rotateY(100deg)">
    <div style="background-color: lime; backface-visibility: hidden; transform: rotateX(100deg)">
    </div>
  </div>
</div>

</body>
</html>