forced-colors-mode-47.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /forced-colors-mode/forced-colors-mode-47.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<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">

<style>

  /* 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;

</style>

<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);"/>

</svg>