diff options
| author | Andreas Kling <kling@serenityos.org> | 2020-06-12 18:09:40 +0200 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2020-06-12 18:47:18 +0200 |
| commit | c91981eba825155521dfeadc9aec3961d3590b23 (patch) | |
| tree | c5af521442934b414747d2dfed55d5b3ab6a430d | |
| parent | 21b1f1653d0e50b71d60f2b8bb9d1a7ea4e7b788 (diff) | |
| download | serenity-c91981eba825155521dfeadc9aec3961d3590b23.zip | |
LibWeb: Handle negative values when collapsing vertical margins
In the presence of negative margins, we subtract the largest negative
margin from max(0, largest positive margin).
| -rw-r--r-- | Base/home/anon/www/margin-collapse-2.html | 23 | ||||
| -rw-r--r-- | Base/home/anon/www/welcome.html | 1 | ||||
| -rw-r--r-- | Libraries/LibWeb/Layout/LayoutBlock.cpp | 9 |
3 files changed, 32 insertions, 1 deletions
diff --git a/Base/home/anon/www/margin-collapse-2.html b/Base/home/anon/www/margin-collapse-2.html new file mode 100644 index 0000000000..f1d92ded30 --- /dev/null +++ b/Base/home/anon/www/margin-collapse-2.html @@ -0,0 +1,23 @@ +<style> +#foo { + border: 1px solid red; + margin-bottom: 25px; + width: 100px; + height: 100px; +} +#bar { + border: 1px solid green; + margin-bottom: 25px; + width: 100px; + height: 100px; +} +#baz { + border: 1px solid blue; + width: 100px; + margin-top: -20px; + height: 100px; +} +</style> +<div id=foo>foo</div> +<div id=bar>bar</div> +<div id=baz>baz</div> diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html index ed0c2e14b1..42e2e6865f 100644 --- a/Base/home/anon/www/welcome.html +++ b/Base/home/anon/www/welcome.html @@ -28,6 +28,7 @@ span#ua { <p>Your user agent is: <b><span id="ua"></span></b></p> <p>Some small test pages:</p> <ul> + <li><a href="margin-collapse-2.html">margin collapsing 2</a></li> <li><a href="margin-collapse-1.html">margin collapsing 1</a></li> <li><a href="position-absolute-from-edges.html">position: absolute, offset from edges</a></li> <li><a href="iframe.html">iframe</a></li> diff --git a/Libraries/LibWeb/Layout/LayoutBlock.cpp b/Libraries/LibWeb/Layout/LayoutBlock.cpp index 114a4df77d..abcd63da9e 100644 --- a/Libraries/LibWeb/Layout/LayoutBlock.cpp +++ b/Libraries/LibWeb/Layout/LayoutBlock.cpp @@ -481,7 +481,14 @@ void LayoutBlock::compute_position() // Collapse top margin with bottom margin of previous sibling if necessary float previous_sibling_margin_bottom = previous_sibling_style.margin().bottom.to_px(*relevant_sibling); float my_margin_top = box_model().margin().top.to_px(*this); - if (previous_sibling_margin_bottom > my_margin_top) { + + if (my_margin_top < 0 || previous_sibling_margin_bottom < 0) { + // Negative margins present. + float largest_negative_margin = -min(my_margin_top, previous_sibling_margin_bottom); + float largest_positive_margin = (my_margin_top < 0 && previous_sibling_margin_bottom < 0) ? 0 : max(my_margin_top, previous_sibling_margin_bottom); + float final_margin = largest_positive_margin - largest_negative_margin; + position_y += final_margin - my_margin_top; + } else if (previous_sibling_margin_bottom > my_margin_top) { // Sibling's margin is larger than mine, adjust so we use sibling's. position_y += previous_sibling_margin_bottom - my_margin_top; } |