sky/tests/layout/position-absolute-pixels.sky

<import src="../resources/run-after-display.sky" />

<style>
  block, p, flex {
    width: 100px;
    height: 100px;
    margin-bottom: 50px;
    /* Make it a positioning root. */
    transform: translate3d(0, 0, 0);
  }
  block { background: pink; }
  p {
    background: orange;
  }
  flex {
    background: salmon;
    display: flex;
    flex-direction: row;
  }
  spacer {
    height: 30px;
    width: 30px;
    border: 5px solid purple;
    background: papayawhip;
  }
  absolute {
    position: absolute;
    width: 20px;
    height: 20px;
    background: green;
  }
</style>
<block>
  <spacer />
  <absolute />
  <spacer />
</block>

<p>
  <spacer />
  <absolute />
  <spacer />
</p>

<flex>
  <spacer />
  <absolute />
  <spacer />
</flex>

<script>
import "dart:sky";
import "dart:sky.internals" as internals;

void main() {
  window.addEventListener("load", (_) {
    runAfterDisplay(() {
      internals.notifyTestComplete("");
    });
  });
}
</script>