Flexbox size table: Fix rounding error that results in value of "1e-9px"
Categories
(DevTools :: Inspector, enhancement, P2)
Tracking
(Not tracked)
People
(Reporter: victoria, Unassigned)
References
(Blocks 1 open bug)
Details
Attachments
(1 file, 1 obsolete file)
795.73 KB,
image/png
|
Details |
Updated•6 years ago
|
Comment 1•6 years ago
|
||
Updated•6 years ago
|
Reporter | ||
Comment 2•6 years ago
|
||
Comment 3•6 years ago
|
||
Updated•6 years ago
|
Comment 4•6 years ago
|
||
This URL functions as a reduced testcase:
data:text/html,<div style="flex-basis:0.000000001px"><div>
Comment 5•6 years ago
|
||
Unassigning myself since I'm not actively working on this.
Comment 6•6 years ago
|
||
Test with this URL:
data:text/html,<body style="display:flex;"><div style="flex-basis:0.000000001px"><div>
- Inspect the
<body>
element - Switch to the Layout sidebar tab
- Click on the
div
Flex Item
Comment 7•6 years ago
|
||
Both InspectorUtils.getCSSStyleRules()
and element.style.getPropertyValue()
return authored values with numbers in exponential notation past a certain value.
To convert back to decimal notation, there isn't a built-in JS APIs. The problem is quite complex to solve right:
https://github.com/josdejong/mathjs/issues/676
The fact that we're getting authored values (including CSS unit type) adds to the complexity.
If we're not striving for comprehensive coverage of all possible exponential format variations (I'd hypothesize it's more common to have very large decimal precision, than integers in exponential notation), one naive way to approach this issue is as follows:
- Use
parseFloat
to separate the number from the unit:
num = parseFloat("1e-9px") // => 1e-9
- Stringify that and use it to isolate the unit type:
unit = "1e-9px".replace(num.toString(),""); // => "px"
- Guard that we haven't parsed bogus stuff:
if ("1e-9px" !== `${num}${unit}`) return;
- Naively infer the precision from the number; regular expressions, I know :(
precision = num.toString().match(/\d+$/) // => Array["9"]
precision = precision && parseInt(precision[0]) // => 9
- Check if we have a precision (it may be
null
if no regex match was found):
if (!precision) return;
- Convert from exponential to decimal notation with the precision we found:
decimal = num.toFixed(precision);
- Append the unit and call it a day:
str = `${decimal}${unit}` // => "0.000000001px"
Whether all this is warranted for the accuracy of the display of an authored value in an edge case, I don't know.
But it's one naive way of approaching it without tripping on many of the common use cases like auto
, 0
, --var-with-e-in-name
or 3em
.
Comment 8•4 years ago
|
||
Comment 9•4 years ago
|
||
So it seems we write in exponential notation past 6 numbers, looking at the implementation for that.
Updated•4 years ago
|
Updated•4 years ago
|
Updated•4 years ago
|
Updated•2 years ago
|
Description
•