Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/fast/forms/accent-color/range-accent-color-appearance.html 

<!DOCTYPE html>
<meta name=fuzzy content="maxDifference=0-3; totalPixels=0-100">

<style>
div {
  display: inline-block;
  margin: 8px;
}
</style>

<div>
  no accent-color<br />
  <input type="range" /><br />
  <input type="range" disabled /><br />
  <input type="range" list="tickmarks1" /><br />
  <datalist id="tickmarks1">
    <option value="0"> </option>
    <option value="10"> </option>
    <option value="20"> </option>
    <option value="30"> </option>
    <option value="40"> </option>
    <option value="50"> </option>
    <option value="60"> </option>
    <option value="70"> </option>
    <option value="80"> </option>
    <option value="90"> </option>
    <option value="100"> </option>
  </datalist>
</div>

<div style="accent-color: auto">
  accent-color: auto<br />
  <input type="range" /><br />
  <input type="range" disabled /><br />
  <input type="range" list="tickmarks1" /><br />
  <datalist id="tickmarks1">
    <option value="0"> </option>
    <option value="10"> </option>
    <option value="20"> </option>
    <option value="30"> </option>
    <option value="40"> </option>
    <option value="50"> </option>
    <option value="60"> </option>
    <option value="70"> </option>
    <option value="80"> </option>
    <option value="90"> </option>
    <option value="100"> </option>
  </datalist>
</div>

<div style="accent-color: red">
  accent-color: red<br />
  <input type="range" /><br />
  <input type="range" disabled /><br />
  <input type="range" list="tickmarks1" /><br />
  <datalist id="tickmarks1">
    <option value="0"> </option>
    <option value="10"> </option>
    <option value="20"> </option>
    <option value="30"> </option>
    <option value="40"> </option>
    <option value="50"> </option>
    <option value="60"> </option>
    <option value="70"> </option>
    <option value="80"> </option>
    <option value="90"> </option>
    <option value="100"> </option>
  </datalist>
</div>

<div style="accent-color: green">
  accent-color: green<br />
  <input type="range" /><br />
  <input type="range" disabled /><br />
  <input type="range" list="tickmarks1" /><br />
  <datalist id="tickmarks1">
    <option value="0"> </option>
    <option value="10"> </option>
    <option value="20"> </option>
    <option value="30"> </option>
    <option value="40"> </option>
    <option value="50"> </option>
    <option value="60"> </option>
    <option value="70"> </option>
    <option value="80"> </option>
    <option value="90"> </option>
    <option value="100"> </option>
  </datalist>
</div>

<div style="accent-color: #111111">
  accent-color: #111111<br />
  <input type="range" /><br />
  <input type="range" disabled /><br />
  <input type="range" list="tickmarks1" /><br />
  <datalist id="tickmarks1">
    <option value="0"> </option>
    <option value="10"> </option>
    <option value="20"> </option>
    <option value="30"> </option>
    <option value="40"> </option>
    <option value="50"> </option>
    <option value="60"> </option>
    <option value="70"> </option>
    <option value="80"> </option>
    <option value="90"> </option>
    <option value="100"> </option>
  </datalist>
</div>

<div style="accent-color: #eeeeee">
  accent-color: #eeeeee<br />
  <input type="range" /><br />
  <input type="range" disabled /><br />
  <input type="range" list="tickmarks1" /><br />
  <datalist id="tickmarks1">
    <option value="0"> </option>
    <option value="10"> </option>
    <option value="20"> </option>
    <option value="30"> </option>
    <option value="40"> </option>
    <option value="50"> </option>
    <option value="60"> </option>
    <option value="70"> </option>
    <option value="80"> </option>
    <option value="90"> </option>
    <option value="100"> </option>
  </datalist>
</div>

<div style="color-scheme: dark">
  color-scheme: dark<br />
  <input type="range" /><br />
  <input type="range" disabled /><br />
  <input type="range" list="tickmarks1" /><br />
  <datalist id="tickmarks1">
    <option value="0"> </option>
    <option value="10"> </option>
    <option value="20"> </option>
    <option value="30"> </option>
    <option value="40"> </option>
    <option value="50"> </option>
    <option value="60"> </option>
    <option value="70"> </option>
    <option value="80"> </option>
    <option value="90"> </option>
    <option value="100"> </option>
  </datalist>
</div>

<div style="accent-color: currentcolor; color: red">
  accent-color: currentcolor; color: red<br />
  <input type="range" style="color:red" /><br />
  <input type="range" disabled style="color:red" /><br />
  <input type="range" list="tickmarks1" style="color:red" /><br />
  <datalist id="tickmarks1">
    <option value="0"> </option>
    <option value="10"> </option>
    <option value="20"> </option>
    <option value="30"> </option>
    <option value="40"> </option>
    <option value="50"> </option>
    <option value="60"> </option>
    <option value="70"> </option>
    <option value="80"> </option>
    <option value="90"> </option>
    <option value="100"> </option>
  </datalist>
</div>