Use progress element (#233)

WebKit · Jun 19, 2023 · 42a7b3b · 42a7b3b
1 parent d50264b
commit 42a7b3b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -41,7 +41,7 @@
                 </a>
                 <div id="testContainer"></div>
                 <div id="progress">
-                    <div id="progress-completed"></div>
+                    <progress aria-label="Progress" id="progress-completed"></progress>
                 </div>
                 <div id="info">
                     <div id="info-label"></div>

diff --git a/resources/main.css b/resources/main.css
@@ -307,7 +307,6 @@ button.show-about {
     left: 60px;
     right: 60px;
     height: 6px;
-    background-color: var(--inactive-color);
     border-left: 6px solid var(--background);
     border-right: 6px solid var(--background);
 }
@@ -317,7 +316,17 @@ button.show-about {
     top: 0;
     left: 0;
     height: 6px;
-    width: 0;
+    width: 100%;
+    appearance: none;
+    border: none;
+    background-color: var(--inactive-color);
+}
+
+#progress-completed::-webkit-progress-value {
+    background-color: var(--foreground);
+}
+
+#progress-completed::-moz-progress-bar {
     background-color: var(--foreground);
 }
 

diff --git a/resources/main.mjs b/resources/main.mjs
@@ -60,6 +60,7 @@ class MainBenchmarkClient {
             return testsCount + suite.tests.length;
         }, 0);
         this.stepCount = params.iterationCount * totalSubtestsCount;
+        this._progressCompleted.max = this.stepCount;
         this.suitesCount = enabledSuites.length;
         const runner = new BenchmarkRunner(Suites, this);
         runner.runMultipleIterations(params.iterationCount);
@@ -79,7 +80,7 @@ class MainBenchmarkClient {
 
     didRunTest() {
         this._finishedTestCount++;
-        this._progressCompleted.style.width = `${(this._finishedTestCount * 100) / this.stepCount}%`;
+        this._progressCompleted.value = this._finishedTestCount;
     }
 
     didRunSuites(measuredValues) {