transform-in-empty-container.html | Explore in Territory

<!DOCTYPE html>
<html><head>
<title>Transform in an empty container test.</title>
<style type="text/css">
  .composited {
    will-change: transform;
  }
  .abs {
    position: absolute;
  }

  .empty-transform {
    transform: matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    width: 0px;
    height: 100px;
  }

  .green {
    background-color: green;
  }
  .box {
    width: 50px;
    height: 50px;
  }
</style>
</head>

<body>

  <!--
     This div has a height, and is transformed to flip things inside it along the Y axis.
     While it does not have a width, overflow contents need to be transformed based on its height still.
    -->
  <div class="abs empty-transform">
    <div class="composited green box"></div>
  </div>

</body>
</html>

chromium/third_party/blink/web_tests/compositing/overflow/transform-in-empty-container.html