<!DOCTYPE html>
<html>
<head>
<style>
dialog {
  margin: 0;
  padding: 0;
  border: 0;
}

dialog::backdrop, embed {
  position: absolute;
}

dialog.top {
  top: 150px;
  left: 150px;
  height: 200px;
  width: 200px;
  background: green;
}

dialog.top::backdrop {
  top: 140px;
  left: 140px;
  height: 220px;
  width: 220px;
  background: yellow;
}

dialog.bottom embed {
  top: 10px;
  left: 10px;
}

dialog.bottom {
  top: 120px;
  left: 120px;
  height: 260px;
  width: 260px;
  background: green;
}

dialog.bottom::backdrop {
  top: 110px;
  left: 110px;
  height: 280px;
  width: 280px;
  background: yellow;
}

#bottom-embed {
  top: 100px;
  left: 100px;
}
</style>
<body>
<p>This tests that plugins in the top layer are occluded only by higher-stacked
top layer elements.  The test passes if you see six boxes stacked on each other,
in order (from top to bottom): green, yellow, blue, green, yellow, blue.
</p>

<embed id="bottom-embed"
       src="../../LayoutTests/plugins/resources/simple_blank.swf"
       type="application/x-shockwave-flash"
       width="300" height="300" loop="false">

<dialog class="bottom">
    <embed src="../../LayoutTests/plugins/resources/simple_blank.swf"
           type="application/x-shockwave-flash"
           width="240" height="240" loop="false">
</dialog>

<dialog class="top"></dialog>
<script>
function dialogIsEnabled() {
  return !!document.createElement('dialog').showModal;
}

function test() {
  if (!dialogIsEnabled()) {
    document.body.innerText = 'ERROR: <dialog> is not enabled. This test requires <dialog>.';
    return;
  }

  dialogBottom = document.querySelector('dialog.bottom');
  dialogBottom.showModal();
  dialogTop = document.querySelector('dialog.top');
  dialogTop.showModal();
}

test();
</script>
</body>
</html>