ex, ch, cap, ic and lh (and the root-element rex/rch/rcap/ric/rlh) are measured from the font an element actually uses.
ch: the width of the "0" glyph
00000000000000000000
Source Code Pro, 20pt, width: 20ch (blue) vs. the old 0.5em approximation (grey)
00000000000000000000
Source Sans 3, 20pt, width: 20ch - a proportional font, so a different width
ex and cap: the x-height and cap height
xxxx HHHH
boxes 1ex tall (blue) and 1cap tall (pink), for comparing their heights with a lowercase x and a capital H
lh: the used line-height
line-height: 18pt - each row is 1lh tall
second row
third row
line-height: 1.6 - each row is 1lh tall
second row
third row
Root-element forms follow the root, not the element
html is 12pt Source Sans 3. Both bars sit in a 30pt Source Code Pro box, but the blue bar is 10rch - ten of the ROOT's zeros - while the green bar is 10ch of the box's own font
SVG
Widths, heights and the dashed stroke in ch/em/cap against Source Code Pro; the text is ten zeros wide - the same ten as the blue bar's 10ch
MathML
mspace width="4ch" then "2em" - measured from the math font