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

@@ -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>${score.per_mille / 10}</b></br>
+        Subtests: <b>${score.per_mille_subtests / 10}%</b></br>
         WPT: ${wpt_sha}</br>
         Servo (${engine}): ${servo_version}
     `
@@ -129,7 +130,8 @@ function setupChart () {
         table.addColumn('date', 'runOn')
 
         options.series.push({ color: dark_mode ? '#CC9933' : '#3366CC' })
-        table.addColumn('number', 'Servo')
+        table.addColumn('number', 'Score')
+        table.addColumn('number', 'Subtests')
         table.addColumn({ type: 'string', role: 'tooltip', p: { html: true } })
 
         for (const scores_for_run of all_scores.scores) {
@@ -141,7 +143,8 @@ function setupChart () {
             }
             const row = [
                 date,
-                area_score / 1000,
+                area_score.per_mille / 1000,
+                area_score.per_mille_subtests / 1000,
                 toolTip(date, wpt_sha, browser_version, area_score, 'Servo')
             ]
             table.addRow(row)
@@ -166,7 +169,8 @@ function setupChart () {
                 '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(recent_score[idx + AREA_SCORE_OFFSET].per_mille / 10).padEnd(4, '.0')}</td>
+                    <td class="score">(${String(recent_score[idx + AREA_SCORE_OFFSET].total_subtests_passed)}/${String(recent_score[idx + AREA_SCORE_OFFSET].total_subtests)}) ${String(recent_score[idx + AREA_SCORE_OFFSET].per_mille_subtests / 10).padEnd(4, '.0')}% </td>
                 </tr>`
             )
         }

wpt.md

@@ -28,6 +28,9 @@ title: WPT Pass Rates
       padding: 5px 10px;
   }
 
+  #score-table th {
+      text-align: right;
+  }
   #score-table th:nth-child(1) {
       text-align: left;
   }
@@ -81,17 +84,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>