<meta charset="utf-8">

<title>Forced colors mode - lighting-color, flood-color, stop-color system colors.</title>

<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">

<link rel=match href="forced-colors-mode-47-ref.html">

/* SVG elements are set to 'forced-color-adjust: none' by default. Set this to

auto instead in order to test that lighting-color, flood-color, stop-color

are properly handled in forced colors mode. */

svg {

forced-color-adjust: auto;

height: 100px;

width: 500px;

}

<svg xmlns="http://www.w3.org/2000/svg">

<!-- stop-color in forced colors mode -->

<linearGradient id="stop">

<stop offset="25%" stop-color="GrayText"/>

<stop offset="75%" stop-color="LinkText"/>

</linearGradient>

<rect x="0" y="0" width="100" height="100" fill="url('#stop')"/>

<!-- lighting-color in forced colors mode -->

<filter id="lighting" x="0" y="0" width="100%" height="100%">

<feDiffuseLighting in="SourceGraphic" lighting-color="LinkText">

<fePointLight x="250" y="50" z="10"/>

</feDiffuseLighting>

</filter>

<rect x="200" y="0" width="100" height="100" style="filter: url(#lighting);"/>

<!-- flood-color in forced colors mode -->

<filter id="flood" x="0" y="0" width="100%" height="100%">

<feFlood flood-color="GrayText"/>

</filter>

<rect x="400" y="0" width="100" height="100" style="filter: url(#flood);"/>