1720249 - HSL Hue Number Loses Precision Beyond 2^24 And Results In Mostly Red After 2^32.

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[mitchelljohnallen1]

Attachment: Various Tests Of Large Hue Values

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:89.0) Gecko/20100101 Firefox/89.0
Firefox for Android

Steps to reproduce:

I create a page with a <canvas> element and use JavaScript to obtain a corresponding CanvasRenderingContext2D. When setting the fillStyle property, I provide a string for an HSL color, but I provide a very large number for the hue value.

Actual results:

For hue values beyond 2^24, there appears to be some rounding or truncation occurring (manifesting as color banding when drawing a rainbow). Hue values past 2^32 seem to mostly result in a red color regardless of which value is selected.

Expected results:

I suspect hue values beyond 2^24 should continue to behave just like values below 2^23 and allow drawing of colors with minimal rounding or truncation. I have attached a file which hopefully showcases the problem and provides expected results.

Comment 1

[mitchelljohnallen1]

This is just an educated guess, but I think the Hue value from the HSL color is being read as a 32-bit float. Beyond 2^24, single-precision floats begin to increment by 2 and skip consecutive integers, and I don't believe it's possible to represent the value (2^24 + 1) as a 32-bit float. That may explain why color banding occurs around that range of values. At 2^32, single-precision floats start incrementing by 512 which is greater than 360, so that may explain why I'm only seeing one color for hue values that high.

Comment 2

[Adrian Florinescu [:aflorinescu]]

Checked if the reported issue is a regression, which is not, Fx35 behaves the same.
Although i might be wrong, severity wise, I don't think this is a high severity issue, so starting with S4 until a better assesment can be made.