Bug 244445

Summary:

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

Product:

WebKit

Reporter:

Christopher Atlan <catlan>

Component:

Tables

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

ahmad.saleem792, ap, bfulgham, karlcow, koivisto, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 15

Hardware:

Mac (Apple Silicon)

OS:

macOS 12

Attachments:

Description	Flags
video that show how the text range disappears after the selection is done	none
video that show it working as expected in Chrome 105	none
video that show how the text range disappears after the selection is done in Safari Technology Preview	none

Christopher Atlan

Reported 2022-08-28 01:32:00 PDT

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

Attachments
video that show how the text range disappears after the selection is done (7.47 MB, video/quicktime) 2022-08-28 01:32 PDT, Christopher Atlan	no flags	Details
video that show it working as expected in Chrome 105 (4.42 MB, video/quicktime) 2022-08-31 00:05 PDT, Christopher Atlan	no flags	Details
video that show how the text range disappears after the selection is done in Safari Technology Preview (7.92 MB, video/quicktime) 2022-08-31 23:36 PDT, Christopher Atlan	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Christopher Atlan

Comment 1 2022-08-31 00:05:47 PDT

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

Comment 2 2022-08-31 14:56:13 PDT

<rdar://problem/99404900>

Karl Dubost

Comment 3 2022-08-31 15:13:17 PDT

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

Comment 4 2022-08-31 23:34:47 PDT

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

Comment 5 2022-08-31 23:36:18 PDT

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

Note You need to log in before you can comment on or make changes to this bug.