| <!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> |
