michael@0: /* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */ michael@0: /* vim: set ts=2 sw=2 sts=2 et: */ michael@0: michael@0: /* michael@0: * This Source Code is subject to the terms of the Mozilla Public License michael@0: * version 2.0 (the "License"). You can obtain a copy of the License at michael@0: * http://mozilla.org/MPL/2.0/. michael@0: */ michael@0: michael@0: /** michael@0: * For the purposes of this test, flex items are specified as a hash with a michael@0: * hash-entry for each CSS property that is to be set. In these per-property michael@0: * entries, the key is the property-name, and the value can be either of the michael@0: * following: michael@0: * (a) the property's specified value (which indicates that we don't need to michael@0: * bother checking the computed value of this particular property) michael@0: * ...OR... michael@0: * (b) an array with 2-3 entries... michael@0: * [specifiedValue, expectedComputedValue (, epsilon) ] michael@0: * ...which indicates that the property's computed value should be michael@0: * checked. The array's first entry (for the specified value) may be michael@0: * null; this means that no value should be explicitly specified for this michael@0: * property. The second entry is the property's expected computed michael@0: * value. The third (optional) entry is an epsilon value, which allows for michael@0: * fuzzy equality when testing the computed value. michael@0: * michael@0: * To allow these testcases to be re-used in both horizontal and vertical michael@0: * flex containers, we specify "width"/"min-width"/etc. using the aliases michael@0: * "_main-size", "_min-main-size", etc. The test code can map these michael@0: * placeholder names to their corresponding property-names using the maps michael@0: * defined below -- gRowPropertyMapping, gColumnPropertyMapping, etc. michael@0: * michael@0: * If the testcase needs to customize its flex container at all (e.g. by michael@0: * specifying a custom container-size), it can do so by including a hash michael@0: * called "container_properties", with propertyName:propertyValue mappings. michael@0: * (This hash can use aliased property-names like "_main-size" as well.) michael@0: */ michael@0: michael@0: // The standard main-size we'll use for our flex container when setting up michael@0: // the testcases defined below: michael@0: var gDefaultFlexContainerSize = "200px"; michael@0: michael@0: // Left-to-right versions of placeholder property-names used in michael@0: // testcases below: michael@0: var gRowPropertyMapping = michael@0: { michael@0: "_main-size": "width", michael@0: "_min-main-size": "min-width", michael@0: "_max-main-size": "max-width", michael@0: "_border-main-start-width": "border-left-width", michael@0: "_border-main-end-width": "border-right-width", michael@0: "_padding-main-start": "padding-left", michael@0: "_padding-main-end": "padding-right", michael@0: "_margin-main-start": "margin-left", michael@0: "_margin-main-end": "margin-right" michael@0: }; michael@0: michael@0: // Right-to-left versions of placeholder property-names used in michael@0: // testcases below: michael@0: var gRowReversePropertyMapping = michael@0: { michael@0: "_main-size": "width", michael@0: "_min-main-size": "min-width", michael@0: "_max-main-size": "max-width", michael@0: "_border-main-start-width": "border-right-width", michael@0: "_border-main-end-width": "border-left-width", michael@0: "_padding-main-start": "padding-right", michael@0: "_padding-main-end": "padding-left", michael@0: "_margin-main-start": "margin-right", michael@0: "_margin-main-end": "margin-left" michael@0: }; michael@0: michael@0: // Top-to-bottom versions of placeholder property-names used in michael@0: // testcases below: michael@0: var gColumnPropertyMapping = michael@0: { michael@0: "_main-size": "height", michael@0: "_min-main-size": "min-height", michael@0: "_max-main-size": "max-height", michael@0: "_border-main-start-width": "border-top-width", michael@0: "_border-main-end-width": "border-bottom-width", michael@0: "_padding-main-start": "padding-top", michael@0: "_padding-main-end": "padding-bottom", michael@0: "_margin-main-start": "margin-top", michael@0: "_margin-main-end": "margin-bottom" michael@0: }; michael@0: michael@0: // Bottom-to-top versions of placeholder property-names used in michael@0: // testcases below: michael@0: var gColumnReversePropertyMapping = michael@0: { michael@0: "_main-size": "height", michael@0: "_min-main-size": "min-height", michael@0: "_max-main-size": "max-height", michael@0: "_border-main-start-width": "border-bottom-width", michael@0: "_border-main-end-width": "border-top-width", michael@0: "_padding-main-start": "padding-bottom", michael@0: "_padding-main-end": "padding-top", michael@0: "_margin-main-start": "margin-bottom", michael@0: "_margin-main-end": "margin-top" michael@0: }; michael@0: michael@0: // The list of actual testcase definitions: michael@0: var gFlexboxTestcases = michael@0: [ michael@0: // No flex properties specified --> should just use 'width' for sizing michael@0: { michael@0: items: michael@0: [ michael@0: { "_main-size": [ "40px", "40px" ] }, michael@0: { "_main-size": [ "65px", "65px" ] }, michael@0: ] michael@0: }, michael@0: // flex-basis is specified: michael@0: { michael@0: items: michael@0: [ michael@0: { "flex-basis": "50px", michael@0: "_main-size": [ null, "50px" ] michael@0: }, michael@0: { michael@0: "flex-basis": "20px", michael@0: "_main-size": [ null, "20px" ] michael@0: }, michael@0: ] michael@0: }, michael@0: // flex-basis is *large* -- sum of flex-basis values is > flex container size: michael@0: // (w/ 0 flex-shrink so we don't shrink): michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "0 0 150px", michael@0: "_main-size": [ null, "150px" ] michael@0: }, michael@0: { michael@0: "flex": "0 0 90px", michael@0: "_main-size": [ null, "90px" ] michael@0: }, michael@0: ] michael@0: }, michael@0: // flex-basis is *large* -- each flex-basis value is > flex container size: michael@0: // (w/ 0 flex-shrink so we don't shrink): michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "0 0 250px", michael@0: "_main-size": [ null, "250px" ] michael@0: }, michael@0: { michael@0: "flex": "0 0 400px", michael@0: "_main-size": [ null, "400px" ] michael@0: }, michael@0: ] michael@0: }, michael@0: // flex-basis has percentage value: michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex-basis": "30%", michael@0: "_main-size": [ null, "60px" ] michael@0: }, michael@0: { michael@0: "flex-basis": "45%", michael@0: "_main-size": [ null, "90px" ] michael@0: }, michael@0: ] michael@0: }, michael@0: // flex-basis has calc(percentage) value: michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex-basis": "calc(20%)", michael@0: "_main-size": [ null, "40px" ] michael@0: }, michael@0: { michael@0: "flex-basis": "calc(80%)", michael@0: "_main-size": [ null, "160px" ] michael@0: }, michael@0: ] michael@0: }, michael@0: // flex-basis has calc(percentage +/- length) value: michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex-basis": "calc(10px + 20%)", michael@0: "_main-size": [ null, "50px" ] michael@0: }, michael@0: { michael@0: "flex-basis": "calc(60% - 1px)", michael@0: "_main-size": [ null, "119px" ] michael@0: }, michael@0: ] michael@0: }, michael@0: // flex-grow is specified: michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "1", michael@0: "_main-size": [ null, "60px" ] michael@0: }, michael@0: { michael@0: "flex": "2", michael@0: "_main-size": [ null, "120px" ] michael@0: }, michael@0: { michael@0: "flex": "0 20px", michael@0: "_main-size": [ null, "20px" ] michael@0: } michael@0: ] michael@0: }, michael@0: // Same ratio as prev. testcase; making sure we handle float inaccuracy michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "100000", michael@0: "_main-size": [ null, "60px" ] michael@0: }, michael@0: { michael@0: "flex": "200000", michael@0: "_main-size": [ null, "120px" ] michael@0: }, michael@0: { michael@0: "flex": "0.000001 20px", michael@0: "_main-size": [ null, "20px" ] michael@0: } michael@0: ] michael@0: }, michael@0: // Same ratio as prev. testcase, but with items cycled and w/ michael@0: // "flex: none" & explicit size instead of "flex: 0 20px" michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "none", michael@0: "_main-size": [ "20px", "20px" ] michael@0: }, michael@0: { michael@0: "flex": "1", michael@0: "_main-size": [ null, "60px" ] michael@0: }, michael@0: { michael@0: "flex": "2", michael@0: "_main-size": [ null, "120px" ] michael@0: } michael@0: ] michael@0: }, michael@0: michael@0: // ...and now with flex-grow:[huge] to be sure we handle infinite float values michael@0: // gracefully. michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "9999999999999999999999999999999999999999999999999999999", michael@0: "_main-size": [ null, "200px" ] michael@0: }, michael@0: ] michael@0: }, michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "9999999999999999999999999999999999999999999999999999999", michael@0: "_main-size": [ null, "50px" ] michael@0: }, michael@0: { michael@0: "flex": "9999999999999999999999999999999999999999999999999999999", michael@0: "_main-size": [ null, "50px" ] michael@0: }, michael@0: { michael@0: "flex": "9999999999999999999999999999999999999999999999999999999", michael@0: "_main-size": [ null, "50px" ] michael@0: }, michael@0: { michael@0: "flex": "9999999999999999999999999999999999999999999999999999999", michael@0: "_main-size": [ null, "50px" ] michael@0: }, michael@0: ] michael@0: }, michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "99999999999999999999999999999999999", michael@0: "_main-size": [ null, "50px" ] michael@0: }, michael@0: { michael@0: "flex": "99999999999999999999999999999999999", michael@0: "_main-size": [ null, "50px" ] michael@0: }, michael@0: { michael@0: "flex": "99999999999999999999999999999999999", michael@0: "_main-size": [ null, "50px" ] michael@0: }, michael@0: { michael@0: "flex": "99999999999999999999999999999999999", michael@0: "_main-size": [ null, "50px" ] michael@0: }, michael@0: ] michael@0: }, michael@0: michael@0: // And now, some testcases to check that we handle float accumulation error michael@0: // gracefully. michael@0: michael@0: // First, a testcase with just a custom-sized huge container, to be sure we'll michael@0: // be able to handle content on that scale, in the subsequent more-complex michael@0: // testcases: michael@0: { michael@0: container_properties: michael@0: { michael@0: "_main-size": "9000000px" michael@0: }, michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "1", michael@0: "_main-size": [ null, "9000000px" ] michael@0: }, michael@0: ] michael@0: }, michael@0: // ...and now with two flex items dividing up that container's huge size: michael@0: { michael@0: container_properties: michael@0: { michael@0: "_main-size": "9000000px" michael@0: }, michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "2", michael@0: "_main-size": [ null, "6000000px" ] michael@0: }, michael@0: { michael@0: "flex": "1", michael@0: "_main-size": [ null, "3000000px" ] michael@0: }, michael@0: ] michael@0: }, michael@0: michael@0: // OK, now to actually test accumulation error. Below, we have six flex items michael@0: // splitting up the container's size, with huge differences between flex michael@0: // weights. For simplicity, I've set up the weights so that they sum exactly michael@0: // to the container's size in px. So 1 unit of flex *should* get you 1px. michael@0: // michael@0: // NOTE: The expected computed "_main-size" values for the flex items below michael@0: // appear to add up to more than their container's size, which would suggest michael@0: // that they overflow their container unnecessarily. But they don't actually michael@0: // overflow -- this discrepancy is simply because Gecko's code for reporting michael@0: // computed-sizes rounds to 6 significant figures (in particular, the method michael@0: // (nsTSubstring_CharT::AppendFloat() does this). Internally, in app-units, michael@0: // the child frames' main-sizes add up exactly to the container's main-size, michael@0: // as you'd hope & expect. michael@0: { michael@0: container_properties: michael@0: { michael@0: "_main-size": "9000000px" michael@0: }, michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "3000000", michael@0: "_main-size": [ null, "3000000px" ] michael@0: }, michael@0: { michael@0: "flex": "1", michael@0: "_main-size": [ null, "1px" ] michael@0: }, michael@0: { michael@0: "flex": "1", michael@0: "_main-size": [ null, "1px" ] michael@0: }, michael@0: { michael@0: "flex": "2999999", michael@0: // NOTE: Expected value is off slightly, from float error when michael@0: // resolving flexible lengths & when generating computed value string: michael@0: "_main-size": [ null, "3000000px" ] michael@0: }, michael@0: { michael@0: "flex": "2999998", michael@0: // NOTE: Expected value is off slightly, from float error when michael@0: // resolving flexible lengths & when generating computed value string: michael@0: "_main-size": [ null, "3000000px" ] michael@0: }, michael@0: { michael@0: "flex": "1", michael@0: "_main-size": [ null, "1px", 0.2 ] michael@0: }, michael@0: ] michael@0: }, michael@0: // Same flex items as previous testcase, but now reordered such that the items michael@0: // with tiny flex weights are all listed last: michael@0: { michael@0: container_properties: michael@0: { michael@0: "_main-size": "9000000px" michael@0: }, michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "3000000", michael@0: "_main-size": [ null, "3000000px" ] michael@0: }, michael@0: { michael@0: "flex": "2999999", michael@0: // NOTE: Expected value is off slightly, from float error when michael@0: // resolving flexible lengths & when generating computed value string: michael@0: "_main-size": [ null, "3000000px" ] michael@0: }, michael@0: { michael@0: "flex": "2999998", michael@0: // NOTE: Expected value is off slightly, from float error when michael@0: // resolving flexible lengths & when generating computed value string: michael@0: "_main-size": [ null, "3000000px" ] michael@0: }, michael@0: { michael@0: "flex": "1", michael@0: "_main-size": [ null, "1px", 0.2 ] michael@0: }, michael@0: { michael@0: "flex": "1", michael@0: "_main-size": [ null, "1px", 0.2 ] michael@0: }, michael@0: { michael@0: "flex": "1", michael@0: "_main-size": [ null, "1px", 0.2 ] michael@0: }, michael@0: ] michael@0: }, michael@0: // Same flex items as previous testcase, but now reordered such that the items michael@0: // with tiny flex weights are all listed first: michael@0: { michael@0: container_properties: michael@0: { michael@0: "_main-size": "9000000px" michael@0: }, michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "1", michael@0: // NOTE: Expected value is off slightly, from float error when michael@0: // resolving flexible lengths: michael@0: "_main-size": [ null, "1px", 0.2 ] michael@0: }, michael@0: { michael@0: "flex": "1", michael@0: // NOTE: Expected value is off slightly, from float error when michael@0: // resolving flexible lengths: michael@0: "_main-size": [ null, "1px", 0.2 ] michael@0: }, michael@0: { michael@0: "flex": "1", michael@0: // NOTE: Expected value is off slightly, from float error when michael@0: // resolving flexible lengths: michael@0: "_main-size": [ null, "1px", 0.2 ] michael@0: }, michael@0: { michael@0: "flex": "3000000", michael@0: "_main-size": [ null, "3000000px" ] michael@0: }, michael@0: { michael@0: "flex": "2999999", michael@0: // NOTE: Expected value is off slightly, from float error when michael@0: // resolving flexible lengths & when generating computed value string: michael@0: "_main-size": [ null, "3000000px" ] michael@0: }, michael@0: { michael@0: "flex": "2999998", michael@0: // NOTE: Expected value is off slightly, from float error when michael@0: // resolving flexible lengths & when generating computed value string: michael@0: "_main-size": [ null, "3000000px" ] michael@0: }, michael@0: ] michael@0: }, michael@0: michael@0: // Trying "flex: auto" (== "1 1 auto") w/ a mix of flex-grow/flex-basis values michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "auto", michael@0: "_main-size": [ null, "45px" ] michael@0: }, michael@0: { michael@0: "flex": "2", michael@0: "_main-size": [ null, "90px" ] michael@0: }, michael@0: { michael@0: "flex": "20px 1 0", michael@0: "_main-size": [ null, "65px" ] michael@0: } michael@0: ] michael@0: }, michael@0: // Same as previous, but with items cycled & different syntax michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "20px", michael@0: "_main-size": [ null, "65px" ] michael@0: }, michael@0: { michael@0: "flex": "1", michael@0: "_main-size": [ null, "45px" ] michael@0: }, michael@0: { michael@0: "flex": "2", michael@0: "_main-size": [ null, "90px" ] michael@0: } michael@0: ] michael@0: }, michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "2", michael@0: "_main-size": [ null, "100px" ], michael@0: "border": "0px dashed", michael@0: "_border-main-start-width": [ "5px", "5px" ], michael@0: "_border-main-end-width": [ "15px", "15px" ], michael@0: "_margin-main-start": [ "22px", "22px" ], michael@0: "_margin-main-end": [ "8px", "8px" ] michael@0: }, michael@0: { michael@0: "flex": "1", michael@0: "_main-size": [ null, "50px" ], michael@0: "_margin-main-start": [ "auto", "0px" ], michael@0: "_padding-main-end": [ "auto", "0px" ], michael@0: } michael@0: ] michael@0: }, michael@0: // Test negative flexibility: michael@0: michael@0: // Basic testcase: just 1 item (relying on initial "flex-shrink: 1") -- michael@0: // should shrink to container size. michael@0: { michael@0: items: michael@0: [ michael@0: { "_main-size": [ "400px", "200px" ] }, michael@0: ], michael@0: }, michael@0: // ...and now with a "flex" specification and a different flex-shrink value: michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "4 2 250px", michael@0: "_main-size": [ null, "200px" ] michael@0: }, michael@0: ], michael@0: }, michael@0: // ...and now with multiple items, which all shrink proportionally (by 50%) michael@0: // to fit to the container, since they have the same (initial) flex-shrink val michael@0: { michael@0: items: michael@0: [ michael@0: { "_main-size": [ "80px", "40px" ] }, michael@0: { "_main-size": [ "40px", "20px" ] }, michael@0: { "_main-size": [ "30px", "15px" ] }, michael@0: { "_main-size": [ "250px", "125px" ] }, michael@0: ] michael@0: }, michael@0: // ...and now with positive flexibility specified. (should have no effect, so michael@0: // everything still shrinks by the same proportion, since the flex-shrink michael@0: // values are all the same). michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "4 3 100px", michael@0: "_main-size": [ null, "80px" ] michael@0: }, michael@0: { michael@0: "flex": "5 3 50px", michael@0: "_main-size": [ null, "40px" ] michael@0: }, michael@0: { michael@0: "flex": "0 3 100px", michael@0: "_main-size": [ null, "80px" ] michael@0: } michael@0: ] michael@0: }, michael@0: // ...and now with *different* flex-shrink values: michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "4 2 50px", michael@0: "_main-size": [ null, "30px" ] michael@0: }, michael@0: { michael@0: "flex": "5 3 50px", michael@0: "_main-size": [ null, "20px" ] michael@0: }, michael@0: { michael@0: "flex": "0 0 150px", michael@0: "_main-size": [ null, "150px" ] michael@0: } michael@0: ] michael@0: }, michael@0: // Same ratio as prev. testcase; making sure we handle float inaccuracy michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "4 20000000 50px", michael@0: "_main-size": [ null, "30px" ] michael@0: }, michael@0: { michael@0: "flex": "5 30000000 50px", michael@0: "_main-size": [ null, "20px" ] michael@0: }, michael@0: { michael@0: "flex": "0 0.0000001 150px", michael@0: "_main-size": [ null, "150px" ] michael@0: } michael@0: ] michael@0: }, michael@0: // Another "different flex-shrink values" testcase: michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "4 2 115px", michael@0: "_main-size": [ null, "69px" ] michael@0: }, michael@0: { michael@0: "flex": "5 1 150px", michael@0: "_main-size": [ null, "120px" ] michael@0: }, michael@0: { michael@0: "flex": "1 4 30px", michael@0: "_main-size": [ null, "6px" ] michael@0: }, michael@0: { michael@0: "flex": "1 0 5px", michael@0: "_main-size": [ null, "5px" ] michael@0: }, michael@0: ] michael@0: }, michael@0: michael@0: // ...and now with min-size (clamping the effects of flex-shrink on one item): michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "4 5 75px", michael@0: "_min-main-size": "50px", michael@0: "_main-size": [ null, "50px" ], michael@0: }, michael@0: { michael@0: "flex": "5 5 100px", michael@0: "_main-size": [ null, "62.5px" ] michael@0: }, michael@0: { michael@0: "flex": "0 4 125px", michael@0: "_main-size": [ null, "87.5px" ] michael@0: } michael@0: ] michael@0: }, michael@0: michael@0: // Test a min-size that's much larger than initial preferred size, but small michael@0: // enough that our flexed size pushes us over it: michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "auto", michael@0: "_min-main-size": "110px", michael@0: "_main-size": [ "50px", "125px" ] michael@0: }, michael@0: { michael@0: "flex": "auto", michael@0: "_main-size": [ null, "75px" ] michael@0: } michael@0: ] michael@0: }, michael@0: michael@0: // Test a min-size that's much larger than initial preferred size, and is michael@0: // even larger than our positively-flexed size, so that we have to increase it michael@0: // (as a 'min violation') after we've flexed. michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "auto", michael@0: "_min-main-size": "150px", michael@0: "_main-size": [ "50px", "150px" ] michael@0: }, michael@0: { michael@0: "flex": "auto", michael@0: "_main-size": [ null, "50px" ] michael@0: } michael@0: ] michael@0: }, michael@0: michael@0: // Test min-size on multiple items simultaneously: michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "auto", michael@0: "_min-main-size": "20px", michael@0: "_main-size": [ null, "20px" ] michael@0: }, michael@0: { michael@0: "flex": "9 auto", michael@0: "_min-main-size": "150px", michael@0: "_main-size": [ "50px", "180px" ] michael@0: }, michael@0: ] michael@0: }, michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "1 1 0px", michael@0: "_min-main-size": "90px", michael@0: "_main-size": [ null, "90px" ] michael@0: }, michael@0: { michael@0: "flex": "1 1 0px", michael@0: "_min-main-size": "80px", michael@0: "_main-size": [ null, "80px" ] michael@0: }, michael@0: { michael@0: "flex": "1 1 40px", michael@0: "_main-size": [ null, "30px" ] michael@0: } michael@0: ] michael@0: }, michael@0: michael@0: // Test a case where _min-main-size will be violated on different items in michael@0: // successive iterations of the "resolve the flexible lengths" loop michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "1 2 100px", michael@0: "_min-main-size": "90px", michael@0: "_main-size": [ null, "90px" ] michael@0: }, michael@0: { michael@0: "flex": "1 1 100px", michael@0: "_min-main-size": "70px", michael@0: "_main-size": [ null, "70px" ] michael@0: }, michael@0: { michael@0: "flex": "1 1 100px", michael@0: "_main-size": [ null, "40px" ] michael@0: } michael@0: ] michael@0: }, michael@0: michael@0: // Test some cases that have a min-size violation on one item and a michael@0: // max-size violation on another: michael@0: michael@0: // Here, both items initially grow to 100px. That violates both michael@0: // items' sizing constraints (it's smaller than the min-size and larger than michael@0: // the max-size), so we clamp both of them and sum the clamping-differences: michael@0: // michael@0: // (130px - 100px) + (50px - 100px) = (30px) + (-50px) = -20px michael@0: // michael@0: // This sum is negative, so (per spec) we freeze the item that had its michael@0: // max-size violated (the second one) and restart the algorithm. This time, michael@0: // all the available space (200px - 50px = 150px) goes to the not-yet-frozen michael@0: // first item, and that puts it above its min-size, so all is well. michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "auto", michael@0: "_min-main-size": "130px", michael@0: "_main-size": [ null, "150px" ] michael@0: }, michael@0: { michael@0: "flex": "auto", michael@0: "_max-main-size": "50px", michael@0: "_main-size": [ null, "50px" ] michael@0: }, michael@0: ] michael@0: }, michael@0: michael@0: // As above, both items initially grow to 100px, and that violates both items' michael@0: // constraints. However, now the sum of the clamping differences is: michael@0: // michael@0: // (130px - 100px) + (80px - 100px) = (30px) + (-20px) = 10px michael@0: // michael@0: // This sum is positive, so (per spec) we freeze the item that had its michael@0: // min-size violated (the first one) and restart the algorithm. This time, michael@0: // all the available space (200px - 130px = 70px) goes to the not-yet-frozen michael@0: // second item, and that puts it below its max-size, so all is well. michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "auto", michael@0: "_min-main-size": "130px", michael@0: "_main-size": [ null, "130px" ] michael@0: }, michael@0: { michael@0: "flex": "auto", michael@0: "_max-main-size": "80px", michael@0: "_main-size": [ null, "70px" ] michael@0: }, michael@0: ] michael@0: }, michael@0: michael@0: // As above, both items initially grow to 100px, and that violates both items' michael@0: // constraints. So we clamp both items and sum the clamping differences to michael@0: // see what to do next. The sum is: michael@0: // michael@0: // (80px - 100px) + (120px - 100px) = (-20px) + (20px) = 0px michael@0: // michael@0: // Per spec, if the sum is 0, we're done -- we leave both items at their michael@0: // clamped sizes. michael@0: { michael@0: items: michael@0: [ michael@0: { michael@0: "flex": "auto", michael@0: "_max-main-size": "80px", michael@0: "_main-size": [ null, "80px" ] michael@0: }, michael@0: { michael@0: "flex": "auto", michael@0: "_min-main-size": "120px", michael@0: "_main-size": [ null, "120px" ] michael@0: }, michael@0: ] michael@0: }, michael@0: ];