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.
35 lines
653 B
HTML
35 lines
653 B
HTML
<!DOCTYPE html>
|
|
<link rel="match" href="../expected/selection-styling-ref.html">
|
|
<style>
|
|
p {
|
|
font-size: 20px;
|
|
line-height: 1.5;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.bg-only::selection {
|
|
background-color: red;
|
|
}
|
|
|
|
.color-only::selection {
|
|
background-color: transparent;
|
|
color: green;
|
|
}
|
|
|
|
.both::selection {
|
|
background-color: blue;
|
|
color: yellow;
|
|
}
|
|
</style>
|
|
|
|
<div id="container">
|
|
<p class="bg-only">Background only</p>
|
|
<p class="color-only">Color only</p>
|
|
<p class="both">Both</p>
|
|
</div>
|
|
|
|
<script>
|
|
const range = document.createRange();
|
|
range.selectNodeContents(document.getElementById("container"));
|
|
getSelection().addRange(range);
|
|
</script>
|