<!DOCTYPE html>
<html>
<head>
<style>
div {
    text-align: justify;
}

.inlineBlock {
    display: inline-block;
}

span {
    display: block;
}

div:after {
    content: '';
    display: inline-block;
    width: 100%;
}

</style>
<script src="../../resources/js-test-pre.js"></script>
<script>
description('This test ensures that we properly reattach collapsed whitespace when sibling style changes require. Test passes if the spans below are justified across the page.');
onload = function() {
    spans = document.getElementsByTagName("span");
    for (var i = spans.length - 1; i >= 0; i--)
        spans[i].classList.add('inlineBlock');
    var container = document.getElementById('container');
    shouldBeGreaterThanOrEqual('spans[spans.length - 1].offsetLeft', "container.offsetWidth * 2 / 3");
    container.style.display = 'none';
}
</script>
</head>
<body>
<div id="container">
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
</div>
</body>
</html>