mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-25 17:25:08 +02:00
LibWeb: Include non-auto cross margins in auto-margin resolution
When resolving cross-axis auto margins on a flex item, the outer cross size calculation omitted all cross-axis margins. We now include non-auto margins as part of the outer cross size treating auto margins as zero.
This commit is contained in:
Tim Ledbetter
committed by
Andreas Kling
Andreas Kling
parent
2ed3868012
commit
30f8e7f80c
Notes:
github-actions[bot]
2026-04-25 12:47:13 +00:00
Author: https://github.com/tcl3 Commit: https://github.com/LadybirdBrowser/ladybird/commit/30f8e7f80ca Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/9050
@@ -2279,7 +2279,13 @@ void FlexFormattingContext::resolve_cross_axis_auto_margins()
|
||||
|
||||
// If its outer cross size (treating those auto margins as zero) is less than the cross size of its flex line,
|
||||
// distribute the difference in those sizes equally to the auto margins.
|
||||
auto outer_cross_size = item.cross_size.value() + item.padding.cross_before + item.padding.cross_after + item.borders.cross_before + item.borders.cross_after;
|
||||
// NB: Auto cross-axis margins are stored as 0, so including them here treats them as zero while keeping
|
||||
// non-auto cross-axis margins in the outer cross size.
|
||||
auto outer_cross_size = item.cross_size.value()
|
||||
+ item.padding.cross_before + item.padding.cross_after
|
||||
+ item.borders.cross_before + item.borders.cross_after
|
||||
+ item.margins.cross_before + item.margins.cross_after;
|
||||
|
||||
if (outer_cross_size < line.cross_size) {
|
||||
CSSPixels remainder = line.cross_size - outer_cross_size;
|
||||
if (item.margins.cross_before_is_auto && item.margins.cross_after_is_auto) {
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a variety of 'display: flex' examples
|
||||
with margin-top and/or margin-bottom set to 'auto' on flex items. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
margin-bottom: 2px;
|
||||
width: 100px;
|
||||
}
|
||||
div.fixedSize {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
div.gray { background: gray; }
|
||||
div.green { background: green; }
|
||||
div.pink { background: pink; }
|
||||
div.blue { background: blue; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- fixed-height flexbox, with items that have auto margins -->
|
||||
<div class="flexbox" style="height: 100px">
|
||||
<div class="fixedSize green" style="margin-top: 80px"/>
|
||||
<div class="fixedSize pink"/>
|
||||
<div class="fixedSize blue" style="margin-top: 40px"/>
|
||||
</div>
|
||||
<!-- fixed-height flexbox, with items that have auto & fixed margins -->
|
||||
<div class="flexbox" style="height: 100px">
|
||||
<div class="fixedSize green" style="margin-top: 70px"/>
|
||||
<div class="fixedSize pink" style="margin-top: 10px"/>
|
||||
</div>
|
||||
|
||||
<!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins,
|
||||
with other items that have auto margins -->
|
||||
<div class="flexbox" style="height: 50px">
|
||||
<div class="fixedSize green" style="margin-top: 30px"/>
|
||||
<div class="fixedSize pink"/>
|
||||
<div class="fixedSize blue" style="margin-top: 15px"/>
|
||||
<div class="gray" style="width: 10px; height: 30px; margin-top: 10px"/>
|
||||
</div>
|
||||
|
||||
<!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins,
|
||||
with other items that have auto & fixed margins -->
|
||||
<div class="flexbox" style="height: 50px">
|
||||
<div class="fixedSize green" style="margin-top: 20px"/>
|
||||
<div class="fixedSize pink" style="margin-top: 10px"/>
|
||||
<div class="gray" style="width: 10px; height: 30px; margin-top: 10px"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a variety of 'display: flex' examples
|
||||
with margin-top and/or margin-bottom set to 'auto' on flex items. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing vertical auto margins on flex items in a horizontal flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#auto-margins"/>
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-flexbox/flexbox-margin-auto-horiz-002-ref.xhtml"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
margin-bottom: 2px;
|
||||
width: 100px;
|
||||
}
|
||||
div.fixedSize {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
div.gray { background: gray; }
|
||||
div.green { background: green; }
|
||||
div.pink { background: pink; }
|
||||
div.blue { background: blue; }
|
||||
|
||||
div.autoTop { margin-top: auto; }
|
||||
div.autoBottom { margin-bottom: auto; }
|
||||
div.fixedTop { margin-top: 10px; }
|
||||
div.fixedBottom { margin-bottom: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- fixed-height flexbox, with items that have auto margins -->
|
||||
<div class="flexbox" style="height: 100px">
|
||||
<div class="fixedSize green autoTop"/>
|
||||
<div class="fixedSize pink autoBottom"/>
|
||||
<div class="fixedSize blue autoTop autoBottom"/>
|
||||
</div>
|
||||
<!-- fixed-height flexbox, with items that have auto & fixed margins -->
|
||||
<div class="flexbox" style="height: 100px">
|
||||
<div class="fixedSize green autoTop fixedBottom"/>
|
||||
<div class="fixedSize pink autoBottom fixedTop"/>
|
||||
</div>
|
||||
|
||||
<!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins,
|
||||
with other items that have auto margins -->
|
||||
<div class="flexbox">
|
||||
<div class="fixedSize green autoTop"/>
|
||||
<div class="fixedSize pink autoBottom"/>
|
||||
<div class="fixedSize blue autoTop autoBottom"/>
|
||||
<div class="fixedTop fixedBottom gray" style="width: 10px; height: 30px"/>
|
||||
</div>
|
||||
|
||||
<!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins,
|
||||
with other items that have auto & fixed margins -->
|
||||
<div class="flexbox">
|
||||
<div class="fixedSize green autoTop fixedBottom"/>
|
||||
<div class="fixedSize pink autoBottom fixedTop"/>
|
||||
<div class="fixedTop fixedBottom gray" style="width: 10px; height: 30px"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user