explainer.md

Allow calc function infinity and NaN

Author: Seokho Song([email protected])

Summary

According to the CSS specification CSS Values and Units Module Level 4, CSS calc() math function should allow infinity and NaN values by 'infinity', '-infinity', 'NaN' keywords or expressions that could be evaluated into infinity or NaN such as 'calc(1/0)'.

Infinity and NaN operations

The infinity and NaN will be evaluated by IEEE 754.

The operations:

Operation	Result
n ÷ ±infinity	0
±infinity × ±infinity	±infinity
±n ÷ ±0 (n != 0)	±infinity
±n × ±infinity (n is finite, n != 0)	±infinity
infinity + infinity infinity – -infinity	+infinity
-infinity – infinity -infinity + –infinity	-infinity
±0 ÷ ±0	NaN
±infinity ÷ ±infinity	NaN
±infinity × 0	NaN

Implementation aspect

All of the values evaluated in infinity or NaN should be clamped to ideal finite values before consuming to components.

According to the spec, It says "If a top-level calculation (a math function not nested inside of another math function) would produce a value whose numeric part is NaN, it instead act as though the numeric part is +∞." Therefore NaN will be calculated as positive infinity.

Examples

Below infinity and NaN could be evaluated by the expression such as Zero Division. The result of using the expression and keywords is identical.

1. <length> and <length-percentage>

   div {
       width:calc(infinity*1px);
       height:10px;
       background-color:green;
   }

   The maximum value will be calculated by INT_MAX / kFixedPointDenominator / zoom factor (≈ 3.35544e+07 if zoom factor is 1).

   This case div's computed width will be a maximum value of computed style. In case of NaN:

      width:calc(NaN*1px);

   The value will be a maximum value of computed style to indicate positive infinity.

2. <time>

    div {
        animation-duration: calc(infinity*1s);
        animation-name: SomeAnimation;
    }

   This case div's computed duration will be maximum value(≈1.79769e+308s) of computed style.

   In case of NaN:

      animation-duration:calc(NaN*1s);

   The value will be a maximum value(≈1.79769e+308s) of computed style to indicate infinity.

3. <angle>

       div {
           transform: rotate(calc(infinity*1deg));
       }

       div {
           transform: rotate(calc(NaN*1deg));
       }

   In this case, the calc produces for <angle> is a specific constant value (2867080569122160) which is the nearest calculatable double maximum value in the current implementation. Details are explained in design docs. Please see below.

See Also

Design Doc: doc

Issue: 1133390