<!DOCTYPE html>
<html>
<head>
<style>
dialog div {
  position: absolute;
  top: 150px;
  left: 150px;
  height: 150px;
  width: 150px;
  background: pink;
}

dialog {
  top: 150px;
  left: 150px;
  margin: 0;
  height: 200px;
  width: 200px;
  padding: 0;
  border: 0;
  background: green;
}

dialog::backdrop {
  top: 125px;
  left: 125px;
  height: 250px;
  width: 250px;
  position: absolute;
  background: yellow;
}

embed {
  position: absolute;
  top: 100px;
  left: 100px;
}
</style>
<body>
<p>This tests that plugins do not appear on top of top layer elements. The test
passes if you see four boxes, whose stacking order is (from top to bottom):
pink, green, yellow, blue. The pink box is positioned in a way to make it clear
that it is on top of everything else.</p>
<embed src="../../LayoutTests/plugins/resources/simple_blank.swf"
       type="application/x-shockwave-flash"
       width="300" height="300" loop="false">
<dialog>
    <div></div>
</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;
  }

  dialog = document.querySelector('dialog');
  dialog.showModal();
}

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