We should add a new 'progress-bar' value to '-webkit-appearance' in the style system, and make the existing 'progressbar' value an alias for 'progress-bar'. We should also replace any existing 'progressbar' values in our UA sheets with 'progress-bar'. In particular, the default value for <progress>. Chrome/Safari uses '-webkit-appearance:progress-bar' on <progress>. Setting '-webkit-appearance:none' removes the theme and renders a grey background instead. Setting display:inline appears to work. display:contents behaves as display:none. Edge, on the other hand, uses '-webkit-appearance:none' by default on <progress>. Setting display:inline appears to work. No UA renders the <progress> contents in any case.

Keep our old 'progressbar' as an alias for now, but unship 'progresschunk' by restricting it to UA/chrome sheets only. Unship 'progresschunk-vertical' by removing it since it's not used internally for anything.

Comment on attachment 9023256 [details] [diff] [review] Add -webkit-appearance:progress-bar and make that the default for <progress> for compatibility with other UAs. Review of attachment 9023256 [details] [diff] [review]: ----------------------------------------------------------------- Looks good.

Pushed by mpalmgren@mozilla.com: https://hg.mozilla.org/integration/mozilla-inbound/rev/55a4f0f8ceaa Add -webkit-appearance:progress-bar and make that the default for <progress> for compatibility with other UAs. r=jwatt

Note to MDN writers: I've added a note to the Fx65 rel notes to cover this: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/65#CSS As for the docs, this should be a simple matter of adding the value to the appearance reference page and the compat data.

Use the testcase from comment 0 for verifying this issue.