Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/compositing/backface-visibility/backface-visibility-hierarchical-transform.html 

<!DOCTYPE html>
<html>
<head>
  <style type="text/css" media="screen">
    div {
      height: 100px;
      width: 100px;
    }

    .red {
        background-color: red;
    }

    .green {
        background-color: green;
    }

    .test1location {
        position: absolute;
        top: 10px;
        left: 10px;
    }

    .test2location {
        position: absolute;
        top: 120px;
        left: 10px;
    }

    .test3location {
        position: absolute;
        top: 230px;
        left: 10px;
    }

    .preserves3d {
      -webkit-transform-style: preserve-3d;
    }

    .flat {
      -webkit-transform-style: flat;
    }

    .rotated180 {
      transform: rotateY(180deg);
    }

    .backfaceVisible {
      backface-visibility: visible;
    }

    .backfaceHidden {
      backface-visibility: hidden;
    }
  </style>
</head>
<body>

  <!-- In the pixel results, two green squares should be visible. This tests whether
       backface culling is accounting for the hierarchy of transforms.
       http://dev.w3.org/csswg/css3-transforms/#backface-visibility-property
    -->


  <!-- Case 1: the inner-most div remains 3d, and inherits a 180-degree rotation from
       higher up the hierarchy. The inner-most div should remain visible.
       -->
  <div class="test1location red">
  </div>
  <div class="test1location">
    <div class="preserves3d">
      <div class="preserves3d rotated180">
        <div class="preserves3d">
          <div class="backfaceVisible green">
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- Case 2: same as Case 1, except now the inner-most div has backface-visibility: hidden. -->
  <div class="test2location green">
  </div>
  <div class="test2location">
    <div class="preserves3d">
      <div class="preserves3d rotated180">
        <div class="preserves3d">
          <div class="backfaceHidden red">
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- Case 3: the inner-most div flattens to its container div, with its front face
       showing. Then higher in the hierarchy, that flattened container gets rotated so its
       back face is showing. However, because it was already flattened, the inner-most div
       should also remain visible, because the flattened layer is implicitly backface visible. -->
  <div class="test3location red">
  </div>
  <div class="test3location">
    <div class="preserves3d">
      <div class="flat rotated180">
        <div class="preserves3d">
          <div class="flat">
            <div class="backfaceHidden green">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>