blob: c5a7096c1a06088afbcc871c6a359fd27d48fdc6 [file] [log] [blame]
<head>
<title>Test case for bug https://bugs.webkit.org/show_bug.cgi?id=50135</title>
<script src="../../resources/js-test-pre.js"></script>
<style>
.wrapper {
height: 70px;
width: 400px;
border: 1px solid red;
position: relative;
padding-top: 50px;
margin-bottom: 10px;
}
.wrapper p {
position: absolute;
margin: 0;
}
.wrapper p.topright {
top: 0;
right: 0;
}
.wrapper p.bottomright {
bottom: 0;
right: 0;
}
.wrapper p span {
display: block;
width: 0;
height: 50px;
padding-left: 50px;
overflow: hidden;
background: yellow;
}
</style>
<script>
function startTest(){
shouldBe('document.getElementById("p_topRight").getClientRects()[0].width ', '50');
shouldBe('document.getElementById("p_botRight").getClientRects()[0].width ', '50');
isSuccessfullyParsed();
// Cleanup
var divList = document.getElementsByClassName('wrapper');
while(divList.length){
var node = divList.item(divList.length - 1);
document.body.removeChild(node);
}
}
</script>
</head>
<body onload="startTest();">
<script>
description("This tests if the parent block has the correct size when the child element has fixed width as zero.")
</script>
<div class="wrapper">
The yellow cube should be positioned top-right
<p id="p_topRight" class="topright">
<span>This text is hidden</span>
</p>
</div>
<div class="wrapper">
The yellow cube should be positioned bottom-right
<p id="p_botRight" class="bottomright">
<span>This text is hidden</span>
</p>
</div>
</body>