sky/tests/lowlevel/layers.sky

<sky>

<import src="../resources/run-after-display.sky" as="runAfterDisplay" />
<style>
  sky {
    padding: 10px;
  }
  div {
    width: 50px;
    height: 50px;
    white-space: nowrap;
  }
</style>
Transforms
<div style="transform: translate3d(10px, 10px, 0); background-color: pink;">
  One
  <div style="transform: translate3d(10px, 10px, 0); background-color: salmon;">
    Two
    <div style="transform: translate3d(10px, 10px, 0); background-color: papayawhip;">
      Three
    </div>
  </div>
</div>

<div style="position: absolute; top: 250px;">
  Opacity
  <div style="opacity: 0.8; background-color: pink;">
    One
    <div style="opacity: 0.7; position: absolute; left: 10px; background-color: salmon;">
      Two
      <div style="opacity: 0.6; position: absolute; left: 20px; background-color: papayawhip;">
        Three
        <div style="opacity: 0; transform: translate3d(0, 10px, 0); background-color: papayawhip;">
          Clear
        </div>
      </div>
    </div>
  </div>
</div>


<div style="position: absolute; right: 50px;">
  <div style="background-color: red;">
    1
  </div>
  <div style="position: absolute; left: 40px; top: 40px; z-index: 2; background-color: pink;">
    4
  </div>
  <div style="position: absolute; left: 20px; top: 20px; z-index: 0; background-color: salmon;">
    2
  </div>
  <div style="position: absolute; left: 35px; top: 20px; z-index: 1; background-color: papayawhip;">
    3
  </div>
  <div style="background-color: green;">
    1
  </div>
  z-index
</div>

<div style="position: absolute; bottom: 50px;">
  Clip-path
  <div style="background-color: pink; -webkit-clip-path: circle(25px at 25px 25px);">
    <div style="background-color: salmon; -webkit-clip-path: circle(25px at 35px 35px);">
      <div style="background-color: papayawhip; -webkit-clip-path: circle(25px at 45px 45px);"></div>
    </div>
  </div>
</div>

<script>
runAfterDisplay(function() {
  internals.notifyTestComplete("");
});
</script>

</sky>