Luke Warlow
8fbaf38d7b
Automatic update from web-platform-tests Add base appearance UA-styles for progress This adds changes to the UA stylesheet for progress elements when in base appearance mode. Future patches will adjust the pseudo-elements that apply. These changes are gated behind the AppearanceBase flag. See https://drafts.csswg.org/css-forms-1 Bug: 450139531 Change-Id: I8a218b67dcfee76c18972c06d894b237dab407cb Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7627425 Reviewed-by: Joey Arhar <jarhar@chromium.org> Commit-Queue: Luke <lwarlow@igalia.com> Cr-Commit-Position: refs/heads/main@{#1594591} -- wpt-commits: d15b0ddff3a5dc5adfe370f22a364daf6744720d wpt-pr: 58289
43 lines
658 B
HTML
43 lines
658 B
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>
|