This modifies the WPT page to show information about subtests

This is a companion of servo/internal-wpt-dashboard#56

Signed-off-by: Manuel Rego Casasnovas <[email protected]>

Author: mrego

assets/js/load-chart.js

@@ -3,7 +3,7 @@
 google.charts.load('current', { packages: ['corechart', 'line'] })
 google.charts.setOnLoadCallback(setupChart)
 
-const fetchData = fetch('https://wpt.servo.org/scores.json')
+const fetchData = fetch('/js/scores.json')
 const embed = location.search === '?embed'
 let dark_mode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
 
@@ -38,7 +38,8 @@ function parseDateString (date) {
 function toolTip (date, wpt_sha, servo_version, score, engine) {
     return `
         <b>${formatDate(date)}</b></br>
-        Score: <b>${score / 10}</b></br>
+        Score: <b>${Math.floor(100 * score.total_score / score.total_tests)}%</b></br>
+        Subtests: <b>${Math.floor(100 * score.total_subtests_passed / score.total_subtests )}%</b></br>
         WPT: ${wpt_sha}</br>
         Servo (${engine}): ${servo_version}
     `
@@ -129,7 +130,9 @@ function setupChart () {
         table.addColumn('date', 'runOn')
 
         options.series.push({ color: dark_mode ? '#CC9933' : '#3366CC' })
-        table.addColumn('number', 'Servo')
+        table.addColumn('number', 'Score')
+        table.addColumn({ type: 'string', role: 'tooltip', p: { html: true } })
+        table.addColumn('number', 'Subtests')
         table.addColumn({ type: 'string', role: 'tooltip', p: { html: true } })
 
         for (const scores_for_run of all_scores.scores) {
@@ -141,7 +144,9 @@ function setupChart () {
             }
             const row = [
                 date,
-                area_score / 1000,
+                area_score.total_score / area_score.total_tests,
+                toolTip(date, wpt_sha, browser_version, area_score, 'Servo'),
+                area_score.total_subtests_passed / area_score.total_subtests,
                 toolTip(date, wpt_sha, browser_version, area_score, 'Servo')
             ]
             table.addRow(row)
@@ -161,12 +166,15 @@ function setupChart () {
         removeChildren(score_table)
 
         for (const [idx, area] of scores.area_keys.entries()) {
-            const recent_score = scores.scores[scores.scores.length - 1]
+            const area_score = scores.scores[scores.scores.length - 1][idx + AREA_SCORE_OFFSET]
+            const score = Math.floor(100 * area_score.total_score / area_score.total_tests)
+            const subtests = Math.floor(100 * area_score.total_subtests_passed / area_score.total_subtests)
             score_table.insertAdjacentHTML(
                 'beforeend',
                 `<tr class="${idx % 2 ? 'odd' : 'even'}">
                     <td>${scores.focus_areas[area]}</td>
-                    <td class="score">${String(recent_score[idx + AREA_SCORE_OFFSET] / 10).padEnd(4, '.0')}%</td>
+                    <td class="score">${String(score).padEnd(4, '.0')}%</td>
+                    <td class="score">(${area_score.total_subtests_passed}/${area_score.total_subtests}) ${String(subtests).padEnd(4, '.0')}%</td>
                 </tr>`
             )
         }

wpt.md

@@ -28,12 +28,16 @@ title: WPT Pass Rates
       padding: 5px 10px;
   }
 
+  #score-table th {
+      text-align: right;
+  }
   #score-table th:nth-child(1) {
       text-align: left;
   }
 
   #score-table-body .score {
       text-align: right;
+      font-family: "Fira Mono", monospace;
   }
 
   #score-explanation {
@@ -81,17 +85,14 @@ The chart below tracks our pass rates in several *focus areas* of the [Web Platf
     </div>
     <div id="servo-chart"></div>
     <table id="score-table">
-        <thead id="score-table-header"><tr><th>Test Suite</th><th>Score</th></tr></thead>
+        <thead id="score-table-header"><tr><th>Test Suite</th><th>Score</th><th>Subtests</th></tr></thead>
         <tbody id="score-table-body"></tbody>
     </table>
     <p id="score-explanation">
-        Scores are calculated as percentages of total <b>enabled</b>
-        tests within the suite that pass. A passing test with no
-        subtests gets a score of 1 while a test with subtests gets a
-        score between 0 and 1 representing the fraction of passing
-        subtests within that test. This is different from the
-        percentages on wpt.fyi which is calculated by giving equal
-        weight to both top-level tests and subtests.
+        There results are calculated as percentages of total <b>enabled</b> tests within the suite that pass.<br>
+        <b>Scores</b> are computed as follows, a passing test with no subtests gets a score of 1
+        while a test with subtests gets a score between 0 and 1 representing the fraction of passing subtests within that test.<br>
+        <b>Subtests</b> are calculated by given equal weight to both top-level tests and subtests.
     </p>
 </div>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>