mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-21 01:05:45 +00:00
732182f0c9
This patch accomodates for the unfortunate fact that elements with
"table-layout:fixed" have a max-content size of nscoord_MAX (infinity,
effectively), which turns out to be an easy source of integer overflow during
flex layout.
Before this patch, a flex container with "table-layout:fixed" in several flex
items could end up triggering integer-overflow & making the wrong judgement on
its arithmetic to determine...
- whether a given flex item will fit on an existing flex line.
- whether we've got positive free space and need to grow our items, or have
negative free space and need to shrink our items.
This patch makes two changes to fix this issue.
(1) This patch makes us use CheckedInt when summing up flex item hypothetical
sizes, which prevents integer overflow from flipping the sign of our line's
total length.
(2) This patch makes us *directly* track the space reserved for flex item
margin/border/padding within a flex line. Previously, we tracked this
implicitly as the difference between two other quantities that we stored;
but with the other changes in this patch, those two other quantities can
*both* trigger overflow and get clamped, which would make us lose track of
how much space to reserve for margin/border/padding. So now we simply
track that space-to-reserve directly.
MozReview-Commit-ID: 9izhOnlS4F1
--HG--
extra : rebase_source : 185f2409dcb2f9c5bd0a2466a8e2233d7db3250a
54 lines
1.0 KiB
HTML
54 lines
1.0 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/
|
|
-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>
|
|
CSS Test: Testing that tables with "table-layout:fixed" can shrink
|
|
from their default flex base size to fit their flex container.
|
|
</title>
|
|
<style>
|
|
.container {
|
|
display: flex;
|
|
width: 300px;
|
|
border: 1px solid black;
|
|
margin-bottom: 5px;
|
|
}
|
|
.forceMaxContent > * {
|
|
width: -moz-max-content;
|
|
width: max-content;
|
|
}
|
|
.container > * {
|
|
margin: 5px;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
height: 30px;
|
|
table-layout: fixed;
|
|
background: lightgray;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div>
|
|
<table><td></td></table>
|
|
</div>
|
|
<div>
|
|
<table><td></td></table>
|
|
</div>
|
|
</div>
|
|
<div class="container forceMaxContent">
|
|
<div>
|
|
<table><td></td></table>
|
|
</div>
|
|
<div>
|
|
<table><td></td></table>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|