<!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.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');
shouldBeGreaterThanOrEqual('spans[spans.length - 1].offsetLeft', "400");
}
</script>
</head>
<body>
<div id="container">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
</div>