Skip to content

CSS declaration calc(...) always evaluates to 0px #363

@svschouw-bb

Description

@svschouw-bb

We have a component with a slider where the user can drag it to select some percentage. The JavaScript calculates the X coordinate as a percentage of the total width of the slider. This works fine as long as the widths are not too small. On a specific page this width is declared as width: calc(100% - 200px). Before HtmlUnit version 2.44.0 the CssParser would error on this statement and just drop it, making the width effectively auto. This was fine for our tests since it was something non-0. But since HtmlUnit 2.44.0 the calc(100% - 200px) value is accepted. But this gets effectively evaluated to 0px.

I'm not entirely sure how or where to fix this. I get extremely confused if I look at the CSS size calculations :)

As best I can tell, the problem lies somewhere here:

  • ComputedCSSStyleDeclaration.getWidth() calls pixelString(...) on a custom CssValue element.
    • It retrieves the CSS value (calc(100% - 200px)), but since it doesn't end with "px", it calls pixelValue(...) instead
      • This retrieves the CssValue.get(...)
        • In ComputedCSSStyleDeclaration.getWidth().CssValue.get(...) (around line 916) it retrieves the "width" style, which is calc(100% - 200px).
          • If this were auto, it would return window default value (1256px), but it is not.
        • It returns calc(100% - 200px) unmodified
      • Since this doesn't end with "%", is not auto and not empty, it returns pixelValue("calc(100% - 200px)")
        • This tries to parse the value, but since it doesn't start with a number, it returns 0
    • It concatinates the result with "px", and returns "0px"

I honestly wouldn't know what the fix would be. Maybe CSSStyleDeclaration.pixelValue(Element, CssValue, boolean) should detect s.startsWith("calc(") or something and return value.getWindowDefaultValue()? I'm not sure what the difference between getDefaultValue() and getWindowDefaultValue() is, but getDefaultValue() also returns 0, which is also wrong. Note that with with a value of auto CSSStyleDeclaration.pixelValue(Element, CssValue, boolean) would return getDefaultValue() == 0, but if it was auto it would not get here in the first place, because ComputedCSSStyleDeclaration.getWidth().CssValue.get(...) would've already returned the window default value.

Tested with HtmlUnit 2.50.0

If needed I can probably produce a sample HTML page and HtmlUnit test fragment showing the problem.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions