Skip to content

Commit 081ba6a

Browse files
mregomukilan
andcommitted
This modifies the WPT page to show information about subtests
This is a companion of servo/internal-wpt-dashboard#56 Co-authored-by: Mukilan Thiyagarajan <[email protected]> Signed-off-by: Manuel Rego Casasnovas <[email protected]>
1 parent 0a34f95 commit 081ba6a

File tree

3 files changed

+64
-39
lines changed

3 files changed

+64
-39
lines changed

assets/js/load-chart.js

Lines changed: 8 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ function parseDateString (date) {
3838
function toolTip (date, wpt_sha, servo_version, score, engine) {
3939
return `
4040
<b>${formatDate(date)}</b></br>
41-
Score: <b>${score / 10}</b></br>
41+
Score: <b>${Math.floor(1000 * score.total_score / score.total_tests) / 10}%</b></br>
42+
Subtests: <b>${Math.floor(1000 * score.total_subtests_passed / score.total_subtests) / 10}%</b></br>
4243
WPT: ${wpt_sha}</br>
4344
Servo (${engine}): ${servo_version}
4445
`
@@ -129,7 +130,9 @@ function setupChart () {
129130
table.addColumn('date', 'runOn')
130131

131132
options.series.push({ color: dark_mode ? '#CC9933' : '#3366CC' })
132-
table.addColumn('number', 'Servo')
133+
table.addColumn('number', 'Score')
134+
table.addColumn({ type: 'string', role: 'tooltip', p: { html: true } })
135+
table.addColumn('number', 'Subtests')
133136
table.addColumn({ type: 'string', role: 'tooltip', p: { html: true } })
134137

135138
for (const scores_for_run of all_scores.scores) {
@@ -141,37 +144,16 @@ function setupChart () {
141144
}
142145
const row = [
143146
date,
144-
area_score / 1000,
147+
area_score.total_score / area_score.total_tests,
148+
toolTip(date, wpt_sha, browser_version, area_score, 'Servo'),
149+
area_score.total_subtests_passed / area_score.total_subtests,
145150
toolTip(date, wpt_sha, browser_version, area_score, 'Servo')
146151
]
147152
table.addRow(row)
148153
}
149154
chart.draw(table, options)
150155
}
151156

152-
function removeChildren (parent) {
153-
while (parent.firstChild) {
154-
parent.removeChild(parent.firstChild)
155-
}
156-
return parent
157-
}
158-
159-
function update_table (scores) {
160-
const score_table = document.getElementById('score-table-body')
161-
removeChildren(score_table)
162-
163-
for (const [idx, area] of scores.area_keys.entries()) {
164-
const recent_score = scores.scores[scores.scores.length - 1]
165-
score_table.insertAdjacentHTML(
166-
'beforeend',
167-
`<tr class="${idx % 2 ? 'odd' : 'even'}">
168-
<td>${scores.focus_areas[area]}</td>
169-
<td class="score">${String(recent_score[idx + AREA_SCORE_OFFSET] / 10).padEnd(4, '.0')}%</td>
170-
</tr>`
171-
)
172-
}
173-
}
174-
175157
fetchData
176158
.then(resp => resp.json())
177159
.then(scores => {
@@ -213,7 +195,6 @@ function setupChart () {
213195
}
214196
area_dropdown.value = scores.area_keys[0]
215197
period_dropdown.value = Object.keys(periodRanges)[4]
216-
update_table(scores)
217198
update_chart()
218199
})
219200
}

assets/js/load-table.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const fetchData = fetch('https://wpt.servo.org/scores-last-run.json')
2+
3+
const AREA_SCORE_OFFSET = 3
4+
5+
function removeChildren (parent) {
6+
while (parent.firstChild) {
7+
parent.removeChild(parent.firstChild)
8+
}
9+
return parent
10+
}
11+
12+
function update_table (scores) {
13+
const score_table = document.getElementById('score-table-body')
14+
removeChildren(score_table)
15+
16+
for (const [idx, area] of scores.area_keys.entries()) {
17+
const area_score = scores.scores_last_run[idx + AREA_SCORE_OFFSET]
18+
const score = Math.floor(1000 * area_score.total_score / area_score.total_tests) / 10
19+
const subtests = Math.floor(1000 * area_score.total_subtests_passed / area_score.total_subtests) / 10
20+
score_table.insertAdjacentHTML(
21+
'beforeend',
22+
`<tr class="${idx % 2 ? 'odd' : 'even'}">
23+
<td>${scores.focus_areas[area]}</td>
24+
<td class="score">${String(score).padEnd(4, '.0')}%</td>
25+
<td class="score">(${area_score.total_subtests_passed}/${area_score.total_subtests}) ${String(subtests).padEnd(4, '.0')}%</td>
26+
</tr>`
27+
)
28+
}
29+
}
30+
31+
fetchData
32+
.then(resp => resp.json())
33+
.then(scores => {
34+
update_table(scores)
35+
})
36+

wpt.md

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ title: WPT Pass Rates
1515
padding: 10px;
1616
}
1717

18+
#score-table-container {
19+
overflow-x: auto;
20+
}
21+
1822
#score-table {
1923
width: 100%;
2024
}
@@ -28,12 +32,16 @@ title: WPT Pass Rates
2832
padding: 5px 10px;
2933
}
3034

35+
#score-table th {
36+
text-align: right;
37+
}
3138
#score-table th:nth-child(1) {
3239
text-align: left;
3340
}
3441

3542
#score-table-body .score {
3643
text-align: right;
44+
font-family: "Fira Mono", monospace;
3745
}
3846

3947
#score-explanation {
@@ -80,19 +88,19 @@ The chart below tracks our pass rates in several *focus areas* of the [Web Platf
8088
</div>
8189
</div>
8290
<div id="servo-chart"></div>
83-
<table id="score-table">
84-
<thead id="score-table-header"><tr><th>Test Suite</th><th>Score</th></tr></thead>
85-
<tbody id="score-table-body"></tbody>
86-
</table>
91+
<figure id="score-table-container">
92+
<table id="score-table">
93+
<thead id="score-table-header"><tr><th>Test Suite</th><th>Score</th><th>Subtests</th></tr></thead>
94+
<tbody id="score-table-body"></tbody>
95+
</table>
96+
</figure>
8797
<p id="score-explanation">
88-
Scores are calculated as percentages of total <b>enabled</b>
89-
tests within the suite that pass. A passing test with no
90-
subtests gets a score of 1 while a test with subtests gets a
91-
score between 0 and 1 representing the fraction of passing
92-
subtests within that test. This is different from the
93-
percentages on wpt.fyi which is calculated by giving equal
94-
weight to both top-level tests and subtests.
98+
The results are calculated as percentages of total <b>enabled</b> tests within the suite that pass.<br>
99+
<b>Scores</b> are computed as follows: a passing test with no subtests gets a score of 1
100+
while a test with subtests gets a score between 0 and 1 representing the fraction of passing subtests within that test.<br>
101+
<b>Subtests</b> are calculated by giving equal weight to both top-level tests and subtests.
95102
</p>
96103
</div>
97104
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
98-
<script type="text/javascript" src="{{ '/js/load-chart.js' | url }}"></script>
105+
<script type="text/javascript" src="{{ '/js/load-table.js' | url }}"></script>
106+
<script type="module" src="{{ '/js/load-chart.js' | url }}"></script>

0 commit comments

Comments
 (0)