[actions] Handling of "display:contents" element as origin

[whimboo]

Similar to issue #1642 (display: none) an element that has a style of display: contents defined doesn't have a bounding box and retrieving the coordinates will fail. In Firefox we currently raise a move target out of bounds error when trying to move the pointer to the element specified as origin.

Here a HTML testcase:

<div>Example text, and button here:
  <button style="display: contents" onclick="alert('clicked')">click me</button>
</div>

In case of this example a possible solution to still get the bounding client rect would be to create a Range object for the button, which itself has the bounding client rect information that we need:

const button = document.querySelector("button");

const range = document.createRange();
range.selectNodeContents(button);

const rect = range.getBoundingClientRect();
console.log(rect);

The output in the console will be:

DOMRect { x: 208.85000610351562, y: 8.600006103515625, width: 51.09999084472656, height: 16, top: 8.600006103515625, right: 259.9499969482422, bottom: 24.600006103515625, left: 208.85000610351562 }

This also seems to work when the affected element has DOM nodes as children:

<div style="display: content">Text with DOM nodes:
  <span>Text</span>
  <span>more</span>
</div>

[whimboo]

I've created an example page that demonstrates the following scenarios:

• An empty paragraph with no children which is basically handled similarly to display: none
• A button with a single text node
• A div with 3 child nodes (span, p, span) and a wrapper div to limit the width and trigger a text wrapping

Here the results for each browser:

Firefox

p: x=0 y=0 width=0 height=0
button: x=10 y=48 width=77 height=16
div: x=10 y=86 width=300 height=125

Chrome

p: x=0 y=0 width=0 height=0
button: x=10 y=49 width=72 height=15
div: x=10 y=83 width=300 height=125

Safari

p: x=0 y=0 width=0 height=0
button: x=10 y=49 width=65 height=13
div: x=10 y=82 width=300 height=122

All those values look reasonable aside the small differences as most likely caused due to rendering.

[sadym-chromium]

@sadym-chromium PTAL

[css-meeting-bot]

The Browser Testing and Tools Working Group just discussed Handling of "display:contents" elements as origin, and agreed to the following:

• ACTION: Henrik to get further feedback from Apple

The full IRC log of that discussion

<tidoust> Topic: Handling of "display:contents" elements as origin
<tidoust> github: https://github.com//issues/1887
<tidoust> henrik: We talked about display:none in the last meeting. Follow-up action is with display: contents. At the moment, they don't have a bounding box, so we raise an error, not clickable.
<tidoust> ... It looks like we have a way to get the bounding box rect for these elements but through a range.
<tidoust> ... I have sketched this. Check the issue and example in last comment.
<tidoust> ... The example page has display: none, then button, then a paragraph with wrapping. All of these look fine. I checked with Chrome, Firefox and Safari.
<tidoust> ... If we agree with the approach, I should be able to prepare a PR to update the spec.
<sadym> q+
<jimevans> ack
<tidoust> sadym: I haven't checked yet. I will take a look and comment on the issue.
<tidoust> Henrik: OK. Other concerns?
<tidoust> [none heard]
<tidoust> Henrik: Will wait for comments then.
<tidoust> ACTION: Henrik to get further feedback from Apple
<tidoust> ack sadym