block-with-inline-replaced-child-following-text.html

<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script>
function getComputedStyleForElement(element, cssPropertyName)
{
    if (window.getComputedStyle) {
        return window.getComputedStyle(element, '').getPropertyValue(cssPropertyName);
    }
    return null;
}
function getWidth(id)
{
    return getComputedStyleForElement(document.getElementById(id), 'width');
}
function test()
{
    description("For the following, the width of the containing inline-block box should be 94px [goverened by the min-width of the text (64px) plus the padding (30px)].");
    
    shouldBe("getWidth('div1')", "'94px'");
    shouldBe("getWidth('div2')", "'94px'");
    shouldBe("getWidth('div3')", "'94px'");

    document.body.removeChild(document.getElementById('wrapper'));
    
    isSuccessfullyParsed();
}
</script>
<style>
.test {
    display: inline-block;
    border: 1px solid black;
    font-family: Ahem;
}
div > span {
	padding-left: 30px;
}
img {
    width: 50px;
    height: 50px;
}
</style>
</head>
<body onload="test()">
<div>Test for Bugzilla bug:<a href="https://bugs.webkit.org/show_bug.cgi?id=99442"> 99442</a> Regression r130057: Improper preferred width calculation when an inline replaced object, wrapped in an inline flow, follows some text.</div>
<br>
<div id="wrapper" style="width: 50px;">
<div class="test" id="div1">
<span>This is some text</span><span><img src="resources/50x50.gif"/></span>
</div>
<div class="test" id="div2">
<span>This is some text</span><span><img src="resources/50x50.gif"/></span><span>This is some text</span>
</div>
<div class="test" id="div3">
<span>This is some text</span><span><img src="resources/50x50.gif"/></span><span><img src="resources/50x50.gif"/></span><span><img src="resources/50x50.gif"/></span>
</div>
</div>
<p id="description"></p>
<div id="console"></div>
</body>
</html>
chromium/third_party/blink/web_tests/fast/block/block-with-inline-replaced-child-following-text.html
