<!DOCTYPE html>
<html>
<head>
<style>
.green-box {
    background-color: green;
    height: 50px;
    width: 50px;
    border: none;
    padding: 0;
    margin: 0;
}

#left-div {
    position: absolute;
    top: 100px;
    left: 100px;
}

#middle-dialog {
    position: relative;
    top: 100px;
    left: 150px;
}

#right-dialog {
    position: relative;
    top: 100px;
    left: 200px;
}
</style>
<script src="../../resources/check-layout.js"></script>
</head>
<body onload="checkLayout('dialog')">
<p>Bug <a href="http://webkit.org/b/106538">106538</a>: Top layer fails for inline elements
<p>This tests that position 'relative' computes to 'absolute' in the top layer. The test passes if you see a single green box.</p>
<div id="left-div" class="green-box"></div>
<dialog id="middle-dialog" class="green-box" data-offset-x="150" data-offset-y="100"></dialog>
<dialog id="right-dialog" class="green-box" data-offset-x="200" data-offset-y="100"></dialog>
<script>
document.getElementById('middle-dialog').showModal();
var rightDialog = document.getElementById('right-dialog');
rightDialog.showModal();
rightDialog.style.position = 'absolute';
</script>
</body>
</html>