Skip to content

Commit

Permalink
Discriminate between 'has a wpt element' (needs styles) and 'has some…
Browse files Browse the repository at this point in the history 
… tests' (needs script and other stuff), so the CSSWG footer's example <wpt> block only triggers the minimum of other stuff.
  • Loading branch information
@tabatkins
tabatkins committed Jan 14, 2022
1 parent c41a6dc commit 4d354f1
Show file tree
Hide file tree
Showing 91 changed files with 102 additions and 9,545 deletions.
17 changes: 12 additions & 5 deletions bikeshed/wpt/wptElement.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,15 @@ def processWptElements(doc):
pathPrefix = doc.md.wptPathPrefix

atLeastOneElement = False
atLeastOneVisibleTest = False
testData = None
# <wpt> elements
wptElements = findAll("wpt", doc)
seenTestNames = set()
prevEl = None
for el in wptElements:
if atLeastOneElement is False and el.get("hidden") is None:
atLeastOneElement = True
if testData is None:
testData = loadTestData(doc)
testNames = testNamesFromEl(el, pathPrefix=pathPrefix)
Expand All @@ -31,8 +34,8 @@ def processWptElements(doc):
die(f"Couldn't find WPT test '{testName}' - did you misspell something?", el=el)
continue
seenTestNames.add(testName)
if atLeastOneElement is False and el.get("hidden") is None:
atLeastOneElement = True
if atLeastOneVisibleTest is False and el.get("hidden") is None:
atLeastOneVisibleTest = True
if el.get("hidden") is not None:
removeNode(el)
else:
Expand Down Expand Up @@ -65,6 +68,7 @@ def processWptElements(doc):
die(f"Couldn't find any tests with the path prefix '{pathPrefix}'.")
return
atLeastOneElement = True
atLeastOneVisibleTest = True
createHTML(doc, wptRestElements[0], prefixedNames, testData)
warn(
"<wpt-rest> is intended for debugging only. Move the tests to <wpt> elements next to what they're testing."
Expand All @@ -75,7 +79,7 @@ def processWptElements(doc):
testData = loadTestData(doc)
checkForOmittedTests(pathPrefix, testData, seenTestNames)

if atLeastOneElement:
if atLeastOneVisibleTest:
if pathPrefix is None:
pathPrefix = commonPathPrefix(seenTestNames)
if not pathPrefix.startswith("/"):
Expand All @@ -91,9 +95,12 @@ def processWptElements(doc):
)
)

if atLeastOneElement and doc.md.wptDisplay != "none":
if doc.md.wptDisplay != "none" and atLeastOneElement:
# Empty <wpt> blocks still need styles
doc.extraStyles["style-wpt"] = wptStyle
doc.extraScripts["script-wpt"] = getWptScript(pathPrefix)
if atLeastOneVisibleTest:
# But I only need script if there's actually some tests.
doc.extraScripts["script-wpt"] = getWptScript(pathPrefix)


def createHTML(doc, blockEl, testNames, testData, title=None, titleLang=None, titleDir=None):
Expand Down
107 changes: 1 addition & 106 deletions tests/github/w3c/csswg-drafts/css-2015/Overview.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1790,109 +1790,4 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
}

});
</script>
<script>/* script-wpt */
let wptPath = "/";
"use strict";

document.addEventListener("DOMContentLoaded", async ()=>{
if(wptPath == "/") return;

const runsUrl = "https://wpt.fyi/api/runs?label=master&label=stable&max-count=1&product=chrome&product=firefox&product=safari&product=edge";
const runs = await (await fetch(runsUrl)).json();

const testResults = await( await fetch("https://wpt.fyi/api/search", {
method:"POST",
headers:{
"Content-Type":"application/json",
},
body: JSON.stringify({
"run_ids": runs.map(x=>x.id),
"query": {"path": wptPath},
})
})).json();

const browsers = runs.map(x=>({name:x.browser_name, version:x.browser_version, passes:0, total: 0}));
const resultsFromPath = new Map(testResults.results.map(result=>{
const testPath = result.test;
const passes = result.legacy_status.map(x=>[x.passes, x.total]);
return [testPath, passes];
}));
document.querySelectorAll(".wpt-name").forEach(nameEl=>{
const passData = resultsFromPath.get("/" + nameEl.getAttribute("title"));
const numTests = passData[0][1];
if(numTests > 1) {
nameEl.insertAdjacentElement("beforeend",
el("small", {}, ` (${numTests} tests)`));
}
if(passData == undefined) return;
passData.forEach((p,i) => {
browsers[i].passes += p[0];
browsers[i].total += p[1];
})
const resultsEl = el("span",{"class":"wpt-results"},
...passData.map((p,i) => el("span",
{
"title": `${browsers[i].name} ${p[0]}/${p[1]}`,
"class": "wpt-result",
"style": `background: conic-gradient(forestgreen ${p[0]/p[1]*360}deg, darkred 0deg);`,
})),
);
nameEl.insertAdjacentElement("afterend", resultsEl);
});
const overview = document.querySelector(".wpt-overview");
if(overview) {
overview.appendChild(el('ul',{}, ...browsers.map(formatWptResult)));
document.head.appendChild(el('style', {},
`.wpt-overview ul { display: flex; flex-flow: row wrap; gap: .2em; justify-content: start; list-style: none; padding: 0; margin: 0;}
.wpt-overview li { padding: .25em 1em; color: black; text-align: center; }
.wpt-overview img { height: 1.5em; height: max(1.5em, 32px); background: transparent; }
.wpt-overview .browser { font-weight: bold; }
.wpt-overview .passes-none { background: #e57373; }
.wpt-overview .passes-hardly { background: #ffb74d; }
.wpt-overview .passes-a-few { background: #ffd54f; }
.wpt-overview .passes-half { background: #fff176; }
.wpt-overview .passes-lots { background: #dce775; }
.wpt-overview .passes-most { background: #aed581; }
.wpt-overview .passes-all { background: #81c784; }`));
}
});
function el(name, attrs, ...content) {
const x = document.createElement(name);
for(const [k,v] of Object.entries(attrs)) {
x.setAttribute(k, v);
}
for(let child of content) {
if(typeof child == "string") child = document.createTextNode(child);
try {
x.appendChild(child);
} catch(e) { console.log({x, child}); }
}
return x;
}
function formatWptResult({name, version, passes, total}) {
const passRate = passes/total;
let passClass = "";
if(passRate == 0) passClass = "passes-none";
else if(passRate < .2) passClass = "passes-hardly";
else if(passRate < .4) passClass = "passes-a-few";
else if(passRate < .6) passClass = "passes-half";
else if(passRate < .8) passClass = "passes-lots";
else if(passRate < 1) passClass = "passes-most";
else passClass = "passes-all";

name = name[0].toUpperCase() + name.slice(1);
const shortVersion = /^\d+/.exec(version);
const icon = []

if(name == "Chrome") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/chrome-dev_64x64.png"}));
if(name == "Edge") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/edge-dev_64x64.png"}));
if(name == "Safari") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/safari-preview_64x64.png"}));
if(name == "Firefox") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/firefox-nightly_64x64.png"}));

return el('li', {"class":passClass},
el('nobr', {'class':'browser'}, ...icon, ` ${name} ${shortVersion}`),
el('br', {}),
el('nobr', {'class':'pass-rate'}, `${passes}/${total}`)
);
}</script>
</script>
107 changes: 1 addition & 106 deletions tests/github/w3c/csswg-drafts/css-2017/Overview.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5083,109 +5083,4 @@ <h3 class="no-num no-ref heading settled" id="informative"><span class="content"
}

});
</script>
<script>/* script-wpt */
let wptPath = "/";
"use strict";

document.addEventListener("DOMContentLoaded", async ()=>{
if(wptPath == "/") return;

const runsUrl = "https://wpt.fyi/api/runs?label=master&label=stable&max-count=1&product=chrome&product=firefox&product=safari&product=edge";
const runs = await (await fetch(runsUrl)).json();

const testResults = await( await fetch("https://wpt.fyi/api/search", {
method:"POST",
headers:{
"Content-Type":"application/json",
},
body: JSON.stringify({
"run_ids": runs.map(x=>x.id),
"query": {"path": wptPath},
})
})).json();

const browsers = runs.map(x=>({name:x.browser_name, version:x.browser_version, passes:0, total: 0}));
const resultsFromPath = new Map(testResults.results.map(result=>{
const testPath = result.test;
const passes = result.legacy_status.map(x=>[x.passes, x.total]);
return [testPath, passes];
}));
document.querySelectorAll(".wpt-name").forEach(nameEl=>{
const passData = resultsFromPath.get("/" + nameEl.getAttribute("title"));
const numTests = passData[0][1];
if(numTests > 1) {
nameEl.insertAdjacentElement("beforeend",
el("small", {}, ` (${numTests} tests)`));
}
if(passData == undefined) return;
passData.forEach((p,i) => {
browsers[i].passes += p[0];
browsers[i].total += p[1];
})
const resultsEl = el("span",{"class":"wpt-results"},
...passData.map((p,i) => el("span",
{
"title": `${browsers[i].name} ${p[0]}/${p[1]}`,
"class": "wpt-result",
"style": `background: conic-gradient(forestgreen ${p[0]/p[1]*360}deg, darkred 0deg);`,
})),
);
nameEl.insertAdjacentElement("afterend", resultsEl);
});
const overview = document.querySelector(".wpt-overview");
if(overview) {
overview.appendChild(el('ul',{}, ...browsers.map(formatWptResult)));
document.head.appendChild(el('style', {},
`.wpt-overview ul { display: flex; flex-flow: row wrap; gap: .2em; justify-content: start; list-style: none; padding: 0; margin: 0;}
.wpt-overview li { padding: .25em 1em; color: black; text-align: center; }
.wpt-overview img { height: 1.5em; height: max(1.5em, 32px); background: transparent; }
.wpt-overview .browser { font-weight: bold; }
.wpt-overview .passes-none { background: #e57373; }
.wpt-overview .passes-hardly { background: #ffb74d; }
.wpt-overview .passes-a-few { background: #ffd54f; }
.wpt-overview .passes-half { background: #fff176; }
.wpt-overview .passes-lots { background: #dce775; }
.wpt-overview .passes-most { background: #aed581; }
.wpt-overview .passes-all { background: #81c784; }`));
}
});
function el(name, attrs, ...content) {
const x = document.createElement(name);
for(const [k,v] of Object.entries(attrs)) {
x.setAttribute(k, v);
}
for(let child of content) {
if(typeof child == "string") child = document.createTextNode(child);
try {
x.appendChild(child);
} catch(e) { console.log({x, child}); }
}
return x;
}
function formatWptResult({name, version, passes, total}) {
const passRate = passes/total;
let passClass = "";
if(passRate == 0) passClass = "passes-none";
else if(passRate < .2) passClass = "passes-hardly";
else if(passRate < .4) passClass = "passes-a-few";
else if(passRate < .6) passClass = "passes-half";
else if(passRate < .8) passClass = "passes-lots";
else if(passRate < 1) passClass = "passes-most";
else passClass = "passes-all";

name = name[0].toUpperCase() + name.slice(1);
const shortVersion = /^\d+/.exec(version);
const icon = []

if(name == "Chrome") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/chrome-dev_64x64.png"}));
if(name == "Edge") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/edge-dev_64x64.png"}));
if(name == "Safari") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/safari-preview_64x64.png"}));
if(name == "Firefox") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/firefox-nightly_64x64.png"}));

return el('li', {"class":passClass},
el('nobr', {'class':'browser'}, ...icon, ` ${name} ${shortVersion}`),
el('br', {}),
el('nobr', {'class':'pass-rate'}, `${passes}/${total}`)
);
}</script>
</script>
107 changes: 1 addition & 106 deletions tests/github/w3c/csswg-drafts/css-2018/Overview.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5473,109 +5473,4 @@ <h3 class="no-num no-ref heading settled" id="informative"><span class="content"
}

});
</script>
<script>/* script-wpt */
let wptPath = "/";
"use strict";

document.addEventListener("DOMContentLoaded", async ()=>{
if(wptPath == "/") return;

const runsUrl = "https://wpt.fyi/api/runs?label=master&label=stable&max-count=1&product=chrome&product=firefox&product=safari&product=edge";
const runs = await (await fetch(runsUrl)).json();

const testResults = await( await fetch("https://wpt.fyi/api/search", {
method:"POST",
headers:{
"Content-Type":"application/json",
},
body: JSON.stringify({
"run_ids": runs.map(x=>x.id),
"query": {"path": wptPath},
})
})).json();

const browsers = runs.map(x=>({name:x.browser_name, version:x.browser_version, passes:0, total: 0}));
const resultsFromPath = new Map(testResults.results.map(result=>{
const testPath = result.test;
const passes = result.legacy_status.map(x=>[x.passes, x.total]);
return [testPath, passes];
}));
document.querySelectorAll(".wpt-name").forEach(nameEl=>{
const passData = resultsFromPath.get("/" + nameEl.getAttribute("title"));
const numTests = passData[0][1];
if(numTests > 1) {
nameEl.insertAdjacentElement("beforeend",
el("small", {}, ` (${numTests} tests)`));
}
if(passData == undefined) return;
passData.forEach((p,i) => {
browsers[i].passes += p[0];
browsers[i].total += p[1];
})
const resultsEl = el("span",{"class":"wpt-results"},
...passData.map((p,i) => el("span",
{
"title": `${browsers[i].name} ${p[0]}/${p[1]}`,
"class": "wpt-result",
"style": `background: conic-gradient(forestgreen ${p[0]/p[1]*360}deg, darkred 0deg);`,
})),
);
nameEl.insertAdjacentElement("afterend", resultsEl);
});
const overview = document.querySelector(".wpt-overview");
if(overview) {
overview.appendChild(el('ul',{}, ...browsers.map(formatWptResult)));
document.head.appendChild(el('style', {},
`.wpt-overview ul { display: flex; flex-flow: row wrap; gap: .2em; justify-content: start; list-style: none; padding: 0; margin: 0;}
.wpt-overview li { padding: .25em 1em; color: black; text-align: center; }
.wpt-overview img { height: 1.5em; height: max(1.5em, 32px); background: transparent; }
.wpt-overview .browser { font-weight: bold; }
.wpt-overview .passes-none { background: #e57373; }
.wpt-overview .passes-hardly { background: #ffb74d; }
.wpt-overview .passes-a-few { background: #ffd54f; }
.wpt-overview .passes-half { background: #fff176; }
.wpt-overview .passes-lots { background: #dce775; }
.wpt-overview .passes-most { background: #aed581; }
.wpt-overview .passes-all { background: #81c784; }`));
}
});
function el(name, attrs, ...content) {
const x = document.createElement(name);
for(const [k,v] of Object.entries(attrs)) {
x.setAttribute(k, v);
}
for(let child of content) {
if(typeof child == "string") child = document.createTextNode(child);
try {
x.appendChild(child);
} catch(e) { console.log({x, child}); }
}
return x;
}
function formatWptResult({name, version, passes, total}) {
const passRate = passes/total;
let passClass = "";
if(passRate == 0) passClass = "passes-none";
else if(passRate < .2) passClass = "passes-hardly";
else if(passRate < .4) passClass = "passes-a-few";
else if(passRate < .6) passClass = "passes-half";
else if(passRate < .8) passClass = "passes-lots";
else if(passRate < 1) passClass = "passes-most";
else passClass = "passes-all";

name = name[0].toUpperCase() + name.slice(1);
const shortVersion = /^\d+/.exec(version);
const icon = []

if(name == "Chrome") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/chrome-dev_64x64.png"}));
if(name == "Edge") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/edge-dev_64x64.png"}));
if(name == "Safari") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/safari-preview_64x64.png"}));
if(name == "Firefox") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/firefox-nightly_64x64.png"}));

return el('li', {"class":passClass},
el('nobr', {'class':'browser'}, ...icon, ` ${name} ${shortVersion}`),
el('br', {}),
el('nobr', {'class':'pass-rate'}, `${passes}/${total}`)
);
}</script>
</script>
Loading

0 comments on commit 4d354f1

Please sign in to comment.