mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 02:05:07 +02:00
98b4feb406
Previously, text selection always used the system highlight color. This implements support for the ::selection pseudo-element's background-color and color properties. For form controls like <input> and <textarea>, the selection style is looked up on the shadow host element, since the actual text lives inside their shadow DOM. The text painting logic has been refactored to split fragments into styled spans (before selection, selected, after selection) so that each portion can be rendered with its appropriate colors, taking care not to allocate in 99%+ of fragment rendering cases.
27 lines
633 B
HTML
27 lines
633 B
HTML
<!DOCTYPE html>
|
|
<link rel="match" href="../expected/selection-background-ref.html">
|
|
<style>
|
|
p {
|
|
font-size: 20px;
|
|
line-height: 1.5;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.styled::selection {
|
|
background-color: red;
|
|
}
|
|
</style>
|
|
|
|
<div id="container">
|
|
<p class="styled"><span id="sel-start">Par</span>tial start</p>
|
|
<p class="styled">Full selection</p>
|
|
<p class="styled">Partial <span id="sel-end">end</span></p>
|
|
</div>
|
|
|
|
<script>
|
|
const range = document.createRange();
|
|
range.setStart(document.getElementById("sel-start").firstChild, 1);
|
|
range.setEnd(document.getElementById("sel-end").firstChild, 2);
|
|
getSelection().addRange(range);
|
|
</script>
|