Use the page palette for default selection backgrounds instead of a hardcoded blue color. Tint opaque selection backgrounds before painting. Selected images stay visible through the overlay. Use SelectionText for default selected text and HighlightText. Authored ::selection colors still take precedence. On macOS, use a light translucent color matching other engines. Update selection and system-color baselines for the themed colors. Add macOS-specific screenshot baselines for tests whose expectations depend on system colors.
27 lines
655 B
HTML
27 lines
655 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,
|
|
.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>
|