diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops.html')
-rw-r--r-- | testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops.html | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops.html b/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops.html new file mode 100644 index 0000000000..f95a557703 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder"> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#color-scheme-prop"> +<link rel="help" href="https://www.w3.org/TR/css-color-4/#css-system-colors"> +<link rel="help" href="https://www.w3.org/TR/css-color-5/#light-dark"> +<link rel="help" href="https://www.w3.org/TR/css-color-5/#color-mix"> +<title>Test changing used color-scheme updates gradient with color-scheme dependent color stops.</title> +<link rel="match" href="color-scheme-dependent-color-stops-ref.html"> +<style> + +.dark { + color-scheme: dark; +} + +.box { + width: 100px; + height: 100px; +} + +#system-color { + background-image: linear-gradient(CanvasText, CanvasText); +} + +#system-color-in-color-mix { + background-image: linear-gradient(color-mix(in lch, Canvas, pink), color-mix(in lch, Canvas, pink)); +} + +#light-dark { + background-image: linear-gradient(light-dark(red, green), light-dark(red, green)); +} + +#light-dark-in-color-mix { + background-image: linear-gradient(color-mix(in lch, light-dark(red, green), pink), color-mix(in lch, light-dark(red, green), pink)); +} + +</style> +</head> +<body> +<p>Test system color</p> +<div id="system-color" class="box"></div> +<p>Test system color in color-mix()</p> +<div id="system-color-in-color-mix" class="box"></div> +<p>Test light-dark()</p> +<div id="light-dark" class="box"></div> +<p>Test light-dark() in color-mix()</p> +<div id="light-dark-in-color-mix" class="box"></div> +<script> + +requestAnimationFrame(() => { + document.querySelectorAll(".box").forEach((box) => { + box.classList.add("dark"); + }); + + document.documentElement.className = ''; +}); + +</script> +</body> +</html> |