ladybird/Tests/LibWeb/Ref/input/selection-styling.html
Andreas Kling 3746fbf7f4 LibWeb: Use themed text selection colors
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.
2026-05-29 13:49:51 +02:00

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>