25 lines
1.0 KiB
HTML
25 lines
1.0 KiB
HTML
<!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>
|