mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-10-03 14:50:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

LibWeb/CSS: Implement the light-dark color function

Browse source
This commit is contained in:
Gingeh 2025-01-05 09:51:58 +11:00 • committed by Sam Atkins
commit 8e56109515
Notes: github-actions[bot] 2025-01-08 11:19:19 +00:00
14 changed files with 275 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

26
Tests/LibWeb/Text/input/wpt-import/css/css-color/light-dark-basic.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<title>light-dark() color-scheme propagation</title>
<script src=../../resources/testharness.js></script>
<script src=../../resources/testharnessreport.js></script>
<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-effect">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7561">
<div id="system"></div>
<div id="light" style="color-scheme: light"></div>
<div id="dark" style="color-scheme: dark"></div>
<script>
const system_is_dark = matchMedia("(prefers-color-scheme: dark)").matches;
const elements = ["system", "light", "dark"].map(document.getElementById.bind(document));
function test_light_dark(color, expected_light, expected_dark) {
test(() => {
for (let element of elements) {
let should_be_dark = element.id == "dark" || (element.id == "system" && system_is_dark);
element.style.backgroundColor = color;
assert_not_equals(element.style.backgroundColor, "", "Should be valid");
assert_equals(getComputedStyle(element).backgroundColor, should_be_dark ? expected_dark : expected_light);
}
}, color);
}
test_light_dark("light-dark(white, black)", "rgb(255, 255, 255)", "rgb(0, 0, 0)");
test_light_dark("light-dark(light-dark(white, red), red)", "rgb(255, 255, 255)", "rgb(255, 0, 0)");
</script>

21
Tests/LibWeb/Text/input/wpt-import/css/css-color/light-dark-currentcolor-in-color.html Normal file
View file

@ -0,0 +1,21 @@
<!doctype html>
<meta charset="utf-8">
<title>CurrentColor can be used inside light-dark for the color property</title>
<link rel="help" href="https://drafts.csswg.org/css-color-5/#light-dark">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#parent { color: green; }
#child {
color-scheme: dark;
color: light-dark(red, currentColor);
}
</style>
<div id="parent">
<div id="child">Text should be green</div>
</div>
<script>
test(() => {
assert_equals(getComputedStyle(child).color, "rgb(0, 128, 0)");
}, "curentColor in light-dark() refers to parent color");
</script>