Blitz - WPT: progress-base-appearance-rendering.tentative.html

wpt / css / css-forms / progress-base-appearance-rendering.tentative.html

/css/css-forms/progress-base-appearance-rendering.tentative.html

<!DOCTYPE html>
<link rel=author href="mailto:lwarlow@igalia.com">
<link rel=help href="https://drafts.csswg.org/css-forms-1">
<link rel=match href="progress-base-appearance-rendering-ref.tentative.html">

<section>
  <progress value="50" max="100" style="appearance: base"></progress>

  <progress style="appearance: base"></progress>
</section>

<style>
body {
  font-family: monospace;
  background-color: black;
  color: green;
}

section {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
</style>

/css/css-forms/progress-base-appearance-rendering-ref.tentative.html

<!DOCTYPE html>
<section>
  <div class="progress"><div class="track"><div class="fill"></div></div></div>

  <div class="progress indeterminate"><div class="track"><div class="fill"></div></div></div>
</section>

<style>
body {
  font-family: monospace;
  background-color: black;
  color: green;
}

section {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.progress {
  box-sizing: border-box;
  background-color: transparent;
  width: 100%;
}

.track {
  background-color: transparent;
  border: 1px solid green;
  height: 1em;
}

.fill {
  height: 100%;
  background-color: green;
  width: 50%;
}

.indeterminate .fill {
  width: 0;
}
</style>