accent-color-contrast.html | Explore in Territory

<!DOCTYPE html>
<body>
<script>
const colorscheme = `color-scheme: light`;
document.body.style = colorscheme;
const colorschemeDiv = document.createElement('div');
colorschemeDiv.textContent = colorscheme;
document.body.appendChild(colorschemeDiv);

function addColor(color) {
  const div = document.createElement('div');
  document.body.appendChild(div);

  div.style = `accent-color: ${color}; margin: 5px`;

  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.checked = true;
  div.appendChild(checkbox);

  const uncheckedCheckbox = document.createElement('input');
  uncheckedCheckbox.type = 'checkbox';
  uncheckedCheckbox.checked = false;
  div.appendChild(uncheckedCheckbox);

  const disabledCheckbox = document.createElement('input');
  disabledCheckbox.type = 'checkbox';
  disabledCheckbox.checked = true;
  disabledCheckbox.disabled = true;
  div.appendChild(disabledCheckbox);

  const indeterminateCheckbox = document.createElement('input');
  indeterminateCheckbox.type = 'checkbox';
  indeterminateCheckbox.checked = true;
  indeterminateCheckbox.indeterminate = true;
  div.appendChild(indeterminateCheckbox);

  const radio = document.createElement('input');
  radio.type = 'radio';
  radio.checked = true;
  div.appendChild(radio);

  const progress = document.createElement('progress');
  progress.max = 100;
  progress.value = 50;
  div.appendChild(progress);

  const range = document.createElement('input');
  range.type = 'range';
  div.appendChild(range);

  const text = document.createTextNode(`accent-color: ${color} `);
  div.appendChild(text);
}

const numEntries = 18;
addColor('auto');
for (let i = 0; i < numEntries; i++) {
  const brightness = i / (numEntries - 1) * 255;
  addColor(`rgb(${brightness}, ${brightness}, ${brightness})`);
}
</script>
chromium/third_party/blink/web_tests/fast/forms/accent-color/accent-color-contrast.html
