| <!DOCTYPE html> |
| <style> |
| .child { float:left; width:100%; height:100px; } |
| </style> |
| <p>There should be a blue square below.</p> |
| <div style="position:relative; width:100px;"> |
| <div style="float:left; width:50px; height:100px; background:blue;"></div> |
| <hr id="hr" style="width:50px; border:none; background:blue;"> |
| </div> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| // The HTML parser auto-terminates HR elements, so we need to add a child |
| // like this: |
| var child = document.createElement("div"); |
| child.className = "child"; |
| document.getElementById("hr").appendChild(child); |
| |
| test(() => { |
| var hr = document.getElementById("hr"); |
| assert_equals(hr.offsetLeft, 50); |
| assert_equals(hr.offsetHeight, 100); |
| }, "HR establishes a block formatting context"); |
| </script> |
