<!DOCTYPE html>
<body>
<p>Test if child blocks are correctly laid out when padding/border of the box-sizing:border-box parent is updated.</p>

<div id="target1" style="width:100px; box-sizing:border-box; border:0 solid;">
<div data-expected-width="50">The quick brown fox jumps over the lazy dog.</div>
</div>
<div id="target2" style="width:100px; box-sizing:border-box;">
<div data-expected-width="50">The quick brown fox jumps over the lazy dog.</div>
</div>
<div id="target3" style="width:100px; box-sizing:border-box;">
<div data-expected-width="50">The quick brown fox jumps over the lazy dog.</div>
</div>
<script src="../../resources/check-layout.js"></script>
<script>
document.body.offsetLeft;
document.getElementById('target1').style.borderLeftWidth = '50px';
document.getElementById('target2').style.paddingLeft = '50px';
document.getElementById('target3').setAttribute('style', 'width:50px; box-sizing:content-box; border-left:50px solid;');
checkLayout('#target1');
checkLayout('#target2');
checkLayout('#target3');
</script>
</body>
