block-parent-with-zero-width-child.html

<head>
<title>Test case for bug https://bugs.webkit.org/show_bug.cgi?id=50135</title>
<script src="../../resources/js-test.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>
chromium/third_party/blink/web_tests/fast/block/block-parent-with-zero-width-child.html
