third_party/WebKit/LayoutTests/fast/dom/HTMLProgressElement/progress-bar-value-pseudo-element.html

   1 <html>
   2 <head><script>
   3 window.onload = function() {
   4     document.getElementById("removingAppearanceDynamically").setAttribute("style", "-webkit-appearance: none;");
   5     document.getElementById("givingProgressStyleDynamically").setAttribute("style", "background-color: lightblue;");
   6 }
   7 </script>
   8 <style>
   9 .styled { -webkit-appearance: none; }
  10 .transparent-bar::-webkit-progress-bar { background-color: transparent; }
  11 .transparent-value::-webkit-progress-value { background-color: transparent; }
  12 .progress-style { border:3px solid #006; background-color: blue; }
  13 .bar-style::-webkit-progress-bar { background-color: red; border:3px solid #900; }
  14 .value-style::-webkit-progress-value { background-color: yellow; border:3px solid #990; }
  15 </style>
  16 </head>
  17 <body>
  18   <ul>
  19     <li>Default style: <progress value=0.1 style="-webkit-appearance: none;" ></li>
  20     <li>Progress style: <progress class="styled transparent-bar progress-style" value=0.2>
  21     <li>Progress style (size): <progress class="styled" style="width: 300px; height: 30px;" value=0.3>
  22     <li>Bar style: <progress class="styled bar-style" value=0.4>
  23     <li>Value style: <progress class="styled value-style" value=0.5>
  24     <li>Styling for all three elements: <progress class="styled progress-style bar-style value-style" style="height:30px" value=0.6>
  25     <li>Removing appearance dynamically: <progress id="removingAppearanceDynamically" value=0.7>
  26     <li>Giving progress style change dynamically: <progress id="givingProgressStyleDynamically" class="styled transparent-bar" value=0.8>
  27   </ul>
  28 </body>
  29 </html>