[css-values-4] Add new relative length units that are relative to the size of the system cursor

[Related bug in Firefox]

There are currently two ways for web developers to get tooltip behavior for a website, as listed in this example StackOverflow thread:

• use a title attribute, which yields a standardized text tooltip managed by the browser;

• create a CSS-customizable tooltip, listen to mouse move events with JavaScript to dynamically change the position of the tooltip, reveal it when some other element is hovered.

When computing the new position for a customizable tooltip with JavaScript, web developers will typically add an offset to account for the system cursor. However, because the system cursor size is not exposed, the offset they add is arbitrary and cannot account for varying cursor sizes. This causes problems for accessibility, as visually impaired users may set their cursors to a bigger size than the average and have their cursor cover the contents of the tooltip -- thus part of the information is not shown for them.

This can be seen in the StackOverflow thread listed above, where two different web developers answering the same question answered with a different arbitrary offset:

    // Offset of 20px
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';

  // Offset of 10px
  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
          ? (e.pageX + 10 + "px")
          : (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
          ? (e.pageY + 10 + "px")
          : (document.body.clientHeight + 5 - tooltip.clientHeight + "px");

This issue proposes to add two new relative length units.

Browsers may let the option to users to use up-rounded or predefined system cursor sizes to limit fingerprinting.

The first example from above may then be changed to the following:

    tooltipSpan.style.top = 'calc(1sch + ' + y + 'px)';
    tooltipSpan.style.left = 'calc(1scw + ' + x + 'px)';

The second example could be partially adapted ...

  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 /* still arbitrary */ < document.body.clientWidth)
          ? ("calc(1scw + " + e.pageX + "px)")
          : ("calc(0.5scw + " + (document.body.clientWidth - tooltip.clientWidth) + "px)");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 /* still arbitrary */ < document.body.clientHeight)
          ? ("calc(1sch + " + e.pageY + "px)")
          : ("calc(0.5sch + " (document.body.clientHeight - tooltip.clientHeight) + "px)");

... but, as you can see, the proposed change would not be enough on its own to completely adapt the second example. This code is trying to assess from JavaScript whether the tooltip would be partially positioned outside the limits of the rendered page and not get rendered completely -- and adjust its position accordingly. For this example to not use any arbitrary offset, I believe we would have to expose the system cursor size directly to JavaScript -- so I'd like to hear your opinions regarding this possibility as well.

Thanks!

Start with the CSS Values 4 relative-length section and the linked Firefox bug, then read the discussion about cursor-size exposure and fingerprinting. This needs a resolved CSSWG design for scw and sch, including whether JavaScript access is needed, before a specification change can be considered done.