Rego’s Everyday Life

A blog about my work at Igalia.

Selection interaction in CSS Regions is now spec compliant

This post is a recap to summarize all the work we’ve been doing in Igalia during the last months related to selection in CSS Regions. Wrap-up

Back in October 2013 my mate Javi explained the different problems we detected on how selection worked in pages using CSS Regions. As part of this initial work, we were improving test coverage as it was explained in a previous post. Originally we were working both in WebKit and Blink, but as you probably know CSS Regions has been removed from Blink code during this year.

In parallel, we’ve been also working in optimizations over CSS Regions code. First providing some new selection performance tests and later implementing some performance patches in the part related with re-paint phase, which is very important during the selection process.

Making selection spec compliant

Our first solution was put aside as it had some rough edges and it was probably too ambitious as initial step.

Nonetheless in my last post we introduced a new idea to make selection in CSS Regions spec compliant. We called it the “Subtrees approach“. We’ve finally implemented it and the patch is already integrated upstream.

Example of selection in CSS Regions before and after the Subtrees approach patch Example of selection in CSS Regions before and after the Subtrees approach patch

You can check the new behaviour using our test suite. As you could see now selection content always matches with the highlighted text in the web page.

Future

Somehow this is just the tip of the iceberg, a small step to make selection in CSS Regions work better. However, selection is still not completely natural from the user point of view in several cases. On top of that, selection in other layout models (flexbox, grid, multi-column, etc.) has very similar issues.

Our plan is to start a discussion inside WebKit and Blink communities about how selection works in the different layout models and what kind of changes can be done there to create a better user experience around selection interaction on the web (as Javi has introduced in his last post).

Finally, we’d like to publicly thank Adobe Web Platform team for giving us the chance to collaborate with them, specially Mihnea for all his support. Also, thanks to all the reviewers for their insightful feedback and precious time.