[css-text-decor-4] Clarified constraints for thickness length and percentage #7283 by tcaptan-cr · Pull Request #7284 · w3c/csswg-drafts (original) (raw)

@dbaron, after playing with this a bit, I think I have a better understanding of what device pixels means.

When loading the following example on a highdpi (dsf=2) monitor, the blue and green lines have the same thickness (in Chrome Canary and Firefox), but the red line is thicker. This is because Chrome/Firefox draw the blue and green lines at (1.1 css pixels * dsf (2)) = 2 device pixels, whereas the red line draws at round(1.4 css pixels * dsf (2)) = 3 device pixels.

  <div style="position: absolute; top: 25px; left: 5px; width: 20px; height: 1px; background: blue;"></div>
  <span style="color: green; text-decoration: underline; text-decoration-thickness: 1.1px;">&nbsp;&nbsp;</span>
  <span style="color: red; text-decoration: underline; text-decoration-thickness: 1.4px;">&nbsp;&nbsp;</span>

Is this dsf behavior what is meant by device pixels? If so, I agree that referring to device pixels makes sense. We would not want to round to css pixels (e.g., (round(1.4 css pixels) * dsf (2)) = 2 device pixels for the red line) because that would limit the granularity of the decoration thickness on highdpi monitors.