Skip to content

Commit 4d354f1

Browse files
tabatkinstabatkins
committed
Discriminate between 'has a wpt element' (needs styles) and 'has some tests' (needs script and other stuff), so the CSSWG footer's example <wpt> block only triggers the minimum of other stuff.
1 parent c41a6dc commit 4d354f1

File tree

91 files changed

+102
-9545
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

91 files changed

+102
-9545
lines changed

‎bikeshed/wpt/wptElement.py

+12-5
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,15 @@ def processWptElements(doc):
1717
pathPrefix = doc.md.wptPathPrefix
1818

1919
atLeastOneElement = False
20+
atLeastOneVisibleTest = False
2021
testData = None
2122
# <wpt> elements
2223
wptElements = findAll("wpt", doc)
2324
seenTestNames = set()
2425
prevEl = None
2526
for el in wptElements:
27+
if atLeastOneElement is False and el.get("hidden") is None:
28+
atLeastOneElement = True
2629
if testData is None:
2730
testData = loadTestData(doc)
2831
testNames = testNamesFromEl(el, pathPrefix=pathPrefix)
@@ -31,8 +34,8 @@ def processWptElements(doc):
3134
die(f"Couldn't find WPT test '{testName}' - did you misspell something?", el=el)
3235
continue
3336
seenTestNames.add(testName)
34-
if atLeastOneElement is False and el.get("hidden") is None:
35-
atLeastOneElement = True
37+
if atLeastOneVisibleTest is False and el.get("hidden") is None:
38+
atLeastOneVisibleTest = True
3639
if el.get("hidden") is not None:
3740
removeNode(el)
3841
else:
@@ -65,6 +68,7 @@ def processWptElements(doc):
6568
die(f"Couldn't find any tests with the path prefix '{pathPrefix}'.")
6669
return
6770
atLeastOneElement = True
71+
atLeastOneVisibleTest = True
6872
createHTML(doc, wptRestElements[0], prefixedNames, testData)
6973
warn(
7074
"<wpt-rest> is intended for debugging only. Move the tests to <wpt> elements next to what they're testing."
@@ -75,7 +79,7 @@ def processWptElements(doc):
7579
testData = loadTestData(doc)
7680
checkForOmittedTests(pathPrefix, testData, seenTestNames)
7781

78-
if atLeastOneElement:
82+
if atLeastOneVisibleTest:
7983
if pathPrefix is None:
8084
pathPrefix = commonPathPrefix(seenTestNames)
8185
if not pathPrefix.startswith("/"):
@@ -91,9 +95,12 @@ def processWptElements(doc):
9195
)
9296
)
9397

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

98105

99106
def createHTML(doc, blockEl, testNames, testData, title=None, titleLang=None, titleDir=None):

‎tests/github/w3c/csswg-drafts/css-2015/Overview.html

+1-106
Original file line numberDiff line numberDiff line change
@@ -1790,109 +1790,4 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
17901790
}
17911791

17921792
});
1793-
</script>
1794-
<script>/* script-wpt */
1795-
let wptPath = "/";
1796-
"use strict";
1797-
1798-
document.addEventListener("DOMContentLoaded", async ()=>{
1799-
if(wptPath == "/") return;
1800-
1801-
const runsUrl = "https://wpt.fyi/api/runs?label=master&label=stable&max-count=1&product=chrome&product=firefox&product=safari&product=edge";
1802-
const runs = await (await fetch(runsUrl)).json();
1803-
1804-
const testResults = await( await fetch("https://wpt.fyi/api/search", {
1805-
method:"POST",
1806-
headers:{
1807-
"Content-Type":"application/json",
1808-
},
1809-
body: JSON.stringify({
1810-
"run_ids": runs.map(x=>x.id),
1811-
"query": {"path": wptPath},
1812-
})
1813-
})).json();
1814-
1815-
const browsers = runs.map(x=>({name:x.browser_name, version:x.browser_version, passes:0, total: 0}));
1816-
const resultsFromPath = new Map(testResults.results.map(result=>{
1817-
const testPath = result.test;
1818-
const passes = result.legacy_status.map(x=>[x.passes, x.total]);
1819-
return [testPath, passes];
1820-
}));
1821-
document.querySelectorAll(".wpt-name").forEach(nameEl=>{
1822-
const passData = resultsFromPath.get("/" + nameEl.getAttribute("title"));
1823-
const numTests = passData[0][1];
1824-
if(numTests > 1) {
1825-
nameEl.insertAdjacentElement("beforeend",
1826-
el("small", {}, ` (${numTests} tests)`));
1827-
}
1828-
if(passData == undefined) return;
1829-
passData.forEach((p,i) => {
1830-
browsers[i].passes += p[0];
1831-
browsers[i].total += p[1];
1832-
})
1833-
const resultsEl = el("span",{"class":"wpt-results"},
1834-
...passData.map((p,i) => el("span",
1835-
{
1836-
"title": `${browsers[i].name} ${p[0]}/${p[1]}`,
1837-
"class": "wpt-result",
1838-
"style": `background: conic-gradient(forestgreen ${p[0]/p[1]*360}deg, darkred 0deg);`,
1839-
})),
1840-
);
1841-
nameEl.insertAdjacentElement("afterend", resultsEl);
1842-
});
1843-
const overview = document.querySelector(".wpt-overview");
1844-
if(overview) {
1845-
overview.appendChild(el('ul',{}, ...browsers.map(formatWptResult)));
1846-
document.head.appendChild(el('style', {},
1847-
`.wpt-overview ul { display: flex; flex-flow: row wrap; gap: .2em; justify-content: start; list-style: none; padding: 0; margin: 0;}
1848-
.wpt-overview li { padding: .25em 1em; color: black; text-align: center; }
1849-
.wpt-overview img { height: 1.5em; height: max(1.5em, 32px); background: transparent; }
1850-
.wpt-overview .browser { font-weight: bold; }
1851-
.wpt-overview .passes-none { background: #e57373; }
1852-
.wpt-overview .passes-hardly { background: #ffb74d; }
1853-
.wpt-overview .passes-a-few { background: #ffd54f; }
1854-
.wpt-overview .passes-half { background: #fff176; }
1855-
.wpt-overview .passes-lots { background: #dce775; }
1856-
.wpt-overview .passes-most { background: #aed581; }
1857-
.wpt-overview .passes-all { background: #81c784; }`));
1858-
}
1859-
});
1860-
function el(name, attrs, ...content) {
1861-
const x = document.createElement(name);
1862-
for(const [k,v] of Object.entries(attrs)) {
1863-
x.setAttribute(k, v);
1864-
}
1865-
for(let child of content) {
1866-
if(typeof child == "string") child = document.createTextNode(child);
1867-
try {
1868-
x.appendChild(child);
1869-
} catch(e) { console.log({x, child}); }
1870-
}
1871-
return x;
1872-
}
1873-
function formatWptResult({name, version, passes, total}) {
1874-
const passRate = passes/total;
1875-
let passClass = "";
1876-
if(passRate == 0) passClass = "passes-none";
1877-
else if(passRate < .2) passClass = "passes-hardly";
1878-
else if(passRate < .4) passClass = "passes-a-few";
1879-
else if(passRate < .6) passClass = "passes-half";
1880-
else if(passRate < .8) passClass = "passes-lots";
1881-
else if(passRate < 1) passClass = "passes-most";
1882-
else passClass = "passes-all";
1883-
1884-
name = name[0].toUpperCase() + name.slice(1);
1885-
const shortVersion = /^\d+/.exec(version);
1886-
const icon = []
1887-
1888-
if(name == "Chrome") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/chrome-dev_64x64.png"}));
1889-
if(name == "Edge") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/edge-dev_64x64.png"}));
1890-
if(name == "Safari") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/safari-preview_64x64.png"}));
1891-
if(name == "Firefox") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/firefox-nightly_64x64.png"}));
1892-
1893-
return el('li', {"class":passClass},
1894-
el('nobr', {'class':'browser'}, ...icon, ` ${name} ${shortVersion}`),
1895-
el('br', {}),
1896-
el('nobr', {'class':'pass-rate'}, `${passes}/${total}`)
1897-
);
1898-
}</script>
1793+
</script>

‎tests/github/w3c/csswg-drafts/css-2017/Overview.html

+1-106
Original file line numberDiff line numberDiff line change
@@ -5083,109 +5083,4 @@ <h3 class="no-num no-ref heading settled" id="informative"><span class="content"
50835083
}
50845084

50855085
});
5086-
</script>
5087-
<script>/* script-wpt */
5088-
let wptPath = "/";
5089-
"use strict";
5090-
5091-
document.addEventListener("DOMContentLoaded", async ()=>{
5092-
if(wptPath == "/") return;
5093-
5094-
const runsUrl = "https://wpt.fyi/api/runs?label=master&label=stable&max-count=1&product=chrome&product=firefox&product=safari&product=edge";
5095-
const runs = await (await fetch(runsUrl)).json();
5096-
5097-
const testResults = await( await fetch("https://wpt.fyi/api/search", {
5098-
method:"POST",
5099-
headers:{
5100-
"Content-Type":"application/json",
5101-
},
5102-
body: JSON.stringify({
5103-
"run_ids": runs.map(x=>x.id),
5104-
"query": {"path": wptPath},
5105-
})
5106-
})).json();
5107-
5108-
const browsers = runs.map(x=>({name:x.browser_name, version:x.browser_version, passes:0, total: 0}));
5109-
const resultsFromPath = new Map(testResults.results.map(result=>{
5110-
const testPath = result.test;
5111-
const passes = result.legacy_status.map(x=>[x.passes, x.total]);
5112-
return [testPath, passes];
5113-
}));
5114-
document.querySelectorAll(".wpt-name").forEach(nameEl=>{
5115-
const passData = resultsFromPath.get("/" + nameEl.getAttribute("title"));
5116-
const numTests = passData[0][1];
5117-
if(numTests > 1) {
5118-
nameEl.insertAdjacentElement("beforeend",
5119-
el("small", {}, ` (${numTests} tests)`));
5120-
}
5121-
if(passData == undefined) return;
5122-
passData.forEach((p,i) => {
5123-
browsers[i].passes += p[0];
5124-
browsers[i].total += p[1];
5125-
})
5126-
const resultsEl = el("span",{"class":"wpt-results"},
5127-
...passData.map((p,i) => el("span",
5128-
{
5129-
"title": `${browsers[i].name} ${p[0]}/${p[1]}`,
5130-
"class": "wpt-result",
5131-
"style": `background: conic-gradient(forestgreen ${p[0]/p[1]*360}deg, darkred 0deg);`,
5132-
})),
5133-
);
5134-
nameEl.insertAdjacentElement("afterend", resultsEl);
5135-
});
5136-
const overview = document.querySelector(".wpt-overview");
5137-
if(overview) {
5138-
overview.appendChild(el('ul',{}, ...browsers.map(formatWptResult)));
5139-
document.head.appendChild(el('style', {},
5140-
`.wpt-overview ul { display: flex; flex-flow: row wrap; gap: .2em; justify-content: start; list-style: none; padding: 0; margin: 0;}
5141-
.wpt-overview li { padding: .25em 1em; color: black; text-align: center; }
5142-
.wpt-overview img { height: 1.5em; height: max(1.5em, 32px); background: transparent; }
5143-
.wpt-overview .browser { font-weight: bold; }
5144-
.wpt-overview .passes-none { background: #e57373; }
5145-
.wpt-overview .passes-hardly { background: #ffb74d; }
5146-
.wpt-overview .passes-a-few { background: #ffd54f; }
5147-
.wpt-overview .passes-half { background: #fff176; }
5148-
.wpt-overview .passes-lots { background: #dce775; }
5149-
.wpt-overview .passes-most { background: #aed581; }
5150-
.wpt-overview .passes-all { background: #81c784; }`));
5151-
}
5152-
});
5153-
function el(name, attrs, ...content) {
5154-
const x = document.createElement(name);
5155-
for(const [k,v] of Object.entries(attrs)) {
5156-
x.setAttribute(k, v);
5157-
}
5158-
for(let child of content) {
5159-
if(typeof child == "string") child = document.createTextNode(child);
5160-
try {
5161-
x.appendChild(child);
5162-
} catch(e) { console.log({x, child}); }
5163-
}
5164-
return x;
5165-
}
5166-
function formatWptResult({name, version, passes, total}) {
5167-
const passRate = passes/total;
5168-
let passClass = "";
5169-
if(passRate == 0) passClass = "passes-none";
5170-
else if(passRate < .2) passClass = "passes-hardly";
5171-
else if(passRate < .4) passClass = "passes-a-few";
5172-
else if(passRate < .6) passClass = "passes-half";
5173-
else if(passRate < .8) passClass = "passes-lots";
5174-
else if(passRate < 1) passClass = "passes-most";
5175-
else passClass = "passes-all";
5176-
5177-
name = name[0].toUpperCase() + name.slice(1);
5178-
const shortVersion = /^\d+/.exec(version);
5179-
const icon = []
5180-
5181-
if(name == "Chrome") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/chrome-dev_64x64.png"}));
5182-
if(name == "Edge") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/edge-dev_64x64.png"}));
5183-
if(name == "Safari") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/safari-preview_64x64.png"}));
5184-
if(name == "Firefox") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/firefox-nightly_64x64.png"}));
5185-
5186-
return el('li', {"class":passClass},
5187-
el('nobr', {'class':'browser'}, ...icon, ` ${name} ${shortVersion}`),
5188-
el('br', {}),
5189-
el('nobr', {'class':'pass-rate'}, `${passes}/${total}`)
5190-
);
5191-
}</script>
5086+
</script>

‎tests/github/w3c/csswg-drafts/css-2018/Overview.html

+1-106
Original file line numberDiff line numberDiff line change
@@ -5473,109 +5473,4 @@ <h3 class="no-num no-ref heading settled" id="informative"><span class="content"
54735473
}
54745474

54755475
});
5476-
</script>
5477-
<script>/* script-wpt */
5478-
let wptPath = "/";
5479-
"use strict";
5480-
5481-
document.addEventListener("DOMContentLoaded", async ()=>{
5482-
if(wptPath == "/") return;
5483-
5484-
const runsUrl = "https://wpt.fyi/api/runs?label=master&label=stable&max-count=1&product=chrome&product=firefox&product=safari&product=edge";
5485-
const runs = await (await fetch(runsUrl)).json();
5486-
5487-
const testResults = await( await fetch("https://wpt.fyi/api/search", {
5488-
method:"POST",
5489-
headers:{
5490-
"Content-Type":"application/json",
5491-
},
5492-
body: JSON.stringify({
5493-
"run_ids": runs.map(x=>x.id),
5494-
"query": {"path": wptPath},
5495-
})
5496-
})).json();
5497-
5498-
const browsers = runs.map(x=>({name:x.browser_name, version:x.browser_version, passes:0, total: 0}));
5499-
const resultsFromPath = new Map(testResults.results.map(result=>{
5500-
const testPath = result.test;
5501-
const passes = result.legacy_status.map(x=>[x.passes, x.total]);
5502-
return [testPath, passes];
5503-
}));
5504-
document.querySelectorAll(".wpt-name").forEach(nameEl=>{
5505-
const passData = resultsFromPath.get("/" + nameEl.getAttribute("title"));
5506-
const numTests = passData[0][1];
5507-
if(numTests > 1) {
5508-
nameEl.insertAdjacentElement("beforeend",
5509-
el("small", {}, ` (${numTests} tests)`));
5510-
}
5511-
if(passData == undefined) return;
5512-
passData.forEach((p,i) => {
5513-
browsers[i].passes += p[0];
5514-
browsers[i].total += p[1];
5515-
})
5516-
const resultsEl = el("span",{"class":"wpt-results"},
5517-
...passData.map((p,i) => el("span",
5518-
{
5519-
"title": `${browsers[i].name} ${p[0]}/${p[1]}`,
5520-
"class": "wpt-result",
5521-
"style": `background: conic-gradient(forestgreen ${p[0]/p[1]*360}deg, darkred 0deg);`,
5522-
})),
5523-
);
5524-
nameEl.insertAdjacentElement("afterend", resultsEl);
5525-
});
5526-
const overview = document.querySelector(".wpt-overview");
5527-
if(overview) {
5528-
overview.appendChild(el('ul',{}, ...browsers.map(formatWptResult)));
5529-
document.head.appendChild(el('style', {},
5530-
`.wpt-overview ul { display: flex; flex-flow: row wrap; gap: .2em; justify-content: start; list-style: none; padding: 0; margin: 0;}
5531-
.wpt-overview li { padding: .25em 1em; color: black; text-align: center; }
5532-
.wpt-overview img { height: 1.5em; height: max(1.5em, 32px); background: transparent; }
5533-
.wpt-overview .browser { font-weight: bold; }
5534-
.wpt-overview .passes-none { background: #e57373; }
5535-
.wpt-overview .passes-hardly { background: #ffb74d; }
5536-
.wpt-overview .passes-a-few { background: #ffd54f; }
5537-
.wpt-overview .passes-half { background: #fff176; }
5538-
.wpt-overview .passes-lots { background: #dce775; }
5539-
.wpt-overview .passes-most { background: #aed581; }
5540-
.wpt-overview .passes-all { background: #81c784; }`));
5541-
}
5542-
});
5543-
function el(name, attrs, ...content) {
5544-
const x = document.createElement(name);
5545-
for(const [k,v] of Object.entries(attrs)) {
5546-
x.setAttribute(k, v);
5547-
}
5548-
for(let child of content) {
5549-
if(typeof child == "string") child = document.createTextNode(child);
5550-
try {
5551-
x.appendChild(child);
5552-
} catch(e) { console.log({x, child}); }
5553-
}
5554-
return x;
5555-
}
5556-
function formatWptResult({name, version, passes, total}) {
5557-
const passRate = passes/total;
5558-
let passClass = "";
5559-
if(passRate == 0) passClass = "passes-none";
5560-
else if(passRate < .2) passClass = "passes-hardly";
5561-
else if(passRate < .4) passClass = "passes-a-few";
5562-
else if(passRate < .6) passClass = "passes-half";
5563-
else if(passRate < .8) passClass = "passes-lots";
5564-
else if(passRate < 1) passClass = "passes-most";
5565-
else passClass = "passes-all";
5566-
5567-
name = name[0].toUpperCase() + name.slice(1);
5568-
const shortVersion = /^\d+/.exec(version);
5569-
const icon = []
5570-
5571-
if(name == "Chrome") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/chrome-dev_64x64.png"}));
5572-
if(name == "Edge") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/edge-dev_64x64.png"}));
5573-
if(name == "Safari") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/safari-preview_64x64.png"}));
5574-
if(name == "Firefox") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/firefox-nightly_64x64.png"}));
5575-
5576-
return el('li', {"class":passClass},
5577-
el('nobr', {'class':'browser'}, ...icon, ` ${name} ${shortVersion}`),
5578-
el('br', {}),
5579-
el('nobr', {'class':'pass-rate'}, `${passes}/${total}`)
5580-
);
5581-
}</script>
5476+
</script>

0 commit comments

Comments
 (0)