Bug 244445 – table column text select using :has() as a CSS Parent Selector

• Status: NEW
• Component: Tables

[Christopher Atlan]

Created attachment 461941 [details]
video that show how the text range disappears after the selection is done

I was hoping to use the new :has() selector to allow users to select text in tables within the column bounds without JS. The basic seems to work. However the display of the text range disappears after the selection is done, only to reappear after moving the cursor for a few pixel. Please find attached link to a codepen sample and video.

https://codepen.io/catlan/pen/XWELegW

[Christopher Atlan]

Created attachment 462024 [details]
video that show it working as expected in Chrome 105

Please find attached a video that show it working as expected in Chrome 105

[Radar WebKit Bug Importer]

<rdar://problem/99404900>

[Karl Dubost]

Christopher, thanks for the report.

The videos and the codepen are different. So based only on the codependen.

Tested on macOS 13.0
---
Safari                     16.1          18614.2.1.1.1  working 
Safari Technology Preview  16.0          18615.1.2.3    working 
Firefox Nightly            106.0a1       10622.8.30.    CAN NOT select at all
Google Chrome Canary       107.0.5272.0  5272.0         working

Safari and chrome are behaving the same. 
The only thing which is happening for me is that:
1. when we select a couple of words on the left side column, and then hover on the right side column, the highlighted text selection disappears, and reappears as soon as we come back. 
2. when we select a block with triple click on the left side and hover on the right side, the block on the same line gets highlighted on the right side, while the one on the left is not anymore, but goes back when moving back to the left.
 

Do you have better steps to reproduce it shown in the video?

Thanks.

[Christopher Atlan]

Thank you for the response, Karl.

The videos shows the project I'm working on, for the codepen I tried to reduce the issue to the basics. 

I think one of the steps I forgot to mention and is not 100% clear is that the issue is the crossing of the line/row (tr) bounds. A text select within a <tr><td>text *selected text* more text</td><td>even more text</td></tr> always works out of the box. 

What I would like to achieve is text select for a column without JS. Like being able to select all the A without the B in one go in <tr><td>A</td><td>B</td></tr><tr><td>A</td><td>B</td></tr>

Back to the codepen sample on the left side the "The squareround holes. The ones who see things differently." is across <tr> and shows the issue.

Safari Technology Preview  Release 152 (Safari 16.0, WebKit 17615.1.2.3)

[Christopher Atlan]

Created attachment 462067 [details]
video that show how the text range disappears after the selection is done in Safari Technology Preview