input-dark-mode-basic.html | Explore in Territory

<!DOCTYPE html>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>

<meta name="color-scheme" content="dark">

<!-- no style for reference -->
<ul>
  <li>Text: <input type="text" value="example text"/></li>
  <li>Number: <input type="number" value="12345"/></li>
  <li>Search: <input type="search" value="example text"/></li>
  <li>Email: <input type="email" value="example text"/></li>
  <li>Password: <input type="password" value="example text"/></li>
  <li>TextArea: <textarea>example text</textarea> </li>
</ul>

<!-- disabled -->
<ul>
  <li>Text disabled: <input type="text" style="color-scheme: dark" value="example text" disabled/></li>
</ul>

<ul>
  <li>Text input -webkit-appearance none: <input type="text" style="color-scheme: dark; -webkit-appearance: none;" value="example text"/></li>
</ul>

<ul>
  <li>TextArea -webkit-appearance none: <textarea style="color-scheme: dark; -webkit-appearance: none;" value="example text">example text</textarea></li>
</ul>

<!-- hover -->
<ul>
  <li>Text hover: <input type="text" style="color-scheme: dark" id="hoverTarget" value="example text"/></li>
</ul>

<!-- zoom -->
<ul>
  <li>Text zoom: 1.5: <input type="text" style="color-scheme: dark; zoom: 1.5;" value="example text"/></li>
  <li>Text zoom: 4: <input type="text" style="color-scheme: dark; zoom: 4;" value="example text"/></li>
</ul>

<div style="background-color: blue">
  <br>
  <ul>
    <li>Text: <input type="text /" style="color-scheme: dark" value="example text"></li>
  </ul>
  <br>
</div>

<script>

runAfterLayoutAndPaint(function() {
  var target = document.getElementById('hoverTarget');
  hoverOverElement(target);
}, true);

</script>
chromium/third_party/blink/web_tests/virtual/dark-color-scheme/text/input-dark-mode-basic.html
