Skip to content

Resolve rem lengths against the root element's font size - #285

Open
eXpl0it3r wants to merge 1 commit into
masterfrom
fix/rem-units
Open

eXpl0it3r wants to merge 1 commit into
masterfrom
fix/rem-units

Conversation

@eXpl0it3r

Copy link
Copy Markdown
Collaborator

Any rem length resolved to 0, e.g. html { font-size: 10px } p { margin-left: 2rem } gave no margin at all, height: 2rem was ignored and font-size: 2rem fell back to medium. The length parsing on the box side only knew the two letter units and looked at the last two characters, so 2rem became an em length with the number 2r. Inside calc() it didn't drop to 0, but used the element's own font size instead of the root's.

rem is now a unit of its own and resolves against the font size of the html element (or the topmost box for a fragment without one), as defined in CSS Values 4 §6.1.1:

  • CssValueParser.ParseLength and IsValidLength recognize rem, and calc() gets the root font size as rem factor
  • CssLength has a Rems unit
  • font-size resolves rem right away like em, so children don't compound it, and on the root element itself it refers to the initial font size
  • RegexParserUtils.CssLength includes rem, which font-size, word-spacing, border-radius and border-spacing go through

How to test this PR?

CI should succeed. LengthTests.Rem_ResolvesAgainstTheRootFontSize, Rem_InFontSize_ResolvesAgainstTheRootFontSize and Rem_InTheRootFontSize_IsTheInitialFontSize cover margin, padding, calc(), text-indent, height, border width and font-size, and fail on master.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant