[cssom] getClientRects / getBoundingClientRect for pseudo elements

[WilcoFiers]

One of the big challenges in automated accessibility testing is to test for color contrast. And one of the biggest challenges in testing for color contrast is to figure out what is going on with pseudo elements on the page. It would be very helpful if, similar to window.getComputedStyle the Element.getClientRects and Element.getBoundingClientRect methods could accept an argument which tells the browser to return rect(s) of the pseudo element instead. This could look something like:

const pseudoRects = elm.getClientRects(':after');

This would help tools like axe-core, and other accessibility tools, which currently just sort of have to guess what's going on with the pseudo elements based on computed styles.

[tabatkins]

There's a few other operations that would probably make sense for pseudo-elements as well. We had an older proposal for a PseudoElement object that you could retrieve with code like elm.pseudo("::before"), which would just expose a few methods like scrollTo() and getBoundingClientRect().

[harellevy]

looks like promising stuff. any workarounds instead of appending the same styles as pseudo to a temporary div element, calculating and removing it?

[paulirish]

a PseudoElement object that you could retrieve with code like elm.pseudo("::before")

👀 Looks like this is in the current editor's draft: https://drafts.csswg.org/css-pseudo-4/#window-interface Def excited for that!

[josepharhar]

This would also be helpful for customizable select's ::picker(select) pseudo-element, or any other part-like pseudo-element