diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops-ref.html')
-rw-r--r-- | testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops-ref.html | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops-ref.html b/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops-ref.html new file mode 100644 index 0000000000..28d57bc19c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<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>Reference: Test changing used color-scheme updates gradient with color-scheme dependent color stops.</title> +<style> + +.box { + color-scheme: dark; + + 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> +</body> +</html> |