-/Document.rtf at master · ahfuckit/- · GitHub

1
2
3
4
5
6
{\rtf1\ansi\ansicpg1252\deff0\nouicompat\deflang4105{\fonttbl{\f0\fnil\fcharset0 Calibri;}{\f1\fnil\fcharset1 Cambria Math;}{\f2\fnil Calibri;}}
{\colortbl ;\red0\green0\blue255;}
{\*\generator Riched20 10.0.26100}{\*\mmathPr\mmathFont1\mwrapIndent1440 }\viewkind4\uc1
\pard\sa200\sl276\slmult1\f0\fs22\lang9 <html><head><meta name="viewport" content="width=device-width"><title>https://wpewebkit.org/wpt-status/</title><link rel="stylesheet" type="text/css" href="resource://content-accessible/viewsource.css"></head><body id="viewsource" style="tab-size: 4"><"line1"><span></span><span class="doctype"><!DOCTYPE html></span><span> </span></span><"line2"><span></span><span><<span class="start-tag">html</span> <span class="attribute-name">prefix</span>="<a class="attribute-value">og: {{\field{\*\fldinst{HYPERLINK https://ogp.me/ns#</a> }}{\fldrslt{https://ogp.me/ns#</a>\ul0\cf0}}}}\f0\fs22 " <span class="attribute-name">lang</span>="<a class="attribute-value">en</a>"></span><span> </span></span><"line3"><span> </span></span><"line4"><span> </span><span><<span class="start-tag">head</span>></span><span> </span></span><"line5"><span> </span></span><"line6"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">charset</span>="<a class="attribute-value">utf-8</a>"></span><span> </span></span><"line7"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">http-equiv</span>="<a class="attribute-value">X-UA-Compatible</a>" <span class="attribute-name">content</span>="<a class="attribute-value">IE=edge</a>"></span><span> </span></span><"line8"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">name</span>="<a class="attribute-value">viewport</a>" <span class="attribute-name">content</span>="<a class="attribute-value">width=device-width, initial-scale=1</a>"></span><span> </span></span><"line9"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">name</span>="<a class="attribute-value">viewport</a>" <span class="attribute-name">content</span>="<a class="attribute-value">width=device-width, initial-scale=1, shrink-to-fit=no</a>"></span><span> </span></span><"line10"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">name</span>="<a class="attribute-value">author</a>" <span class="attribute-name">content</span>="<a class="attribute-value"></a>"></span><span> </span></span><"line11"><span> </span></span><"line12"><span> </span><span><<span class="start-tag">title</span>></span><span>WPE Specification Support</span><span></<span class="end-tag">title</span>></span><span> </span></span><"line13"><span> </span><span><<span class="start-tag">link</span> <span class="attribute-name">rel</span>="<a class="attribute-value">canonical</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/wpt-status/">https://wpewebkit.org/wpt-status/</a>"></span><span> </span></span><"line14"><span> </span><span><<span class="start-tag">link</span> <span class="attribute-name">rel</span>="<a class="attribute-value">alternate</a>" <span class="attribute-name">type</span>="<a class="attribute-value">application/rss+xml</a>" <span class="attribute-name">title</span>="<a class="attribute-value">WPE WebKit Blog</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/blog.xml">https://wpewebkit.org/blog.xml</a>"></span><span> </span></span><"line15"><span> </span><span><<span class="start-tag">link</span> <span class="attribute-name">rel</span>="<a class="attribute-value">alternate</a>" <span class="attribute-name">type</span>="<a class="attribute-value">application/rss+xml</a>" <span class="attribute-name">title</span>="<a class="attribute-value">WPE WebKit Posts</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/feed.xml">https://wpewebkit.org/feed.xml</a>"></span><span> </span></span><"line16"><span> </span><span><<span class="start-tag">link</span> <span class="attribute-name">rel</span>="<a class="attribute-value">alternate</a>" <span class="attribute-name">type</span>="<a class="attribute-value">application/rss+xml</a>" <span class="attribute-name">title</span>="<a class="attribute-value">WPE WebKit Security Advisories</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/security.xml">https://wpewebkit.org/security.xml</a>"></span><span> </span></span><"line17"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">property</span>="<a class="attribute-value">og:url</a>" <span class="attribute-name">content</span>="<a class="attribute-value">https://wpewebkit.org/wpt-status/</a>"></span><span> </span></span><"line18"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">property</span>="<a class="attribute-value">og:title</a>" <span class="attribute-name">content</span>="<a class="attribute-value">WPE Specification Support</a>"></span><span> </span></span><"line19"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">property</span>="<a class="attribute-value">og:image</a>" <span class="attribute-name">content</span>="<a class="attribute-value">https://wpewebkit.org/assets/twitter_Profile_WhiteBg_400px.png</a>"></span><span> </span></span><"line20"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">property</span>="<a class="attribute-value">og:image:secure_url</a>" <span class="attribute-name">content</span>="<a class="attribute-value">https://wpewebkit.org/assets/twitter_Profile_WhiteBg_400px.png</a>"></span><span> </span></span><"line21"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">property</span>="<a class="attribute-value">og:image:alt</a>" <span class="attribute-name">content</span>="<a class="attribute-value">WPE logo</a>"></span><span> </span></span><"line22"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">property</span>="<a class="attribute-value">og:image:type</a>" <span class="attribute-name">content</span>="<a class="attribute-value">image/png</a>"></span><span> </span></span><"line23"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">property</span>="<a class="attribute-value">og:image:width</a>" <span class="attribute-name">content</span>="<a class="attribute-value">400</a>"></span><span> </span></span><"line24"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">property</span>="<a class="attribute-value">og:image:height</a>" <span class="attribute-name">content</span>="<a class="attribute-value">400</a>"></span><span> </span></span><"line25"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">property</span>="<a class="attribute-value">og:type</a>" <span class="attribute-name">content</span>="<a class="attribute-value">article</a>"></span><span> </span></span><"line26"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">property</span>="<a class="attribute-value">article:published_time</a>" <span class="attribute-name">content</span>="<a class="attribute-value">2025-12-19T15:45:15.557Z</a>"></span><span> </span></span><"line27"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">property</span>="<a class="attribute-value">article:tag</a>" <span class="attribute-name">content</span>="<a class="attribute-value">devs</a>"></span><span> </span></span><"line28"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">name</span>="<a class="attribute-value">twitter:card</a>" <span class="attribute-name">content</span>="<a class="attribute-value">summary</a>"></span><span> </span></span><"line29"><span> </span><span><<span class="start-tag">meta</span> <span class="attribute-name">name</span>="<a class="attribute-value">twitter:site</a>" <span class="attribute-name">content</span>="<a class="attribute-value">@WPEWebKit</a>"></span><span> </span></span><"line30"><span> </span></span><"line31"><span> </span><span class="comment"><!-- CSS v2 --></span><span> </span></span><"line32"><span> </span><span><<span class="start-tag">link</span> <span class="attribute-name">rel</span>="<a class="attribute-value">stylesheet</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/css/v2.css">/css/v2.css</a>"></span><span> </span></span><"line33"><span> </span></span><"line34"><span> </span><span class="comment"><!-- Custom Fonts --></span><span> </span></span><"line35"><span> </span><span><<span class="start-tag">link</span> <span class="attribute-name">rel</span>="<a class="attribute-value">stylesheet</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/vendor/font-awesome/css/font-awesome.min.css">/vendor/font-awesome/css/font-awesome.min.css</a>"></span><span> </span></span><"line36"><span> </span><span><<span class="start-tag">link</span> <span class="attribute-name">rel</span>="<a class="attribute-value">stylesheet</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/css/fonts.css">/css/fonts.css</a>"></span><span> </span></span><"line37"><span> </span></span><"line38"><span> </span><span class="comment"><!-- Code syntax highlighting --></span><span> </span></span><"line39"><span> </span><span><<span class="start-tag">link</span> <span class="attribute-name">rel</span>="<a class="attribute-value">stylesheet</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/css/prism.css">/css/prism.css</a>"></span><span> </span></span><"line40"><span> </span></span><"line41"><span> </span><span class="comment"><!-- Custom CSS --></span><span> </span></span><"line42"><span> </span><span><<span class="start-tag">link</span> <span class="attribute-name">rel</span>="<a class="attribute-value">stylesheet</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/css/stylish-portfolio.css">/css/stylish-portfolio.css</a>"></span><span> </span></span><"line43"><span> </span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span> </span></span><"line44"><span> window.addEventListener('load',function() \{document.querySelector('nav.global>div>.burger').addEventListener('click',menutog)\}); </span></span><"line45"><span> function menutog(e) \{ </span></span><"line46"><span> document.querySelector('nav.global>div>ul').classList.toggle('off'); </span></span><"line47"><span> e.preventDefault(); </span></span><"line48"><span> \} </span></span><"line49"><span> </span><span></<span class="end-tag">script</span>></span><span> </span></span><"line50"><span> </span><span class="comment"><!-- Matomo --></span><span> </span></span><"line51"><span> </span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span> </span></span><"line52"><span> var _paq = window._paq = window._paq || []; </span></span><"line53"><span> /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ </span></span><"line54"><span> _paq.push(['trackPageView']); </span></span><"line55"><span> _paq.push(['enableLinkTracking']); </span></span><"line56"><span> (function() \{ </span></span><"line57"><span> var u="//stats.igalia.com/"; </span></span><"line58"><span> _paq.push(['setTrackerUrl', u+'matomo.php']); </span></span><"line59"><span> _paq.push(['setSiteId', '6']); </span></span><"line60"><span> var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; </span></span><"line61"><span> g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); </span></span><"line62"><span> \})(); </span></span><"line63"><span> </span><span></<span class="end-tag">script</span>></span><span> </span></span><"line64"><span> </span><span class="comment"><!-- End Matomo Code --></span><span> </span></span><"line65"><span></span><span></<span class="end-tag">head</span>></span><span> </span></span><"line66"><span> </span></span><"line67"><span> </span></span><"line68"><span> </span><span><<span class="start-tag">body</span> <span class="attribute-name">id</span>="<a class="attribute-value">page-top</a>" <span class="attribute-name">class</span>="<a class="attribute-value">subpage</a>"></span><span> </span></span><"line69"><span> </span></span><"line70"><span> </span><span><<span class="start-tag">nav</span> <span class="attribute-name">class</span>="<a class="attribute-value">global</a>"></span><span> </span></span><"line71"><span>\tab </span><span><<span class="start-tag">div</span>></span><span> </span></span><"line72"><span>\tab </span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">igalia logo home</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/">/</a>"></span><span></span><span><<span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/assets/img/logo-blue.svg">/assets/img/logo-blue.svg</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">WPE</a>"></span><span></span><span></<span class="end-tag">a</span>></span><span> </span></span><"line73"><span>\tab </span><span><<span class="start-tag">ul</span> <span class="attribute-name">class</span>="<a class="attribute-value">wpt-status off</a>"></span><span></span><span><<span class="start-tag">li</span>></span><span> </span></span><"line74"><span>\tab </span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nav-link</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/">/</a>"></span><span>Home</span><span></<span class="end-tag">a</span>></span><span> </span></span><"line75"><span>\tab </span><span></<span class="end-tag">li</span>></span><span></span><span><<span class="start-tag">li</span>></span><span> </span></span><"line76"><span>\tab </span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nav-link</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/about/">/about/</a>"></span><span>Learn <span><span>&&</span></span> Discover</span><span></<span class="end-tag">a</span>></span><span> </span></span><"line77"><span>\tab </span><span></<span class="end-tag">li</span>></span><span></span><span><<span class="start-tag">li</span>></span><span> </span></span><"line78"><span>\tab </span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nav-link</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/blog/">/blog/</a>"></span><span>Blog</span><span></<span class="end-tag">a</span>></span><span> </span></span><"line79"><span>\tab </span><span></<span class="end-tag">li</span>></span><span></span><span><<span class="start-tag">li</span>></span><span> </span></span><"line80"><span>\tab </span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">nav-link</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/developers/">/developers/</a>"></span><span>Developers</span><span></<span class="end-tag">a</span>></span><span> </span></span><"line81"><span>\tab </span><span></<span class="end-tag">li</span>></span><span></span><span><<span class="start-tag">li</span>></span><span> </span></span><"line82"><span>\tab </span><span><<span class="start-tag">a</span> <span class="attribute-name">class</span>="<a class="attribute-value">btn cta</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/about/get-wpe.html">/about/get-wpe.html</a>"></span><span>Get WPE</span><span></<span class="end-tag">a</span>></span><span> </span></span><"line83"><span>\tab </span><span></<span class="end-tag">li</span>></span><span></span><span></<span class="end-tag">ul</span>></span><span> </span></span><"line84"><span>\tab </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/wpt-status/#">#</a>" <span class="attribute-name">class</span>="<a class="attribute-value">burger</a>"></span><span>Menu</span><span></<span class="end-tag">a</span>></span><span> </span></span><"line85"><span>\tab </span><span></<span class="end-tag">div</span>></span><span> </span></span><"line86"><span></span><span></<span class="end-tag">nav</span>></span><span> </span></span><"line87"><span> </span></span><"line88"><span> </span></span><"line89"><span> </span><span><<span class="start-tag">main</span>></span><span> </span></span><"line90"><span> </span></span><"line91"><span></span><span><<span class="start-tag">style</span>></span><span> </span></span><"line92"><span>body \{ </span></span><"line93"><span> font-family: sans-serif; </span></span><"line94"><span>\} </span></span><"line95"><span> </span></span><"line96"><span>h1 \{ </span></span><"line97"><span> margin-block-end: 0; </span></span><"line98"><span>\} </span></span><"line99"><span> </span></span><"line100"><span>#stickyheader \{ </span></span><"line101"><span> position: sticky; </span></span><"line102"><span> top: 4.5em; </span></span><"line103"><span> display: flex; </span></span><"line104"><span> flex-wrap: nowrap; </span></span><"line105"><span> justify-content: space-between; </span></span><"line106"><span> align-items: baseline; </span></span><"line107"><span> gap: 0 2em; </span></span><"line108"><span> padding-block: 1em; </span></span><"line109"><span> z-index: 1; </span></span><"line110"><span> background: #FFF; </span></span><"line111"><span> white-space: nowrap; </span></span><"line112"><span> overflow: hidden; </span></span><"line113"><span> text-overflow: ellipsis; </span></span><"line114"><span>\} </span></span><"line115"><span> </span></span><"line116"><span>#stickyheader>label \{ </span></span><"line117"><span> line-height: 1.6; </span></span><"line118"><span>\} </span></span><"line119"><span> </span></span><"line120"><span>#stickyheader+p \{ </span></span><"line121"><span> margin-block-start: 0em; </span></span><"line122"><span>\} </span></span><"line123"><span> </span></span><"line124"><span>#version-select \{ </span></span><"line125"><span> margin-inline: 0.67em 0; </span></span><"line126"><span>\} </span></span><"line127"><span> </span></span><"line128"><span>#results-table \{ </span></span><"line129"><span> border-collapse: collapse; </span></span><"line130"><span> width: 100%; </span></span><"line131"><span> margin-block: 1.25em 1em; </span></span><"line132"><span> table-layout: fixed; </span></span><"line133"><span>\} </span></span><"line134"><span> </span></span><"line135"><span>#results-table :is(th, td) \{ </span></span><"line136"><span> border: 1px solid #ccc; </span></span><"line137"><span> padding-inline: 0.5em; </span></span><"line138"><span> padding-block: 0.5em 0.4em; </span></span><"line139"><span> text-align: left; </span></span><"line140"><span>\} </span></span><"line141"><span> </span></span><"line142"><span>#results-table thead th \{ </span></span><"line143"><span> background-color: #f4f4f4; </span></span><"line144"><span> background-repeat: no-repeat; </span></span><"line145"><span> background-position: 0 0, 100% 100%; </span></span><"line146"><span> background-size: 100% 1px; </span></span><"line147"><span> background-image: linear-gradient(90deg, #0003, #0003), linear-gradient(90deg, #0005, #0005); </span></span><"line148"><span>\} </span></span><"line149"><span> </span></span><"line150"><span>#results-table thead \{ </span></span><"line151"><span> position: sticky; </span></span><"line152"><span> top: 7.5em; </span></span><"line153"><span> z-index: 1; </span></span><"line154"><span>\} </span></span><"line155"><span> </span></span><"line156"><span>#results-table tbody a[href] \{ </span></span><"line157"><span> text-decoration-color: color-mix(in hsl, currentColor 60%, transparent); </span></span><"line158"><span> text-underline-offset: 0.15em; </span></span><"line159"><span>\} </span></span><"line160"><span> </span></span><"line161"><span>#results-table tbody td.barred \{ </span></span><"line162"><span> background-image: linear-gradient(90deg, hsl(calc(var(--dataHue) * 1.2) 70% 90%) 0, hsl(calc(var(--dataHue) * 1.2) 70% 70%) 100%); </span></span><"line163"><span> background-size: var(--dataPct) 100%; </span></span><"line164"><span> background-repeat: no-repeat; </span></span><"line165"><span> text-shadow: </span></span><"line166"><span> 0 0 0.25em hsl(0, 0%, 93.7%), </span></span><"line167"><span> 0 0 0.25em hsl(0, 0%, 93.7%), </span></span><"line168"><span> 0 0 0.25em hsl(0, 0%, 93.7%), </span></span><"line169"><span> 0 0 0.25em hsl(0, 0%, 93.7%), </span></span><"line170"><span> 0 0 0.25em hsl(0, 0%, 93.7%), </span></span><"line171"><span> 0 0 0.15em hsl(0, 0%, 93.7%), </span></span><"line172"><span> 0 0 0.15em hsl(0, 0%, 93.7%), </span></span><"line173"><span> 0 0 0.15em hsl(0, 0%, 93.7%), </span></span><"line174"><span> 0 0 0.15em hsl(0, 0%, 93.7%), </span></span><"line175"><span> 0 0 0.15em hsl(0, 0%, 93.7%); </span></span><"line176"><span>\} </span></span><"line177"><span> </span></span><"line178"><span>#results-table tbody td small \{ </span></span><"line179"><span> margin-inline: 0.33ch 0; </span></span><"line180"><span>\} </span></span><"line181"><span> </span></span><"line182"><span>#results-table tbody td \{ </span></span><"line183"><span> word-break: break-word; </span></span><"line184"><span>\} </span></span><"line185"><span> </span></span><"line186"><span>#support-combo-filter \{ </span></span><"line187"><span> display: grid; </span></span><"line188"><span> grid-template-columns: 1fr 1fr; </span></span><"line189"><span> gap: 0.5em 1em; </span></span><"line190"><span> background: inherit; </span></span><"line191"><span>\} </span></span><"line192"><span> </span></span><"line193"><span>#support-combo-filter legend \{ </span></span><"line194"><span> grid-column: span 2; </span></span><"line195"><span>\} </span></span><"line196"><span> </span></span><"line197"><span>details \{ </span></span><"line198"><span> padding-block-end: 1px; </span></span><"line199"><span>\} </span></span><"line200"><span> </span></span><"line201"><span>fieldset.smaller \{ </span></span><"line202"><span> font-size: 0.85em; </span></span><"line203"><span> padding: 0.5em 1em; </span></span><"line204"><span> margin: 0.5em 0; </span></span><"line205"><span> border: 1px solid #ccc; </span></span><"line206"><span>\} </span></span><"line207"><span> </span></span><"line208"><span>fieldset.smaller label \{ </span></span><"line209"><span> margin: 0.2em 0; </span></span><"line210"><span> display: block; </span></span><"line211"><span>\} </span></span><"line212"><span> </span></span><"line213"><span>.help-text \{ </span></span><"line214"><span> font-size: 0.8em; </span></span><"line215"><span> color: #666; </span></span><"line216"><span> margin-left: 1.5em; </span></span><"line217"><span> margin-top: 0.2em; </span></span><"line218"><span>\} </span></span><"line219"><span> </span></span><"line220"><span> </span></span><"line221"><span>#controls \{ </span></span><"line222"><span> display: flex; </span></span><"line223"><span> align-items: center; </span></span><"line224"><span> gap: 0.5rem; </span></span><"line225"><span> flex-wrap: nowrap; </span></span><"line226"><span> flex-shrink: 0; </span></span><"line227"><span>\} </span></span><"line228"><span> </span></span><"line229"><span>.source-tab \{ </span></span><"line230"><span> display: inline-flex; </span></span><"line231"><span> border: 1px solid #ccc; </span></span><"line232"><span> border-radius: 6px; </span></span><"line233"><span> overflow: hidden; </span></span><"line234"><span> box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); </span></span><"line235"><span>\} </span></span><"line236"><span> </span></span><"line237"><span>.toggle-btn \{ </span></span><"line238"><span> appearance: none; </span></span><"line239"><span> border: none; </span></span><"line240"><span> background: #f5f5f5; </span></span><"line241"><span> padding: 0.25em 0.6em; </span></span><"line242"><span> font-size: 0.9em; </span></span><"line243"><span> cursor: pointer; </span></span><"line244"><span> color: #333; </span></span><"line245"><span> transition: background 0.2s, color 0.2s; </span></span><"line246"><span>\} </span></span><"line247"><span> </span></span><"line248"><span>.toggle-btn:hover \{ </span></span><"line249"><span> background: #eaeaea; </span></span><"line250"><span>\} </span></span><"line251"><span> </span></span><"line252"><span>.toggle-btn.active \{ </span></span><"line253"><span> background: #0066cc; </span></span><"line254"><span> color: white; </span></span><"line255"><span>\} </span></span><"line256"><span> </span></span><"line257"><span>#controls label, </span></span><"line258"><span>#controls span \{ </span></span><"line259"><span> white-space: nowrap; </span></span><"line260"><span>\} </span></span><"line261"><span> </span></span><"line262"><span>[id="info-run"] \{ </span></span><"line263"><span> flex: 0 1 auto; </span></span><"line264"><span> min-width: 0; </span></span><"line265"><span> font-family: monospace; </span></span><"line266"><span> background-color: #f5f5f5; </span></span><"line267"><span> color: #333; </span></span><"line268"><span> padding: 0.3em 0.6em; </span></span><"line269"><span> border: 1px solid #ccc; </span></span><"line270"><span> border-radius: 4px; </span></span><"line271"><span> display: inline-block; </span></span><"line272"><span> white-space: nowrap; </span></span><"line273"><span> font-size: 0.9em; </span></span><"line274"><span> overflow: hidden; </span></span><"line275"><span> text-overflow: ellipsis; </span></span><"line276"><span> text-align: right; </span></span><"line277"><span>\} </span></span><"line278"><span> </span></span><"line279"><span>.tight-label \{ </span></span><"line280"><span> margin-right: -0.5em; /* pulls WPE closer to the select */ </span></span><"line281"><span>\} </span></span><"line282"><span> </span></span><"line283"><span>.filter-input-notfound \{ </span></span><"line284"><span> background-color: #62293c; </span></span><"line285"><span> color: white; </span></span><"line286"><span>\} </span></span><"line287"><span> </span></span><"line288"><span></span><span></<span class="end-tag">style</span>></span><span> </span></span><"line289"><span> </span></span><"line290"><span></span><span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">header</a>"></span><span> </span></span><"line291"><span> </span><span><<span class="start-tag">h1</span>></span><span>WPE Web Support Status</span><span></<span class="end-tag">h1</span>></span><span> </span></span><"line292"><span> </span><span><<span class="start-tag">p</span>></span><span>Change the result source, the WPE version or advanced options. The view will update live and provide a stable, sharable URL.</span><span></<span class="end-tag">p</span>></span><span> </span></span><"line293"><span></span><span></<span class="end-tag">div</span>></span><span> </span></span><"line294"><span> </span></span><"line295"><span></span><span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">stickyheader</a>"></span><span> </span></span><"line296"><span> </span><span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">controls</a>"></span><span> </span></span><"line297"><span> </span><span><<span class="start-tag">span</span> <span class="attribute-name">title</span>="<a class="attribute-value">Result source</a>"></span><span><span class="entity"><span>&&</span>#x1F4CA;</span></span><span></<span class="end-tag">span</span>></span><span> </span></span><"line298"><span> </span><span><<span class="start-tag">label</span>></span><span>Source </span></span><"line299"><span> </span><span><<span class="start-tag">select</span> <span class="attribute-name">id</span>="<a class="attribute-value">viewType</a>" <span class="attribute-name">aria-controls</span>="<a class="attribute-value">results-table</a>"></span><span> </span></span><"line300"><span> </span><span><<span class="start-tag">option</span> <span class="attribute-name">selected</span> <span class="attribute-name">data-view</span>="<a class="attribute-value">BCD</a>"></span><span>BCD</span><span></<span class="end-tag">option</span>></span><span> </span></span><"line301"><span> </span><span><<span class="start-tag">option</span> <span class="attribute-name">data-view</span>="<a class="attribute-value">WPT</a>"></span><span>WPT</span><span></<span class="end-tag">option</span>></span><span> </span></span><"line302"><span> </span><span></<span class="end-tag">select</span>></span><span> </span></span><"line303"><span> </span><span></<span class="end-tag">label</span>></span><span> </span></span><"line304"><span><span class="entity"><span>&&</span>nbsp;</span> </span></span><"line305"><span> </span><span><<span class="start-tag">label</span> <span class="attribute-name">for</span>="<a class="attribute-value">version-select</a>"></span><span> </span></span><"line306"><span> </span><span><<span class="start-tag">span</span> <span class="attribute-name">class</span>="<a class="attribute-value">tight-label</a>"></span><span><span class="entity"><span>&&</span>#x2699;</span>Version</span><span></<span class="end-tag">span</span>></span><span> </span></span><"line307"><span> </span><span><<span class="start-tag">select</span> <span class="attribute-name">id</span>="<a class="attribute-value">version-select</a>"></span><span></span><span></<span class="end-tag">select</span>></span><span> </span></span><"line308"><span> </span><span></<span class="end-tag">label</span>></span><span> </span></span><"line309"><span> </span><span></<span class="end-tag">div</span>></span><span> </span></span><"line310"><span> </span></span><"line311"><span> </span><span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">info-run</a>"></span><span> </span></span><"line312"><span> Results from </span></span><"line313"><span> </span><span><<span class="start-tag">strong</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">id</span>="<a class="attribute-value">meta-run-link</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/wpt-status/"></a>" <span class="attribute-name">target</span>="<a class="attribute-value">_blank</a>"></span><span></span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">strong</span>></span><span> </span></span><"line314"><span> (Date: </span><span><<span class="start-tag">strong</span>></span><span></span><span><<span class="start-tag">span</span> <span class="attribute-name">id</span>="<a class="attribute-value">meta-run-date</a>"></span><span></span><span></<span class="end-tag">span</span>></span><span></span><span></<span class="end-tag">strong</span>></span><span>) </span></span><"line315"><span> </span><span></<span class="end-tag">div</span>></span><span> </span></span><"line316"><span> </span></span><"line317"><span></span><span></<span class="end-tag">div</span>></span><span> </span></span><"line318"><span> </span></span><"line319"><span></span><span><<span class="start-tag">details</span> <span class="attribute-name">id</span>="<a class="attribute-value">advanced-options</a>"></span><span> </span></span><"line320"><span></span><span><<span class="start-tag">summary</span>></span><span>Advanced options</span><span></<span class="end-tag">summary</span>></span><span> </span></span><"line321"><span></span><span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">support-combo-filter</a>"></span><span> </span></span><"line322"><span> </span><span><<span class="start-tag">label</span> <span class="attribute-name">class</span>="<a class="attribute-value">wpt-advanced-option</a>"></span><span> </span></span><"line323"><span> </span><span><<span class="start-tag">input</span> <span class="attribute-name">type</span>="<a class="attribute-value">checkbox</a>" <span class="attribute-name">id</span>="<a class="attribute-value">show-unknown</a>"></span><span>Show not yet named or linked </span></span><"line324"><span> </span><span><<span class="start-tag">div</span> <span class="attribute-name">class</span>="<a class="attribute-value">help-text</a>"></span><span>Include results for WPT dirs we haven't yet linked to their specification.</span><span></<span class="end-tag">div</span>></span><span> </span></span><"line325"><span> </span><span></<span class="end-tag">label</span>></span><span> </span></span><"line326"><span> </span><span><<span class="start-tag">label</span> <span class="attribute-name">class</span>="<a class="attribute-value">wpt-advanced-option</a>"></span><span> </span></span><"line327"><span> </span><span><<span class="start-tag">input</span> <span class="attribute-name">type</span>="<a class="attribute-value">checkbox</a>" <span class="attribute-name">id</span>="<a class="attribute-value">show-wpt-details</a>"></span><span>Show WPT directories and test counts </span></span><"line328"><span> </span><span><<span class="start-tag">div</span> <span class="attribute-name">class</span>="<a class="attribute-value">help-text</a>"></span><span>Show columns with WPT dirs info along with test and subtest counts.</span><span></<span class="end-tag">div</span>></span><span> </span></span><"line329"><span> </span><span></<span class="end-tag">label</span>></span><span> </span></span><"line330"><span> </span><span><<span class="start-tag">label</span> <span class="attribute-name">class</span>="<a class="attribute-value">wpt-advanced-option</a>"></span><span> </span></span><"line331"><span> </span><span><<span class="start-tag">input</span> <span class="attribute-name">type</span>="<a class="attribute-value">checkbox</a>" <span class="attribute-name">id</span>="<a class="attribute-value">show-interoperable</a>"></span><span>Include specs with low support but high interoperability </span></span><"line332"><span> </span><span><<span class="start-tag">div</span> <span class="attribute-name">class</span>="<a class="attribute-value">help-text</a>"></span><span>Include results with \f1\u8805?\f0 70% pass rate in at least two major Web engines, even if WPE scores <span class="entity"><span>&&</span>lt;</span>30%</span><span></<span class="end-tag">div</span>></span><span> </span></span><"line333"><span> </span><span></<span class="end-tag">label</span>></span><span> </span></span><"line334"><span> </span><span><<span class="start-tag">label</span> <span class="attribute-name">class</span>="<a class="attribute-value">bcd-advanced-option</a>"></span><span> </span></span><"line335"><span> </span><span><<span class="start-tag">input</span> <span class="attribute-name">type</span>="<a class="attribute-value">checkbox</a>" <span class="attribute-name">id</span>="<a class="attribute-value">show-bcd-supported-in</a>"></span><span>Show supported-in column </span></span><"line336"><span> </span><span><<span class="start-tag">div</span> <span class="attribute-name">class</span>="<a class="attribute-value">help-text</a>"></span><span>Show column with info about where a feature is supported.</span><span></<span class="end-tag">div</span>></span><span> </span></span><"line337"><span> </span><span></<span class="end-tag">label</span>></span><span> </span></span><"line338"><span> </span><span><<span class="start-tag">label</span> <span class="attribute-name">class</span>="<a class="attribute-value">bcd-advanced-option</a>"></span><span><span class="entity"><span>&&</span>nbsp;</span><span class="entity"><span>&&</span>nbsp;</span><span class="entity"><span>&&</span>nbsp;</span><span class="entity"><span>&&</span>nbsp;</span><span class="entity"><span>&&</span>nbsp;</span>Show features supported in </span></span><"line339"><span> </span><span><<span class="start-tag">select</span> <span class="attribute-name">id</span>="<a class="attribute-value">bcd-support-selector</a>" <span class="attribute-name">title</span>="<a class="attribute-value">Show features supported in</a>"></span><span> </span></span><"line340"><span> </span><span><<span class="start-tag">option</span> <span class="attribute-name">value</span>="<a class="attribute-value">Any</a>" <span class="attribute-name">selected</span>></span><span>Any</span><span></<span class="end-tag">option</span>></span><span> </span></span><"line341"><span> </span><span><<span class="start-tag">option</span> <span class="attribute-name">value</span>="<a class="attribute-value">ServiceWorker</a>"></span><span>ServiceWorker</span><span></<span class="end-tag">option</span>></span><span> </span></span><"line342"><span> </span><span><<span class="start-tag">option</span> <span class="attribute-name">value</span>="<a class="attribute-value">SharedWorker</a>"></span><span>SharedWorker</span><span></<span class="end-tag">option</span>></span><span> </span></span><"line343"><span> </span><span><<span class="start-tag">option</span> <span class="attribute-name">value</span>="<a class="attribute-value">Window</a>"></span><span>Window</span><span></<span class="end-tag">option</span>></span><span> </span></span><"line344"><span> </span><span><<span class="start-tag">option</span> <span class="attribute-name">value</span>="<a class="attribute-value">Worker</a>"></span><span>Worker</span><span></<span class="end-tag">option</span>></span><span> </span></span><"line345"><span> </span><span><<span class="start-tag">option</span> <span class="attribute-name">value</span>="<a class="attribute-value">WebAssembly</a>"></span><span>WebAssembly</span><span></<span class="end-tag">option</span>></span><span> </span></span><"line346"><span> </span><span></<span class="end-tag">select</span>></span><span> </span></span><"line347"><span> </span><span><<span class="start-tag">div</span> <span class="attribute-name">class</span>="<a class="attribute-value">help-text</a>"></span><span>Filter the features shown by where those are supported.</span><span></<span class="end-tag">div</span>></span><span> </span></span><"line348"><span> </span><span></<span class="end-tag">label</span>></span><span> </span></span><"line349"><span></span><span></<span class="end-tag">div</span>></span><span> </span></span><"line350"><span></span><span></<span class="end-tag">details</span>></span><span> </span></span><"line351"><span> </span></span><"line352"><span></span><span><<span class="start-tag">details</span> <span class="attribute-name">id</span>="<a class="attribute-value">explanation-text</a>" <span class="attribute-name">open</span>></span><span> </span></span><"line353"><span> </span><span><<span class="start-tag">summary</span>></span><span>Explanation</span><span></<span class="end-tag">summary</span>></span><span> </span></span><"line354"><span> </span></span><"line355"><span></span><span><<span class="start-tag">section</span> <span class="attribute-name">id</span>="<a class="attribute-value">wpt-explanation-panel</a>"></span><span> </span></span><"line356"><span></span><span><<span class="start-tag">p</span>></span><span> </span></span><"line357"><span>This data is automatically obtained by running </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://web-platform-tests.org/">https://web-platform-tests.org</a>" <span class="attribute-name">target</span>="<a class="attribute-value">_blank</a>"></span><span>Web Platform Tests (WPT)</span><span></<span class="end-tag">a</span>></span><span> with WPE. </span></span><"line358"><span> It shows all Web specifications supported or partially supported by WPE </span></span><"line359"><span> </span><span><<span class="start-tag">i</span>></span><span>(\f1\u8805?\f0 30% WPT pass rate)</span><span></<span class="end-tag">i</span>></span><span>. </span></span><"line360"><span></span><span></<span class="end-tag">p</span>></span><span> </span></span><"line361"><span></span><span><<span class="start-tag">p</span>></span><span> </span></span><"line362"><span>The numbers given below are necessarily a crude measure of support: it's </span></span><"line363"><span> possible to have what looks like a poor score while supporting the main </span></span><"line364"><span> body of a specification and missing a number of tiny edge cases, for </span></span><"line365"><span> example. That said, in general, a specification with a score above 70% </span></span><"line366"><span> can be considered supported; any score between 30% and 70% can be </span></span><"line367"><span> considered partially supported; and any score below 30% indicates </span></span><"line368"><span> limited or almost no support. </span></span><"line369"><span></span><span></<span class="end-tag">p</span>></span><span> </span></span><"line370"><span></span><span><<span class="start-tag">p</span>></span><span> </span></span><"line371"><span>If a score drop over time is observed, then the most likely cause is either </span></span><"line372"><span> flaky tests that fail intermittently, or the addition of new tests in WPT, </span></span><"line373"><span> often reflecting new specification features, rather than a removal of </span></span><"line374"><span> capabilities from WPE WebKit. </span></span><"line375"><span></span><span></<span class="end-tag">p</span>></span><span> </span></span><"line376"><span></span><span><<span class="start-tag">p</span>></span><span> </span></span><"line377"><span>For an alternative view that includes a more detailed list of supported </span></span><"line378"><span> Web APIs, JavaScript features and CSS properties, check the </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/wpt-status/#">#</a>" <span class="attribute-name">id</span>="<a class="attribute-value">bcd-view-link</a>"></span><span>BCD test results</span><span></<span class="end-tag">a</span>></span><span>. </span></span><"line379"><span></span><span></<span class="end-tag">p</span>></span><span> </span></span><"line380"><span>Notes: </span></span><"line381"><span></span><span><<span class="start-tag">ul</span>></span><span> </span></span><"line382"><span></span><span><<span class="start-tag">li</span>></span><span>These results were obtained using a WPE build with experimental features enabled. </span></span><"line383"><span> Because feature availability can vary by build configuration, certain features shown here may not be present in other WPE builds.</span><span></<span class="end-tag">li</span>></span><span> </span></span><"line384"><span></span><span><<span class="start-tag">li</span>></span><span>Detailed results of the automated WPT tests for WPE are available at </span></span><"line385"><span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">id</span>="<a class="attribute-value">wpt-link</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpt.fyi/results/?product=wpewebkit">https://wpt.fyi/results/?product=wpewebkit</a>" <span class="attribute-name">target</span>="<a class="attribute-value">_blank</a>"></span><span>wpt.fyi</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">li</span>></span><span> </span></span><"line386"><span></span><span><<span class="start-tag">li</span>></span><span>JavaScript specifications are barely covered here. </span></span><"line387"><span> To explore those, see the results for </span><span><<span class="start-tag">i</span>></span><span>JavaScriptCore</span><span></<span class="end-tag">i</span>></span><span> at </span></span><"line388"><span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://test262.fyi/#|jsc">https://test262.fyi/#|jsc</a>" <span class="attribute-name">target</span>="<a class="attribute-value">_blank</a>"></span><span>test262.fyi</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">li</span>></span><span> </span></span><"line389"><span></span><span></<span class="end-tag">ul</span>></span><span> </span></span><"line390"><span></span><span></<span class="end-tag">section</span>></span><span> </span></span><"line391"><span> </span></span><"line392"><span></span><span><<span class="start-tag">section</span> <span class="attribute-name">id</span>="<a class="attribute-value">bcd-explanation-panel</a>" <span class="attribute-name">hidden</span>></span><span> </span></span><"line393"><span></span><span><<span class="start-tag">p</span>></span><span> </span></span><"line394"><span>This data is automatically obtained by running </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://mdn-bcd-collector.gooborg.com/">https://mdn-bcd-collector.gooborg.com/</a>" <span class="attribute-name">target</span>="<a class="attribute-value">_blank</a>"></span><span>mdn-bcd-collector</span><span></<span class="end-tag">a</span>></span><span> tests with WPE. </span></span><"line395"><span>It presents Browser Compatibility Data (BCD) for different WPE versions, covering Web technologies, such as Web APIs, JavaScript features, CSS properties and more. </span></span><"line396"><span></span><span></<span class="end-tag">p</span>></span><span> </span></span><"line397"><span></span><span><<span class="start-tag">p</span>></span><span> </span></span><"line398"><span>The list below shows features available in the selected WPE version. It indicates only the presence of each feature, not the level of support. For an alternative view that includes specifications and support scores, refer to </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/wpt-status/#">#</a>" <span class="attribute-name">id</span>="<a class="attribute-value">wpt-view-link</a>"></span><span>the WPT test results</span><span></<span class="end-tag">a</span>></span><span>. </span></span><"line399"><span></span><span></<span class="end-tag">p</span>></span><span> </span></span><"line400"><span>Notes: </span></span><"line401"><span></span><span><<span class="start-tag">ul</span>></span><span> </span></span><"line402"><span></span><span><<span class="start-tag">li</span>></span><span>These results were obtained using a WPE build with experimental features enabled. </span></span><"line403"><span> Because feature availability can vary by build configuration, certain features shown here may not be present in other WPE builds.</span><span></<span class="end-tag">li</span>></span><span> </span></span><"line404"><span></span><span></<span class="end-tag">ul</span>></span><span> </span></span><"line405"><span></span><span></<span class="end-tag">section</span>></span><span> </span></span><"line406"><span> </span></span><"line407"><span></span><span></<span class="end-tag">details</span>></span><span> </span></span><"line408"><span> </span></span><"line409"><span></span><span><<span class="start-tag">table</span> <span class="attribute-name">id</span>="<a class="attribute-value">results-table</a>" <span class="attribute-name">aria-describedby</span>="<a class="attribute-value">info-run</a>"></span><span> </span></span><"line410"><span> </span><span><<span class="start-tag">thead</span>></span><span></span><span></<span class="end-tag">thead</span>></span><span> </span></span><"line411"><span> </span><span><<span class="start-tag">tbody</span>></span><span></span><span></<span class="end-tag">tbody</span>></span><span> </span></span><"line412"><span></span><span></<span class="end-tag">table</span>></span><span> </span></span><"line413"><span> </span></span><"line414"><span></span><span><<span class="start-tag">script</span>></span><span> </span></span><"line415"><span>// The json data on wpewebkit.org/wptreport-distilled-data is automatically updated </span></span><"line416"><span>// by a cronjob on the server running wptreport-distiller </span></span><"line417"><span>// IMPORTANT: WPTReportDistilledBaseURL should be either empty '' or end in slash '/' </span></span><"line418"><span>const WPTReportDistilledBaseURL = '{{\field{\*\fldinst{HYPERLINK https://wpewebkit.org/wptreport-distilled-data/ }}{\fldrslt{https://wpewebkit.org/wptreport-distilled-data/\ul0\cf0}}}}\f0\fs22 ' </span></span><"line419"><span>const versionsFile = 'versions_available.json' </span></span><"line420"><span>const viewType = document.getElementById('viewType'); </span></span><"line421"><span>const versionSelect = document.getElementById('version-select'); </span></span><"line422"><span>const detailsWPTCheckbox = document.getElementById('show-wpt-details'); </span></span><"line423"><span>const unknownCheckbox = document.getElementById('show-unknown'); </span></span><"line424"><span>const BCDSupportSelector = document.getElementById('bcd-support-selector'); </span></span><"line425"><span>const showBCDSupportColumn = document.getElementById('show-bcd-supported-in'); </span></span><"line426"><span>const interoperableCheckbox = document.getElementById('show-interoperable'); </span></span><"line427"><span>const tableHead = document.querySelector('#results-table thead'); </span></span><"line428"><span>const tableBody = document.querySelector('#results-table tbody'); </span></span><"line429"><span>const metaRunDate = document.getElementById('meta-run-date'); </span></span><"line430"><span>const metaRunLink = document.getElementById('meta-run-link'); </span></span><"line431"><span>const detailsExplanation = document.getElementById("explanation-text"); </span></span><"line432"><span>const detailsAdvancedOptions = document.getElementById("advanced-options"); </span></span><"line433"><span>const explanationsPanelWPT = document.getElementById('wpt-explanation-panel'); </span></span><"line434"><span>const explanationsPanelBCD = document.getElementById('bcd-explanation-panel'); </span></span><"line435"><span>const jsonCache = Object.create(null); </span></span><"line436"><span>let tableSourceResults; </span></span><"line437"><span>let paramsURL; </span></span><"line438"><span>let tableSearch; </span></span><"line439"><span>let tableCounter; </span></span><"line440"><span>let tableRows; </span></span><"line441"><span> </span></span><"line442"><span>function clearTable() \{ </span></span><"line443"><span> tableSearch = null; </span></span><"line444"><span> tableCounter = null; </span></span><"line445"><span> tableRows = null; </span></span><"line446"><span> tableHead.innerHTML = ''; </span></span><"line447"><span> tableBody.innerHTML = ''; </span></span><"line448"><span>\} </span></span><"line449"><span> </span></span><"line450"><span>function refreshURLWithParams(queryStringName, queryStringValue, queryStringDefault) \{ </span></span><"line451"><span> if (queryStringValue === queryStringDefault) </span></span><"line452"><span> paramsURL.delete(queryStringName); </span></span><"line453"><span> else </span></span><"line454"><span> paramsURL.set(queryStringName, queryStringValue); </span></span><"line455"><span> // Update URL without reloading </span></span><"line456"><span> const queryStringFull = paramsURL.toString(); </span></span><"line457"><span> if (queryStringFull) </span></span><"line458"><span> history.pushState(null, '', `$\{window.location.pathname\}?$\{queryStringFull\}`); </span></span><"line459"><span> else </span></span><"line460"><span> history.pushState(null, '', `$\{window.location.pathname\}`); </span></span><"line461"><span>\} </span></span><"line462"><span> </span></span><"line463"><span>unknownCheckbox.addEventListener('change', (e) => \{ </span></span><"line464"><span> clearTable(); </span></span><"line465"><span> renderTableWPT(); </span></span><"line466"><span> refreshURLWithParams('wu', unknownCheckbox.checked? 1 : 0, 0); </span></span><"line467"><span>\}); </span></span><"line468"><span>detailsWPTCheckbox.addEventListener('change', (e) => \{ </span></span><"line469"><span> clearTable(); </span></span><"line470"><span> renderTableWPT(); </span></span><"line471"><span> refreshURLWithParams('wd', detailsWPTCheckbox.checked? 1 : 0, 0); </span></span><"line472"><span>\}); </span></span><"line473"><span>interoperableCheckbox.addEventListener('change', (e) => \{ </span></span><"line474"><span> clearTable(); </span></span><"line475"><span> renderTableWPT(); </span></span><"line476"><span> refreshURLWithParams('wi', interoperableCheckbox.checked? 1 : 0, 0); </span></span><"line477"><span>\}); </span></span><"line478"><span>BCDSupportSelector.addEventListener('change', (e) => \{ </span></span><"line479"><span> clearTable(); </span></span><"line480"><span> renderTableBCD(); </span></span><"line481"><span> refreshURLWithParams('bs', BCDSupportSelector.value); </span></span><"line482"><span>\}); </span></span><"line483"><span>showBCDSupportColumn.addEventListener('change', (e) => \{ </span></span><"line484"><span> clearTable(); </span></span><"line485"><span> renderTableBCD(); </span></span><"line486"><span> refreshURLWithParams('bc', showBCDSupportColumn.checked? 1 : 0, 0); </span></span><"line487"><span>\}); </span></span><"line488"><span>versionSelect.addEventListener('change', (e) => \{ </span></span><"line489"><span> clearTable(); </span></span><"line490"><span> loadData(); </span></span><"line491"><span> refreshURLWithParams('ver', versionSelect.value); </span></span><"line492"><span>\}); </span></span><"line493"><span> </span></span><"line494"><span>document.getElementById('bcd-view-link').addEventListener('click', function(event) \{ </span></span><"line495"><span> event.preventDefault(); </span></span><"line496"><span> document.querySelector('option[data-view="BCD"]').selected = true; </span></span><"line497"><span> viewType.dispatchEvent(new Event('change')); </span></span><"line498"><span>\}); </span></span><"line499"><span> </span></span><"line500"><span>document.getElementById('wpt-view-link').addEventListener('click', function(event) \{ </span></span><"line501"><span> event.preventDefault(); </span></span><"line502"><span> document.querySelector('option[data-view="WPT"]').selected = true; </span></span><"line503"><span> viewType.dispatchEvent(new Event('change')); </span></span><"line504"><span>\}); </span></span><"line505"><span> </span></span><"line506"><span> </span></span><"line507"><span>function getViewName() \{ </span></span><"line508"><span> return viewType[viewType.selectedIndex].dataset.view </span></span><"line509"><span>\} </span></span><"line510"><span> </span></span><"line511"><span>function updateView() \{ </span></span><"line512"><span> tableSourceResults = getViewName() </span></span><"line513"><span> clearTable(); </span></span><"line514"><span> updateTableSourceResultsView(); </span></span><"line515"><span> refreshURLWithParams('src', tableSourceResults); </span></span><"line516"><span>\} </span></span><"line517"><span> </span></span><"line518"><span>viewType.onchange = updateView </span></span><"line519"><span> </span></span><"line520"><span>detailsExplanation.addEventListener('toggle', () => \{ </span></span><"line521"><span> refreshURLWithParams('de', detailsExplanation.open? 1 : 0, 1); </span></span><"line522"><span>\}); </span></span><"line523"><span>detailsAdvancedOptions.addEventListener('toggle', () => \{ </span></span><"line524"><span> refreshURLWithParams('da', detailsAdvancedOptions.open? 1 : 0, 0); </span></span><"line525"><span>\}); </span></span><"line526"><span> </span></span><"line527"><span>// update things also when the back button is pressed </span></span><"line528"><span>window.addEventListener('popstate', () => \{ loadAndRenderView(false); \}); </span></span><"line529"><span> </span></span><"line530"><span> </span></span><"line531"><span>function toggleExplanationSection() \{ </span></span><"line532"><span> explanationsPanelWPT.hidden = (tableSourceResults !== 'WPT'); </span></span><"line533"><span> explanationsPanelBCD.hidden = (tableSourceResults !== 'BCD'); </span></span><"line534"><span>\} </span></span><"line535"><span> </span></span><"line536"><span> </span></span><"line537"><span>function updateAdvancedOptions() \{ </span></span><"line538"><span> if (tableSourceResults === "WPT") \{ </span></span><"line539"><span> document.querySelectorAll('.wpt-advanced-option').forEach(el => el.style.removeProperty("display")); </span></span><"line540"><span> document.querySelectorAll('.bcd-advanced-option').forEach(el => el.style.display = 'none'); </span></span><"line541"><span> \} else \{ </span></span><"line542"><span> document.querySelectorAll('.bcd-advanced-option').forEach(el => el.style.removeProperty("display")); </span></span><"line543"><span> document.querySelectorAll('.wpt-advanced-option').forEach(el => el.style.display = 'none') </span></span><"line544"><span> \} </span></span><"line545"><span>\} </span></span><"line546"><span> </span></span><"line547"><span>function maybeUpdateCheckboxDefValue(checkBoxObject, queryStringName) \{ </span></span><"line548"><span> const valueFromQS = paramsURL.get(queryStringName); </span></span><"line549"><span> checkBoxObject.checked = valueFromQS === '1'; </span></span><"line550"><span> </span></span><"line551"><span>\} </span></span><"line552"><span> </span></span><"line553"><span>function maybeUpdateSelectDefValue(selectObject, queryStringName) \{ </span></span><"line554"><span> const valueFromQS = paramsURL.get(queryStringName); </span></span><"line555"><span> if (valueFromQS) \{ </span></span><"line556"><span> const optionExists = Array.from(selectObject.options).some(opt => opt.value === valueFromQS); </span></span><"line557"><span> if (optionExists) </span></span><"line558"><span> selectObject.value = valueFromQS; </span></span><"line559"><span> \} else \{ </span></span><"line560"><span> // if no value passed, default to select the first option </span></span><"line561"><span> selectObject.selectedIndex = 0; </span></span><"line562"><span> \} </span></span><"line563"><span>\} </span></span><"line564"><span> </span></span><"line565"><span>function maybeUpdateDetailsOpenValue(detailsObject, queryStringName, defValue) \{ </span></span><"line566"><span> const valueFromQS = paramsURL.get(queryStringName); </span></span><"line567"><span> detailsObject.open = valueFromQS? valueFromQS === '1' : defValue; </span></span><"line568"><span>\} </span></span><"line569"><span> </span></span><"line570"><span> </span></span><"line571"><span>function updateOptionsDefaultValues() \{ </span></span><"line572"><span> maybeUpdateCheckboxDefValue(unknownCheckbox, 'wu'); </span></span><"line573"><span> maybeUpdateCheckboxDefValue(detailsWPTCheckbox, 'wd'); </span></span><"line574"><span> maybeUpdateCheckboxDefValue(interoperableCheckbox, 'wi'); </span></span><"line575"><span> maybeUpdateCheckboxDefValue(showBCDSupportColumn, 'bc'); </span></span><"line576"><span> maybeUpdateSelectDefValue(BCDSupportSelector, 'bs'); </span></span><"line577"><span> maybeUpdateDetailsOpenValue(detailsExplanation, 'de', true); </span></span><"line578"><span> maybeUpdateDetailsOpenValue(detailsAdvancedOptions, 'da', false); </span></span><"line579"><span> tableSourceResults = paramsURL.get('src') === 'BCD' ? 'BCD' : 'WPT'; // default view </span></span><"line580"><span> document.querySelector(`option[data-view="$\{tableSourceResults\}"]`).selected = true; </span></span><"line581"><span>\} </span></span><"line582"><span> </span></span><"line583"><span> </span></span><"line584"><span>// Preloading all the jsons makes the UI much faster when changing views and needs </span><span><5</span><span>MB of RAM </span></span><"line585"><span>async function lazyPreloadAllJsons() \{ </span></span><"line586"><span> const shouldAvoidPreload = (navigator.connection &&&& (navigator.connection.saveData || ['slow-2g', '2g', '3g'].includes(navigator.connection.effectiveType))); </span></span><"line587"><span> if (shouldAvoidPreload) </span></span><"line588"><span> return; </span></span><"line589"><span> // preload them in per-version-sets instead all at the same time to minimize network load </span></span><"line590"><span> for (const v of versionsAvailable.versions) \{ </span></span><"line591"><span> const fileList = [v.bcd_results, v.wpt_interoperability, v.wpt_results, v.wpt_specs]; </span></span><"line592"><span> const uniqueJsonURLs = [...new Set(fileList.filter(Boolean).map(filename => WPTReportDistilledBaseURL + filename))]; </span></span><"line593"><span> await jsonFetchCache(uniqueJsonURLs); </span></span><"line594"><span> \} </span></span><"line595"><span>\} </span></span><"line596"><span> </span></span><"line597"><span>async function loadAndRenderView(firstLoad) \{ </span></span><"line598"><span> clearTable(); </span></span><"line599"><span> paramsURL = new URLSearchParams(window.location.search); </span></span><"line600"><span> updateOptionsDefaultValues(); </span></span><"line601"><span> if (firstLoad) </span></span><"line602"><span> await loadVersionsAvailable(); </span></span><"line603"><span> maybeUpdateSelectDefValue(versionSelect, 'ver'); </span></span><"line604"><span> await updateTableSourceResultsView(); </span></span><"line605"><span> if (firstLoad) \{ </span></span><"line606"><span> if ('requestIdleCallback' in window) \{ </span></span><"line607"><span> requestIdleCallback(() => lazyPreloadAllJsons()); </span></span><"line608"><span> \} else \{ </span></span><"line609"><span> if (document.readyState === 'complete') </span></span><"line610"><span> lazyPreloadAllJsons(); </span></span><"line611"><span> else </span></span><"line612"><span> window.addEventListener('load', () => lazyPreloadAllJsons()); </span></span><"line613"><span> \} </span></span><"line614"><span> \} </span></span><"line615"><span>\} </span></span><"line616"><span> </span></span><"line617"><span> </span></span><"line618"><span>async function updateTableSourceResultsView() \{ </span></span><"line619"><span> toggleExplanationSection(); </span></span><"line620"><span> updateAdvancedOptions(); </span></span><"line621"><span> return await loadData(); </span></span><"line622"><span>\} </span></span><"line623"><span> </span></span><"line624"><span>let versionsAvailable = null; </span></span><"line625"><span>let specsData = null; </span></span><"line626"><span>let resultsData = null; </span></span><"line627"><span>let productVersionQueryString = null; </span></span><"line628"><span> </span></span><"line629"><span>async function loadVersionsAvailable() \{ </span></span><"line630"><span> [versionsAvailable] = await jsonFetchCache([WPTReportDistilledBaseURL + versionsFile]) </span></span><"line631"><span> const defVersion = versionSelect.value || versionsAvailable.metadata.default_version; </span></span><"line632"><span> versionSelect.innerHTML = ""; </span></span><"line633"><span> if (versionsAvailable &&&& versionsAvailable.versions) \{ </span></span><"line634"><span> versionsAvailable.versions.forEach(v => \{ </span></span><"line635"><span> const option = document.createElement('option'); </span></span><"line636"><span> option.value = v.version; </span></span><"line637"><span> option.textContent = v.version; </span></span><"line638"><span> versionSelect.appendChild(option); </span></span><"line639"><span> \}); </span></span><"line640"><span> const existsVersion = Array.from(versionSelect.options).some(opt => opt.value === defVersion); </span></span><"line641"><span> if (existsVersion) </span></span><"line642"><span> versionSelect.value = defVersion; </span></span><"line643"><span> \} else \{ </span></span><"line644"><span> const option = document.createElement('option'); </span></span><"line645"><span> option.disabled = true; </span></span><"line646"><span> option.textContent = "Error loading versions"; </span></span><"line647"><span> versionSelect.appendChild(option); </span></span><"line648"><span> \} </span></span><"line649"><span>\} </span></span><"line650"><span> </span></span><"line651"><span>async function loadData() \{ </span></span><"line652"><span> if (!versionsAvailable) </span></span><"line653"><span> return; </span></span><"line654"><span> if (tableSourceResults === "WPT") </span></span><"line655"><span> return await loadWPTData(); </span></span><"line656"><span> return await loadBCDData(); </span></span><"line657"><span>\} </span></span><"line658"><span> </span></span><"line659"><span> </span></span><"line660"><span>function updateRunInfo(resultsData, version) \{ </span></span><"line661"><span> let browserVersion; </span></span><"line662"><span> browserVersion = version === "nightly" ? (resultsData.metadata.browser_version || version) : (resultsData.metadata.browser_version?.split('.').slice(0, 2).join('.') || version); </span></span><"line663"><span> if (tableSourceResults === "WPT") \{ </span></span><"line664"><span> // We can't pass the version for the nightlies until {{\field{\*\fldinst{HYPERLINK https://github.com/web-platform-tests/wpt.fyi/pull/4398 }}{\fldrslt{https://github.com/web-platform-tests/wpt.fyi/pull/4398\ul0\cf0}}}}\f0\fs22  gets fixed </span></span><"line665"><span> // But it should work fine anyway because is not expected to find more than one nightly/experimental run per WPT commit </span></span><"line666"><span> productVersionQueryString = version === "nightly" ? `sha=$\{resultsData.metadata.wpt_version\}&&label=experimental&&product=wpewebkit` : `sha=$\{resultsData.metadata.wpt_version\}&&label=stable&&product=wpewebkit-$\{resultsData.metadata.browser_version\}`; </span></span><"line667"><span> document.getElementById('wpt-link').href = `https://wpt.fyi/results/?$\{productVersionQueryString\}`; </span></span><"line668"><span> // short to 7 chars because its the same short-sha length used on wpt.fyi </span></span><"line669"><span> const wptShaShort = resultsData.metadata.wpt_version.slice(0, 7) || '\f2\emdash '; </span></span><"line670"><span> metaRunLink.textContent = `test run using WPT $\{wptShaShort\} and WPE $\{browserVersion\}`; </span></span><"line671"><span> metaRunLink.href = `https://wpt.fyi/results/?$\{productVersionQueryString\}`; </span></span><"line672"><span> \} else \{ </span></span><"line673"><span> metaRunLink.textContent = `test run using BCD v$\{resultsData.metadata.mdn_bcd_collector_version\} and WPE $\{browserVersion\}`; </span></span><"line674"><span> metaRunLink.href = `https://mdn-bcd-collector.gooborg.com/changelog`; </span></span><"line675"><span> \} </span></span><"line676"><span> metaRunDate.textContent = new Date(resultsData.metadata.testrun_timestamp_end * 1000).toISOString().slice(0, 10) || '\emdash '; </span></span><"line677"><span>\} </span></span><"line678"><span> </span></span><"line679"><span> </span></span><"line680"><span>async function jsonFetchCache(urls) \{ </span></span><"line681"><span> const results = await Promise.all(urls.map(async (url) =\f0\lang1033 >\f2  \{ </span></span><"line682"><span> const cached = jsonCache[url]; </span></span><"line683"><span> if (cached) </span></span><"line684"><span> return cached; </span></span><"line685"><span> const fetchPromise = fetch(url) </span></span><"line686"><span> .then(res =\f0\lang1033 >\f2  \{ </span></span><"line687"><span> if (!res.ok) </span></span><"line688"><span> throw new Error(`Failed to fetch $\{url\}: $\{res.status\}`); </span></span><"line689"><span> return res.json(); </span></span><"line690"><span> \}) </span></span><"line691"><span> .catch(err =\f0\lang1033 >\f2  \{ </span></span><"line692"><span> delete jsonCache[url]; // allow retry </span></span><"line693"><span> throw err; </span></span><"line694"><span> \}); </span></span><"line695"><span> jsonCache[url] = fetchPromise; </span></span><"line696"><span> const data = await fetchPromise; </span></span><"line697"><span> jsonCache[url] = data; </span></span><"line698"><span> return data; </span></span><"line699"><span> \})); </span></span><"line700"><span> return results; </span></span><"line701"><span>\} </span></span><"line702"><span> </span></span><"line703"><span> </span></span><"line704"><span>async function loadBCDData() \{ </span></span><"line705"><span> const version = versionSelect.value; </span></span><"line706"><span> const selected = versionsAvailable.versions.find(v =\f0\lang1033 >\f2  v.version === version); </span></span><"line707"><span> const currentResultsUrl = WPTReportDistilledBaseURL + selected.bcd_results; </span></span><"line708"><span> [resultsData] = await jsonFetchCache([currentResultsUrl]); </span></span><"line709"><span> updateRunInfo(resultsData, version); </span></span><"line710"><span> renderTableBCD(); </span></span><"line711"><span>\} </span></span><"line712"><span> </span></span><"line713"><span>async function loadWPTData() \{ </span></span><"line714"><span> const version = versionSelect.value; </span></span><"line715"><span> const selected = versionsAvailable.versions.find(v =\f0\lang1033 >\f2  v.version === version); </span></span><"line716"><span> const currentSpecUrl = WPTReportDistilledBaseURL + selected.wpt_specs; </span></span><"line717"><span> const currentResultsUrl = WPTReportDistilledBaseURL + selected.wpt_results; </span></span><"line718"><span> const currentResultsEnginesUrl = WPTReportDistilledBaseURL + selected.wpt_interoperability; </span></span><"line719"><span> [specsData, resultsData, resultsEnginesData] = await jsonFetchCache([currentSpecUrl, currentResultsUrl, currentResultsEnginesUrl]) </span></span><"line720"><span> updateRunInfo(resultsData, version); </span></span><"line721"><span> renderTableWPT(); </span></span><"line722"><span>\} </span></span><"line723"><span> </span></span><"line724"><span> </span></span><"line725"><span>function calculatePercentage(pass, total) \{ </span></span><"line726"><span> return total \f0\lang1033 >\f2  0 ? Math.round(1000 * pass / total) / 10 : 0; </span></span><"line727"><span>\} </span></span><"line728"><span> </span></span><"line729"><span>function getSubtestsMaintests(testStr) \{ </span></span><"line730"><span> const [subtestsStr, maintestsStr] = testStr.split(':'); </span></span><"line731"><span> const [subtestPass, subtestTotal] = subtestsStr.split('/'); </span></span><"line732"><span> const [maintestsPass, maintestsTotal] = maintestsStr.split('/'); </span></span><"line733"><span> return [ </span></span><"line734"><span> parseInt(subtestPass, 10), </span></span><"line735"><span> parseInt(subtestTotal, 10), </span></span><"line736"><span> parseFloat(maintestsPass), </span></span><"line737"><span> parseInt(maintestsTotal, 10) </span></span><"line738"><span> ]; </span></span><"line739"><span>\} </span></span><"line740"><span> </span></span><"line741"><span> </span></span><"line742"><span>function runSearchFilter() \{ </span></span><"line743"><span> if (!tableSearch) </span></span><"line744"><span> return; </span></span><"line745"><span> const inputFilter = tableSearch.value.trim(); </span></span><"line746"><span> if (!inputFilter) \{ </span></span><"line747"><span> for (const row of tableRows) \{ </span></span><"line748"><span> const firstCell = row.cells[0]; </span></span><"line749"><span> if (!firstCell) </span></span><"line750"><span> continue; </span></span><"line751"><span> firstCell.querySelectorAll('mark').forEach(m =\f0\lang1033 >\f2  </span></span><"line752"><span> m.replaceWith(document.createTextNode(m.textContent)) </span></span><"line753"><span> ); </span></span><"line754"><span> row.hidden = false; </span></span><"line755"><span> \} </span></span><"line756"><span> tableSearch.classList.remove('filter-input-notfound'); </span></span><"line757"><span> tableCounter.textContent = ` ($\{tableRows.length\})`; </span></span><"line758"><span> return; </span></span><"line759"><span> \} </span></span><"line760"><span> // sort by substring length, so with "he" and "hello" in "hello word" it matches "hello". </span></span><"line761"><span> const filterWords = [...new Set(inputFilter.toLowerCase().split(/\\s+/).filter(Boolean))].sort((a, b) =\f0\lang1033 >\f2  b.length - a.length); </span></span><"line762"><span> const regexPattern = filterWords.map(w =\f0\lang1033 >\f2  w.replace(/[.*+?^$\{\}()|[\\]\\\\]/g, '{{\field{\*\fldinst{HYPERLINK "\\\\\\\\$&&')).join('|"}}{\fldrslt{\\\\$&&')).join('|\ul0\cf0}}}}\f2\fs22 '); </span></span><"line763"><span> const regex = new RegExp(regexPattern, 'gi'); </span></span><"line764"><span> let visibleRows = 0; </span></span><"line765"><span> for (const row of tableRows) \{ </span></span><"line766"><span> const firstCell = row.cells[0]; </span></span><"line767"><span> if (!firstCell) </span></span><"line768"><span> continue; </span></span><"line769"><span> const originalText = firstCell.textContent; </span></span><"line770"><span> const originalTextLower = originalText.toLowerCase(); </span></span><"line771"><span> const allFilterWordsMatch = filterWords.every(w =\f0\lang1033 >\f2  originalTextLower.includes(w)); </span></span><"line772"><span> if (!allFilterWordsMatch) \{ </span></span><"line773"><span> row.hidden = true; </span></span><"line774"><span> continue; </span></span><"line775"><span> \} </span></span><"line776"><span> visibleRows++; </span></span><"line777"><span> row.hidden = false; </span></span><"line778"><span> const targetElement = firstCell.querySelector('a') || firstCell; </span></span><"line779"><span> targetElement.innerHTML = originalText.replace(regex, '</span><span>\f0\lang1033 <\f2 m</span><span>ark\f0\lang1033 >\f2 $&&</span><span>\f0\lang1033 <\f2 /<span></span>m</span><span>ark\f0\lang1033 >\f2 '); </span></span><"line780"><span> \} </span></span><"line781"><span> tableSearch.classList.toggle("filter-input-notfound", !visibleRows); </span></span><"line782"><span> tableCounter.textContent = ` ($\{visibleRows\})`; </span></span><"line783"><span>\} </span></span><"line784"><span> </span></span><"line785"><span> </span></span><"line786"><span>function createThWithSearch(thText) \{ </span></span><"line787"><span> const th = document.createElement("th"); </span></span><"line788"><span> const thWrapper = document.createElement("div"); </span></span><"line789"><span> thWrapper.style.display = "flex"; </span></span><"line790"><span> thWrapper.style.justifyContent = "space-between"; </span></span><"line791"><span> thWrapper.style.alignItems = "center"; </span></span><"line792"><span> thWrapper.style.width = "100%"; </span></span><"line793"><span> </span></span><"line794"><span> const labelWrapper = document.createElement("span"); </span></span><"line795"><span> const label = document.createElement("span"); </span></span><"line796"><span> label.id = "th-search-text-content"; </span></span><"line797"><span> label.textContent = thText; </span></span><"line798"><span> tableCounter = document.createElement("span"); </span></span><"line799"><span> tableCounter.id = "th-search-counter"; </span></span><"line800"><span> tableCounter.textContent = '(0)'; </span></span><"line801"><span> labelWrapper.appendChild(label); </span></span><"line802"><span> labelWrapper.appendChild(tableCounter); </span></span><"line803"><span> </span></span><"line804"><span> tableSearch = document.createElement("input"); </span></span><"line805"><span> tableSearch.type = "text"; </span></span><"line806"><span> tableSearch.id = "tableSearch"; </span></span><"line807"><span> tableSearch.placeholder = "Filter..."; </span></span><"line808"><span> tableSearch.style.maxWidth = "15ch"; </span></span><"line809"><span> </span></span><"line810"><span> let searchTimeout; </span></span><"line811"><span> tableSearch.addEventListener("input", function () \{ </span></span><"line812"><span> clearTimeout(searchTimeout); </span></span><"line813"><span> searchTimeout = setTimeout(runSearchFilter, 250); </span></span><"line814"><span> \}); </span></span><"line815"><span> </span></span><"line816"><span> thWrapper.appendChild(labelWrapper); </span></span><"line817"><span> thWrapper.appendChild(tableSearch); </span></span><"line818"><span> th.appendChild(thWrapper); </span></span><"line819"><span> return th; </span></span><"line820"><span>\} </span></span><"line821"><span> </span></span><"line822"><span> </span></span><"line823"><span>function renderTableBCD() \{ </span></span><"line824"><span> let total_specs = 0; </span></span><"line825"><span> const headRow = document.createElement('tr'); </span></span><"line826"><span> const thSearch = createThWithSearch('Features'); </span></span><"line827"><span> headRow.appendChild(thSearch); </span></span><"line828"><span> const showSupportColumn = showBCDSupportColumn.checked; </span></span><"line829"><span> if (showSupportColumn) \{ </span></span><"line830"><span> const thSupport = document.createElement('th'); </span></span><"line831"><span> thSupport.textContent = 'Supported in'; </span></span><"line832"><span> headRow.appendChild(thSupport); </span></span><"line833"><span> \} </span></span><"line834"><span> tableHead.appendChild(headRow); </span></span><"line835"><span> </span></span><"line836"><span> const selectorValue = BCDSupportSelector.value; </span></span><"line837"><span> const isAnySelector = selectorValue === "Any"; </span></span><"line838"><span> </span></span><"line839"><span> // Process test results </span></span><"line840"><span> for (const testName in resultsData.results) \{ </span></span><"line841"><span> const \{ link: linkUrl, pass: passList = [] \} = resultsData.results[testName]; </span></span><"line842"><span> if (isAnySelector || passList.includes(selectorValue)) \{ </span></span><"line843"><span> const row = document.createElement('tr'); </span></span><"line844"><span> const tdSpec = document.createElement('td'); </span></span><"line845"><span> if (linkUrl) \{ </span></span><"line846"><span> const a = document.createElement('a'); </span></span><"line847"><span> a.href = linkUrl; </span></span><"line848"><span> a.target = '_blank'; </span></span><"line849"><span> a.textContent = testName; </span></span><"line850"><span> tdSpec.appendChild(a); </span></span><"line851"><span> \} else \{ </span></span><"line852"><span> tdSpec.textContent = testName; </span></span><"line853"><span> \} </span></span><"line854"><span> row.appendChild(tdSpec); </span></span><"line855"><span> if (showSupportColumn) \{ </span></span><"line856"><span> const tdSupport = document.createElement('td'); </span></span><"line857"><span> tdSupport.textContent = passList.sort().join(', '); </span></span><"line858"><span> row.appendChild(tdSupport); </span></span><"line859"><span> \} </span></span><"line860"><span> </span></span><"line861"><span> tableBody.appendChild(row); </span></span><"line862"><span> total_specs++; </span></span><"line863"><span> \} </span></span><"line864"><span> \} </span></span><"line865"><span> document.getElementById('th-search-text-content').textContent = 'Features'; </span></span><"line866"><span> tableCounter.textContent = ` ($\{total_specs\})`; </span></span><"line867"><span> tableRows = document.querySelectorAll("#results-table tbody tr"); </span></span><"line868"><span>\} // end renderTableBCD() </span></span><"line869"><span> </span></span><"line870"><span> </span></span><"line871"><span>function renderTableWPT() \{ </span></span><"line872"><span> const showDetailsWPT = detailsWPTCheckbox.checked; </span></span><"line873"><span> const showUnknown = unknownCheckbox.checked; </span></span><"line874"><span> const showInteroperable = interoperableCheckbox.checked; </span></span><"line875"><span> let total_specs = 0; </span></span><"line876"><span> </span></span><"line877"><span> const headers = []; </span></span><"line878"><span> const headRow = document.createElement('tr'); </span></span><"line879"><span> const thSearch = createThWithSearch('Specifications'); </span></span><"line880"><span> headRow.appendChild(thSearch); </span></span><"line881"><span> headers.push('Passrate% (subtests)'); </span></span><"line882"><span> if (showDetailsWPT) \{ </span></span><"line883"><span> headers.push('Subtest counts'); </span></span><"line884"><span> headers.push('WPT Directory'); </span></span><"line885"><span> \} </span></span><"line886"><span> headers.forEach(h =\f0\lang1033 >\f2  \{ </span></span><"line887"><span> const th = document.createElement('th'); </span></span><"line888"><span> th.textContent = h; </span></span><"line889"><span> headRow.appendChild(th); </span></span><"line890"><span> \}); </span></span><"line891"><span> tableHead.appendChild(headRow); </span></span><"line892"><span> </span></span><"line893"><span> // start for-loop drawing the rows </span></span><"line894"><span> for (const [dir, value] of Object.entries(resultsData.results)) \{ </span></span><"line895"><span> </span></span><"line896"><span> const [subTestsPass, subTestsTotal, mainTestsPass, mainTestsTotal] = getSubtestsMaintests(value); </span></span><"line897"><span> let percent = calculatePercentage(subTestsPass, subTestsTotal); </span></span><"line898"><span> let spec = specsData.specs.find(s =\f0\lang1033 >\f2  s.dirw === dir); </span></span><"line899"><span> let specText = spec ? spec.text : undefined; </span></span><"line900"><span> let specLink = spec ? spec.link : undefined; </span></span><"line901"><span> </span></span><"line902"><span> if (!showUnknown &&&& !specText) </span></span><"line903"><span> continue; </span></span><"line904"><span> </span></span><"line905"><span> // calculate interoperable specs and skip non-interoperable unless the selected browser supports them </span></span><"line906"><span> let engines; </span></span><"line907"><span> let enginePassrateList; </span></span><"line908"><span> </span></span><"line909"><span> engines = resultsEnginesData.results_engines || \{\}; </span></span><"line910"><span> enginePassrateList = Object.entries(engines).map(([engine, engineResults]) =\f0\lang1033 >\f2  \{ </span></span><"line911"><span> const str = engineResults[dir]; </span></span><"line912"><span> if (!str) return null; </span></span><"line913"><span> const [engineSubTestsPass, engineSubTestsTotal, engineMainTestsPass, engineMainTestsTotal] = getSubtestsMaintests(str); </span></span><"line914"><span> const rate = calculatePercentage(engineSubTestsPass, engineSubTestsTotal); </span></span><"line915"><span> // console.log(`ENGINE: $\{engine\}, DIR: $\{dir\}, STRING: $\{str\}, RATE: $\{rate\}`); </span></span><"line916"><span> return \{ </span></span><"line917"><span> engine, </span></span><"line918"><span> rate </span></span><"line919"><span> \}; </span></span><"line920"><span> \}).filter(r =\f0\lang1033 >\f2  r !== null); </span></span><"line921"><span> </span></span><"line922"><span> // for clarity only render specs supported or interoperable </span></span><"line923"><span> const numberSupportedEngines = enginePassrateList.filter(r =\f0\lang1033 >\f2  r.rate \f0\lang1033 >\f2 = 70).length; </span></span><"line924"><span> if (enginePassrateList.length === 3) \{ </span></span><"line925"><span> if (numberSupportedEngines </span><span>\f0\lang1033 <\f2  </span><span>2) \{ </span></span><"line926"><span> // non-interoperable: render only if browser supports it </span></span><"line927"><span> if (percent </span><span>\f0\lang1033 <\f2  </span><span>30) \{ </span></span><"line928"><span> // console.log(`SKIP non-interoperable: $\{specText\}`); </span></span><"line929"><span> continue; </span></span><"line930"><span> \} </span></span><"line931"><span> \} else \{ </span></span><"line932"><span> // interoperable: render if browser supports it, or if showInteroperable button checked </span></span><"line933"><span> if (percent </span><span>\f0\lang1033 <\f2  </span><span>30 &&&& !showInteroperable) \{ </span></span><"line934"><span> // console.log(`SKIP interoperable: $\{specText\}`); </span></span><"line935"><span> continue; </span></span><"line936"><span> \} </span></span><"line937"><span> \} </span></span><"line938"><span> \} else if (enginePassrateList.length === 0) \{ </span></span><"line939"><span> console.log(`WARNING: We have no data of web-engines pass-rate for spec $\{dir\}. Likely new spec. Ignoring it`) </span></span><"line940"><span> continue; </span></span><"line941"><span> \} else \{ </span></span><"line942"><span> console.error(`ERROR: Number of engines is not 3 but $\{enginePassrateList.length\} for spec $\{dir\}!!!`); </span></span><"line943"><span> throw new Error("Number of Web engines is not 3!!!"); </span></span><"line944"><span> \} </span></span><"line945"><span> </span></span><"line946"><span> const row = document.createElement('tr'); </span></span><"line947"><span> const tdSpec = document.createElement('td'); </span></span><"line948"><span> if (specText) \{ </span></span><"line949"><span> const a = document.createElement('a'); </span></span><"line950"><span> a.href = specLink; </span></span><"line951"><span> a.target = '_blank'; </span></span><"line952"><span> a.textContent = specText; </span></span><"line953"><span> tdSpec.appendChild(a); </span></span><"line954"><span> \} else \{ </span></span><"line955"><span> tdSpec.textContent = dir; </span></span><"line956"><span> \} </span></span><"line957"><span> row.appendChild(tdSpec); </span></span><"line958"><span> const tdRate = document.createElement('td'); </span></span><"line959"><span> tdRate.textContent = new Intl.NumberFormat(navigator.language).format(percent) + '%' </span></span><"line960"><span> if (!showDetailsWPT) \{ </span></span><"line961"><span> let smallnote = document.createElement('small'); </span></span><"line962"><span> smallnote.textContent = ` (of $\{new Intl.NumberFormat(navigator.language).format(subTestsTotal)\})`; </span></span><"line963"><span> tdRate.appendChild(smallnote); </span></span><"line964"><span> \} </span></span><"line965"><span> tdRate.classList.add('barred'); </span></span><"line966"><span> tdRate.style.setProperty('--dataPct', percent + '%'); </span></span><"line967"><span> tdRate.style.setProperty('--dataHue', percent + 'deg'); </span></span><"line968"><span> row.appendChild(tdRate); </span></span><"line969"><span> </span></span><"line970"><span> if (showDetailsWPT) \{ </span></span><"line971"><span> const tdInfo = document.createElement('td'); </span></span><"line972"><span> tdInfo.textContent = `$\{subTestsPass\}/$\{subTestsTotal\} pass ($\{mainTestsTotal\} tests)`; </span></span><"line973"><span> row.appendChild(tdInfo); </span></span><"line974"><span> const tdDir = document.createElement('td'); </span></span><"line975"><span> let testLink = document.createElement('a'); </span></span><"line976"><span> testLink.href = `https://wpt.fyi/results/$\{dir\}?$\{productVersionQueryString\}`; </span></span><"line977"><span> testLink.target = '_blank'; </span></span><"line978"><span> testLink.textContent = dir; </span></span><"line979"><span> tdDir.appendChild(testLink); </span></span><"line980"><span> row.appendChild(tdDir); </span></span><"line981"><span> \} </span></span><"line982"><span> </span></span><"line983"><span> tableBody.appendChild(row); </span></span><"line984"><span> total_specs += 1; </span></span><"line985"><span> \} // end for-loop drawing the rows </span></span><"line986"><span> </span></span><"line987"><span> tableHead.querySelectorAll('th')[1].textContent = showDetailsWPT? 'Passrate%' : 'Passrate% (subtests)'; </span></span><"line988"><span> document.getElementById('th-search-text-content').textContent = 'Specifications'; </span></span><"line989"><span> tableCounter.textContent = ` ($\{total_specs\})`; </span></span><"line990"><span> tableRows = document.querySelectorAll("#results-table tbody tr"); </span></span><"line991"><span>\} // end renderTable() </span></span><"line992"><span> </span></span><"line993"><span>loadAndRenderView(true); </span></span><"line994"><span></span><span>\f0\lang1033 <\f2 /<span class="end-tag">script</span>\f0\lang1033 >\f2 </span><span> </span></span><"line995"><span> </span></span><"line996"><span> </span><span>\f0\lang1033 <\f2 <span class="start-tag">div</span> <span class="attribute-name">class</span>="<a class="attribute-value">survey</a>"\f0\lang1033 >\f2 </span><span> </span></span><"line997"><span> </span><span>\f0\lang1033 <\f2 <span class="start-tag">p</span>\f0\lang1033 >\f2 </span><span> </span></span><"line998"><span> If you\rquote re using WPE WebKit, or are considering doing so, </span><span>\f0\lang1033 <\f2 <span class="start-tag">strong</span>\f0\lang1033 >\f2 </span><span></span><span>\f0\lang1033 <\f2 <span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://docs.google.com/forms/d/e/1FAIpQLSchPgMGzuVc9ry5bdxF2uFnW2q3FcrSSqxJdOM4Fd2BD4s7dg/viewform?usp=pp_url&&entry.1179679285=WPEWebKit.org+website">https://docs.google.com/forms/d/e/1FAIpQLSchPgMGzuVc9ry5bdxF2uFnW2q3FcrSSqxJdOM4Fd2BD4s7dg/viewform?usp=pp_url<span class="entity"><span>&&</span>amp;</span>entry.1179679285=WPEWebKit.org+website</a>"\f0\lang1033 >\f2 </span><span>please take our brief user survey</span><span>\f0\lang1033 <\f2 /<span class="end-tag">a</span>\f0\lang1033 >\f2 </span><span></span><span>\f0\lang1033 <\f2 /<span class="end-tag">strong</span>\f0\lang1033 >\f2 </span><span>. Your input will help us make WPE WebKit better for you! </span></span><"line999"><span> </span><span>\f0\lang1033 <\f2 /<span class="end-tag">p</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1000"><span> </span><span>\f0\lang1033 <\f2 /<span class="end-tag">div</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1001"><span> </span><span>\f0\lang1033 <\f2 <span class="start-tag">style</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1002"><span> .survey \{ </span></span><"line1003"><span> position: relative; </span></span><"line1004"><span> padding-block: 2em 3em; </span></span><"line1005"><span> margin-block: 3em 0; </span></span><"line1006"><span> --bgrad: linear-gradient(180deg,#00C6 0.25em,#00B4 20%,40%,#00B2); </span></span><"line1007"><span> background: var(--bgrad); </span></span><"line1008"><span> border-image: var(--bgrad) 1; </span></span><"line1009"><span> border-image-outset: 0 50vmax; </span></span><"line1010"><span> border-image-width: 0 50vmax; </span></span><"line1011"><span> font-size: 1.25em; </span></span><"line1012"><span> \} </span></span><"line1013"><span> .survey::before \{ </span></span><"line1014"><span> content: url(/assets/img/survey.svg); </span></span><"line1015"><span> position: absolute; </span></span><"line1016"><span> top: -1.5em; </span></span><"line1017"><span> left: 0; </span></span><"line1018"><span> right: 0; </span></span><"line1019"><span> margin-inline: auto; </span></span><"line1020"><span> height: 3em; </span></span><"line1021"><span> width: auto; </span></span><"line1022"><span> aspect-ratio: 1/1; </span></span><"line1023"><span> filter: drop-shadow(0.25em 0.33em 0.33em #0006); </span></span><"line1024"><span> \} </span></span><"line1025"><span> .survey p \{ </span></span><"line1026"><span> padding-inline: 1em; </span></span><"line1027"><span> \} </span></span><"line1028"><span> </span><span>\f0\lang1033 <\f2 /<span class="end-tag">style</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1029"><span> </span></span><"line1030"><span> </span><span>\f0\lang1033 <\f2 /<span class="end-tag">main</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1031"><span> </span></span><"line1032"><span> </span><span>\f0\lang1033 <\f2 <span class="start-tag">dialog</span> <span class="attribute-name">id</span>="<a class="attribute-value">splash</a>"\f0\lang1033 >\f2 </span><span> </span></span><"line1033"><span></span><span>\f0\lang1033 <\f2 <span class="start-tag">p</span>\f0\lang1033 >\f2 </span><span>If you\rquote re using WPE WebKit, or are considering doing so, </span><span>\f0\lang1033 <\f2 <span class="start-tag">strong</span>\f0\lang1033 >\f2 </span><span>please take our brief user survey!</span><span>\f0\lang1033 <\f2 /<span class="end-tag">strong</span>\f0\lang1033 >\f2 </span><span> Your input will help us make WPE WebKit better for you.</span><span>\f0\lang1033 <\f2 /<span class="end-tag">p</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1034"><span></span><span>\f0\lang1033 <\f2 <span class="start-tag">div</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1035"><span></span><span>\f0\lang1033 <\f2 <span class="start-tag">button</span> <span class="attribute-name">is</span>="<a class="attribute-value">dis-misser</a>" <span class="attribute-name">id</span>="<a class="attribute-value">dismiss-Y</a>"\f0\lang1033 >\f2 </span><span>Yes</span><span>\f0\lang1033 <\f2 /<span class="end-tag">button</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1036"><span></span><span>\f0\lang1033 <\f2 <span class="start-tag">button</span> <span class="attribute-name">is</span>="<a class="attribute-value">dis-misser</a>" <span class="attribute-name">id</span>="<a class="attribute-value">dismiss-L</a>"\f0\lang1033 >\f2 </span><span>Ask again later</span><span>\f0\lang1033 <\f2 /<span class="end-tag">button</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1037"><span></span><span>\f0\lang1033 <\f2 <span class="start-tag">button</span> <span class="attribute-name">is</span>="<a class="attribute-value">dis-misser</a>" <span class="attribute-name">id</span>="<a class="attribute-value">dismiss-N</a>"\f0\lang1033 >\f2 </span><span>No</span><span>\f0\lang1033 <\f2 /<span class="end-tag">button</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1038"><span></span><span>\f0\lang1033 <\f2 /<span class="end-tag">div</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1039"><span></span><span>\f0\lang1033 <\f2 /<span class="end-tag">dialog</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1040"><span></span><span>\f0\lang1033 <\f2 <span class="start-tag">style</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1041"><span>#splash \{max-width: 50%; border-radius: 1em; padding-inline: 2em; outline: 50vmax solid #141316D0; background: #EEE;\} </span></span><"line1042"><span>#splash p \{font-size: 1.25em; color: inherit;\} </span></span><"line1043"><span>#splash img \{max-width: 60vw; max-height: 50vh; aspect-ratio: 1.88/1;\} </span></span><"line1044"><span>@media (max-width: 600px) \{ </span></span><"line1045"><span>\tab #splash img \{object-fit: contain; object-position: 100% 100%;\} </span></span><"line1046"><span>\} </span></span><"line1047"><span>#splash div \{margin-block: 1em 1.5em; text-align: center; display: flex; gap: 1em; justify-content: center;\} </span></span><"line1048"><span>#splash button \{font-size: 1.33em; border-radius: 1em; padding-inline: 0.75em; padding-block: 0.2em; border: 0; background: #888; color: #EEE; cursor: pointer;\} </span></span><"line1049"><span>#splash button:focus \{outline: 0.25em solid black;\} </span></span><"line1050"><span>#splash button#dismiss-Y \{background: hsl(205deg 84.8% 50%);\} </span></span><"line1051"><span>#splash button#dismiss-L \{background: hsl(102.5deg 15.2% 50%);\} </span></span><"line1052"><span>#splash button#dismiss-N \{background: hsl(0deg 84.8% 50%);\} </span></span><"line1053"><span></span><span>\f0\lang1033 <\f2 /<span class="end-tag">style</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1054"><span></span><span>\f0\lang1033 <\f2 <span class="start-tag">footer</span> <span class="attribute-name">class</span>="<a class="attribute-value">global</a>"\f0\lang1033 >\f2 </span><span> </span></span><"line1055"><span>\tab </span><span>\f0\lang1033 <\f2 <span class="start-tag">b</span>\f0\lang1033 >\f2 </span><span></span><span>\f0\lang1033 <\f2 /<span class="end-tag">b</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1056"><span>\tab </span><span>\f0\lang1033 <\f2 <span class="start-tag">div</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1057"><span>\tab </span><span>\f0\lang1033 <\f2 <span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/">/</a>" <span class="attribute-name">class</span>="<a class="attribute-value">igalia logo home</a>"\f0\lang1033 >\f2 </span><span></span><span>\f0\lang1033 <\f2 <span class="start-tag">img</span> <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/assets/img/logo-white.svg">/assets/img/logo-white.svg</a>" <span class="attribute-name">alt</span>="<a class="attribute-value">WPE</a>"\f0\lang1033 >\f2 </span><span></span><span>\f0\lang1033 <\f2 /<span class="end-tag">a</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1058"><span>\tab </span><span>\f0\lang1033 <\f2 <span class="start-tag">ul</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1059"><span>\tab </span><span>\f0\lang1033 <\f2 <span class="start-tag">li</span>\f0\lang1033 >\f2 </span><span>Connect on </span><span>\f0\lang1033 <\f2 <span class="start-tag">a</span> <span class="attribute-name">rel</span>="<a class="attribute-value">me</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://floss.social/@WPEWebKit">https://floss.social/@WPEWebKit</a>"\f0\lang1033 >\f2 </span><span>Mastodon</span><span>\f0\lang1033 <\f2 /<span class="end-tag">a</span>\f0\lang1033 >\f2 </span><span>, </span><span>\f0\lang1033 <\f2 <span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://bsky.app/profile/wpewebkit.org">https://bsky.app/profile/wpewebkit.org</a>"\f0\lang1033 >\f2 </span><span>Bluesky</span><span>\f0\lang1033 <\f2 /<span class="end-tag">a</span>\f0\lang1033 >\f2 </span><span></span><span>\f0\lang1033 <\f2 /<span class="end-tag">li</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1060"><span>\tab </span><span>\f0\lang1033 <\f2 <span class="start-tag">li</span>\f0\lang1033 >\f2 </span><span>mailing list: </span><span>\f0\lang1033 <\f2 <span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://lists.webkit.org/mailman3/lists/webkit-wpe.lists.webkit.org/">https://lists.webkit.org/mailman3/lists/webkit-wpe.lists.webkit.org/</a>"\f0\lang1033 >\f2 </span><span>webkit-wpe</span><span>\f0\lang1033 <\f2 /<span class="end-tag">a</span>\f0\lang1033 >\f2 </span><span></span><span>\f0\lang1033 <\f2 /<span class="end-tag">li</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1061"><span>\tab </span><span>\f0\lang1033 <\f2 <span class="start-tag">li</span>\f0\lang1033 >\f2 </span><span>OFTC: </span><span>\f0\lang1033 <\f2 <span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://webchat.oftc.net/?channels=wpe">https://webchat.oftc.net/?channels=wpe</a>"\f0\lang1033 >\f2 </span><span>#wpe</span><span>\f0\lang1033 <\f2 /<span class="end-tag">a</span>\f0\lang1033 >\f2 </span><span></span><span>\f0\lang1033 <\f2 /<span class="end-tag">li</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1062"><span>\tab </span><span>\f0\lang1033 <\f2 <span class="start-tag">li</span>\f0\lang1033 >\f2 </span><span>Matrix: </span><span>\f0\lang1033 <\f2 <span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://matrix.to/#/#wpe:matrix.org">https://matrix.to/#/#wpe:matrix.org</a>"\f0\lang1033 >\f2 </span><span>#wpe:matrix.org</span><span>\f0\lang1033 <\f2 /<span class="end-tag">a</span>\f0\lang1033 >\f2 </span><span></span><span>\f0\lang1033 <\f2 /<span class="end-tag">li</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1063"><span>\tab </span><span>\f0\lang1033 <\f2 /<span class="end-tag">ul</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1064"><span>\tab </span><span>\f0\lang1033 <\f2 <span class="start-tag">ul</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1065"><span>\tab </span><span>\f0\lang1033 <\f2 <span class="start-tag">li</span>\f0\lang1033 >\f2 </span><span>Copyright <span class="entity"><span>&&</span>copy;</span> 2018-2025 The WPE WebKit Team.</span><span>\f0\lang1033 <\f2 /<span class="end-tag">li</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1066"><span>\tab </span><span>\f0\lang1033 <\f2 <span class="start-tag">li</span>\f0\lang1033 >\f2 </span><span>Hosting kindly provided by </span><span>\f0\lang1033 <\f2 <span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://www.igalia.com/">https://www.igalia.com</a>"\f0\lang1033 >\f2 </span><span>Igalia</span><span>\f0\lang1033 <\f2 /<span class="end-tag">a</span>\f0\lang1033 >\f2 </span><span>.</span><span>\f0\lang1033 <\f2 /<span class="end-tag">li</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1067"><span>\tab </span><span>\f0\lang1033 <\f2 <span class="start-tag">li</span>\f0\lang1033 >\f2 </span><span></span><span>\f0\lang1033 <\f2 <span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://wpewebkit.org/sitemap/">/sitemap/</a>"\f0\lang1033 >\f2 </span><span>Site map</span><span>\f0\lang1033 <\f2 /<span class="end-tag">a</span>\f0\lang1033 >\f2 </span><span>.</span><span>\f0\lang1033 <\f2 /<span class="end-tag">li</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1068"><span>\tab </span><span>\f0\lang1033 <\f2 /<span class="end-tag">ul</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1069"><span>\tab </span><span>\f0\lang1033 <\f2 /<span class="end-tag">div</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1070"><span></span><span>\f0\lang1033 <\f2 /<span class="end-tag">footer</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1071"><span></span><span>\f0\lang1033 <\f2 <span class="start-tag">script</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1072"><span>let storedInfo = \{\}; </span></span><"line1073"><span>const flagName = 'survey-splash'; </span></span><"line1074"><span> </span></span><"line1075"><span>function startup(flagName) \{ </span></span><"line1076"><span>\tab if (!flagName) \{ </span></span><"line1077"><span>\tab console.error('Missing flagName'); </span></span><"line1078"><span>\tab return; </span></span><"line1079"><span>\tab\} </span></span><"line1080"><span>\tab if (storageAvailable("localStorage")) \{ </span></span><"line1081"><span>\tab let currentTime = Date.now(); </span></span><"line1082"><span>\tab let timeOut = 1; </span></span><"line1083"><span>\tab timeOut *= 86400 * 1000; </span></span><"line1084"><span>\tab let localStore = localStorage.getItem(flagName); </span></span><"line1085"><span>\tab if (!localStore) \{ </span></span><"line1086"><span>\tab storedInfo = \{ </span></span><"line1087"><span>\tab 'status': null, </span></span><"line1088"><span>\tab 'datetime': currentTime, </span></span><"line1089"><span>\tab 'pageloads' : 0 </span></span><"line1090"><span>\tab\} </span></span><"line1091"><span>\tab\} else \{ </span></span><"line1092"><span>\tab storedInfo = JSON.parse(localStore); </span></span><"line1093"><span>\tab\} </span></span><"line1094"><span>\tab storedInfo.pageloads++; </span></span><"line1095"><span>\tab localStorage.setItem(flagName, JSON.stringify(storedInfo)); </span></span><"line1096"><span> </span></span><"line1097"><span>\tab if (storedInfo.pageloads </span><span>\f0\lang1033 <\f2  </span><span>11) return; </span></span><"line1098"><span>\tab if (storedInfo.status == "Y" || storedInfo.status == "N") return; </span></span><"line1099"><span>\tab if (storedInfo.status &&&& currentTime - storedInfo.datetime </span><span>\f0\lang1033 <\f2  </span><span>timeOut) return; </span></span><"line1100"><span> </span></span><"line1101"><span>\tab splash.showModal(); </span></span><"line1102"><span>\tab storedInfo.datetime = currentTime; </span></span><"line1103"><span>\tab\} </span></span><"line1104"><span>\} </span></span><"line1105"><span> </span></span><"line1106"><span>function storageAvailable(type) \{ </span></span><"line1107"><span>\tab // {{\field{\*\fldinst{HYPERLINK https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API }}{\fldrslt{https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API\ul0\cf0}}}}\f2\fs22  </span></span><"line1108"><span> let storage; </span></span><"line1109"><span> try \{ </span></span><"line1110"><span> storage = window[type]; </span></span><"line1111"><span> const x = "__storage_test__"; </span></span><"line1112"><span> storage.setItem(x, x); </span></span><"line1113"><span> storage.removeItem(x); </span></span><"line1114"><span> return true; </span></span><"line1115"><span> \} catch (e) \{ </span></span><"line1116"><span> return ( </span></span><"line1117"><span> e instanceof DOMException &&&& </span></span><"line1118"><span> // everything except Firefox </span></span><"line1119"><span> (e.code === 22 || </span></span><"line1120"><span> // Firefox </span></span><"line1121"><span> e.code === 1014 || </span></span><"line1122"><span> // test name field too, because code might not be present </span></span><"line1123"><span> // everything except Firefox </span></span><"line1124"><span> e.name === "QuotaExceededError" || </span></span><"line1125"><span> // Firefox </span></span><"line1126"><span> e.name === "NS_ERROR_DOM_QUOTA_REACHED") &&&& </span></span><"line1127"><span> // acknowledge QuotaExceededError only if there's something already stored </span></span><"line1128"><span> storage &&&& </span></span><"line1129"><span> storage.length !== 0 </span></span><"line1130"><span> ); </span></span><"line1131"><span> \} </span></span><"line1132"><span>\} </span></span><"line1133"><span> </span></span><"line1134"><span>function surveyRedirect() \{ </span></span><"line1135"><span>\tab let surveyURL = "{{\field{\*\fldinst{HYPERLINK https://docs.google.com/forms/d/e/1FAIpQLSchPgMGzuVc9ry5bdxF2uFnW2q3FcrSSqxJdOM4Fd2BD4s7dg/viewform?usp=pp_url&&entry.1179679285=WPEWebKit.org+website }}{\fldrslt{https://docs.google.com/forms/d/e/1FAIpQLSchPgMGzuVc9ry5bdxF2uFnW2q3FcrSSqxJdOM4Fd2BD4s7dg/viewform?usp=pp_url&&entry.1179679285=WPEWebKit.org+website\ul0\cf0}}}}\f2\fs22 "; </span></span><"line1136"><span>\tab if (surveyURL) window.location = surveyURL; </span></span><"line1137"><span>\} </span></span><"line1138"><span> </span></span><"line1139"><span>document.querySelectorAll('button[is="dis-misser"]').forEach(el =\f0\lang1033 >\f2  \{ </span></span><"line1140"><span>\tab el.addEventListener("click", () =\f0\lang1033 >\f2  \{ </span></span><"line1141"><span>\tab splash.close(); </span></span><"line1142"><span>\tab storedInfo.status = el.getAttribute('id').replace('dismiss-',''); </span></span><"line1143"><span>\tab console.log(storedInfo); </span></span><"line1144"><span>\tab localStorage.setItem(flagName, JSON.stringify(storedInfo)); </span></span><"line1145"><span>\tab if (storedInfo.status == "Y") surveyRedirect(); </span></span><"line1146"><span>\tab\}); </span></span><"line1147"><span>\}); </span></span><"line1148"><span> </span></span><"line1149"><span>window.onload = startup(flagName); </span></span><"line1150"><span></span><span>\f0\lang1033 <\f2 /<span class="end-tag">script</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1151"><span> </span></span><"line1152"><span> </span></span><"line1153"><span> </span><span>\f0\lang1033 <\f2 /<span class="end-tag">body</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1154"><span></span><span>\f0\lang1033 <\f2 /<span class="end-tag">html</span>\f0\lang1033 >\f2 </span><span> </span></span><"line1155"><span></span></span></body></html>\f0\lang9\par
}