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,
|
// 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.
|
// 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) {
|
if (outer_cross_size < line.cross_size) {
|
||||||
CSSPixels remainder = line.cross_size - outer_cross_size;
|
CSSPixels remainder = line.cross_size - outer_cross_size;
|
||||||
if (item.margins.cross_before_is_auto && item.margins.cross_after_is_auto) {
|
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