[css-size-adjust] Clarify interaction between text-size-adjust and em units #11636
Description
It is not clear how text-size-adjust and em units should interact (spec). Not adjusting em units leads to clipped text. Adjusting em units leads to double-adjustment of line-height.
Example (live):
<!doctype html> <meta name="viewport" content="width=device-width"> <style> html { -webkit-text-size-adjust: 250%; text-size-adjust: 250%; } </style> <p> height (em, px): <div style="height: 1em; width: 16px; background: lightblue; display: inline-block;">a</div> <div style="height: 16px; width: 16px; background: lightgreen; display: inline-block;">a</div> </p> <p> border-width (em, px): <div style="border-top: 1em solid blue; width: 16px; background: lightblue; display: inline-block;">a</div> <div style="border-top: 16px solid green; width: 16px; background: lightgreen; display: inline-block;">a</div> </p> <p> line-height (em, px): <div style="line-height: 1em; width: 16px; background: orange; display: inline-block;">a</div> <div style="line-height: 16px; width: 16px; background: purple; display: inline-block;">a</div> </p> Comparison between Webkit (left) and Chromium (right):
