gecko-dev/layout/reftests/flexbox/flexbox-table-flex-items-5-ref.html

46 lines
854 B
HTML
Raw Normal View History

Bug 1461446: Make flex layout explicitly handle integer overflow when summing up flex item hypothetical sizes. r=mats 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
2018-05-26 02:46:29 +00:00
<!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 Reference Case
</title>
<style>
.container {
display: flex;
width: 300px;
border: 1px solid black;
margin-bottom: 5px;
}
.container > * {
margin: 5px;
background: lightgray;
flex: 1 400px; /* Bigger than flex container; should cooperatively shrink to fit. */
height: 30px;
}
</style>
</head>
<body>
<div class="container">
<div>
<table><td></td></table>
</div>
<div>
<table><td></td></table>
</div>
</div>
<div class="container">
<div>
<table><td></td></table>
</div>
<div>
<table><td></td></table>
</div>
</div>
</body>
</html>