[ tor-browser ].git.dasho

index.html (15055B)
      1 <!DOCTYPE html>
      2 <html lang="en">
      3  <head>
      4    <meta charset="UTF-8">
      5    <title>WebGPU CTS</title>
      6    <link
      7      id="favicon"
      8      rel="shortcut icon"
      9      type="image/png"
     10      href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAACVBMVEUAAAAAAAD///+D3c/SAAAAAXRSTlMAQObYZgAAAEpJREFUCB0FwbERgDAMA0BdSkbJQBSuaPABE0WuaKILmpJ/rNVejPKBUXGhqAC5J0gn9ESg2wvdNua8hUoKJQo8b6HyE6a2QHdbP0CPITh2pewWAAAAAElFTkSuQmCC"
     11    />
     12    <link rel="preconnect" href="https://fonts.googleapis.com">
     13    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     14    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
     15    <meta name="viewport" content="width=device-width" />
     16    <!-- Chrome "WebGPU Subgroups Features" origin trial token for https://gpuweb.github.io -->
     17    <meta http-equiv="origin-trial" content="AiZbfNa6FSBMZg2Ak2xeb7upejmg3jb1Ll47edOTVs7fkZLvrV4jjPh7p4J7quB9Lx6Z7l0IDc97gpPKb4F6OQcAAABheyJvcmlnaW4iOiJodHRwczovL2dwdXdlYi5naXRodWIuaW86NDQzIiwiZmVhdHVyZSI6IldlYkdQVVN1Ymdyb3Vwc0ZlYXR1cmVzIiwiZXhwaXJ5IjoxNzM5OTIzMTk5fQ==">
     18    <!-- Chrome "WebGPU Subgroups Features" origin trial token for http://localhost:8080 -->
     19    <meta http-equiv="origin-trial" content="AkMLfHisU+Fsbpi9g6tfKSZF4ngpsmjW4Oai360fUvZE2rgSPZDWSWb8ryrliJX5HR/Rw0yig0ir9el2hrnODwcAAABaeyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjgwODAiLCJmZWF0dXJlIjoiV2ViR1BVU3ViZ3JvdXBzRmVhdHVyZXMiLCJleHBpcnkiOjE3Mzk5MjMxOTl9">
     20    <link rel="stylesheet" href="third_party/normalize.min.css" />
     21    <script src="third_party/jquery/jquery-3.3.1.min.js"></script>
     22    <style>
     23      :root {
     24        color-scheme: light dark;
     25 
     26        --fg-color: #000;
     27        --bg-color: #fff;
     28        --border-color: #888;
     29        --emphasis-fg-color: #F00;
     30 
     31        --results-fg-color: gray;
     32        --node-description-fg-color: #gray;
     33        --node-hover-bg-color: rgba(0, 0, 0, 0.1);
     34 
     35        --button-bg-color: #eee;
     36        --button-hover-bg-color: #ccc;
     37        --button-image-filter: none;
     38 
     39        --subtree-border-color: #ddd;
     40        --subtree-hover-left-border-color: #000;
     41        --multicase-border-color: #55f;
     42        --testcase-border-color: #bbf;
     43        --testcase-bg-color: #bbb;
     44 
     45        --testcase-data-status-fail-bg-color: #fdd;
     46        --testcase-data-status-warn-bg-color: #ffb;
     47        --testcase-data-status-pass-bg-color: #cfc;
     48        --testcase-data-status-skip-bg-color: #aaf;
     49 
     50        --testcase-logs-bg-color: #white;
     51        --testcase-log-odd-bg-color: #fff;
     52        --testcase-log-even-bg-color: #f8f8f8;
     53        --testcase-log-text-fg-color: #666;
     54        --testcase-log-text-first-line-fg-color: #000;
     55      }
     56      @media (prefers-color-scheme: dark) {
     57        :root {
     58          --fg-color: #fff;
     59          --bg-color: #000;
     60          --border-color: #888;
     61          --emphasis-fg-color: #F44;
     62 
     63          --results-fg-color: #aaa;
     64          --node-description-fg-color: #aaa;
     65          --node-hover-bg-color: rgba(255, 255, 255, 0.1);
     66 
     67          --button-image-filter: invert(100%);
     68          --button-bg-color: #666;
     69          --button-hover-bg-color: #888;
     70 
     71          --subtree-border-color: #444;
     72          --subtree-hover-left-border-color: #FFF;
     73          --multicase-border-color: #338;
     74          --testcase-border-color: #55a;
     75          --testcase-bg-color: #888;
     76 
     77          --testcase-data-status-fail-bg-color: #400;
     78          --testcase-data-status-warn-bg-color: #660;
     79          --testcase-data-status-pass-bg-color: #040;
     80          --testcase-data-status-skip-bg-color: #446;
     81 
     82          --testcase-logs-bg-color: #black;
     83          --testcase-log-odd-bg-color: #000;
     84          --testcase-log-even-bg-color: #080808;
     85          --testcase-log-text-fg-color: #aaa;
     86          --testcase-log-text-first-line-fg-color: #fff;
     87        }
     88      }
     89      body {
     90        font-family: monospace;
     91        min-width: 400px;
     92        margin: 0.5em;
     93      }
     94      * {
     95        box-sizing: border-box;
     96      }
     97      h1 {
     98        font-size: 1.5em;
     99        font-family: 'Poppins', sans-serif;
    100        height: 1.2em;
    101        vertical-align: middle;
    102      }
    103      input[type=button],
    104      button {
    105        cursor: pointer;
    106        background-color: var(--button-bg-color);
    107      }
    108      input[type=button]:hover,
    109      button:hover,
    110      a.nodelink:hover {
    111        background-color: var(--button-hover-bg-color);
    112      }
    113      .logo {
    114        height: 1.2em;
    115        float: left;
    116      }
    117      .important {
    118        font-weight: bold;
    119        color: var(--emphasis-fg-color);
    120      }
    121      #options label {
    122        display: flex;
    123      }
    124      table#options {
    125        border-collapse: collapse;
    126        width: 100%;
    127      }
    128      #options td {
    129        border: 1px solid var(--subtree-border-color);
    130        width: 1px; /* to make the columns as small as possible */
    131      }
    132      #options tr:hover {
    133        background: var(--node-hover-bg-color);
    134      }
    135      #options td:nth-child(1) {
    136          text-align: right;
    137      }
    138      #options td:nth-child(2),
    139      #options td:nth-child(3) {
    140          padding-left: 0.5em;
    141      }
    142      #options td:nth-child(3) {
    143          width: 100%; /* to make the last column use the space */
    144      }
    145      #info {
    146        font-family: monospace;
    147      }
    148      #progress {
    149        position: fixed;
    150        display: flex;
    151        width: 100%;
    152        left: 0;
    153        top: 0;
    154        background-color: #068;
    155        color: #fff;
    156        align-items: center;
    157      }
    158      #progress .progress-test-name {
    159        flex: 1 1;
    160        min-width: 0;
    161        overflow: hidden;
    162        text-overflow: ellipsis;
    163        direction: rtl;
    164        white-space: nowrap;
    165      }
    166      #resultsJSON {
    167        font-family: monospace;
    168        width: 100%;
    169        height: 15em;
    170      }
    171 
    172      #resultsVis {
    173        border-right: 1px solid var(--results-fg-color);
    174      }
    175 
    176      /* PS: this does not disable using the keyboard to click */
    177      #resultsVis.disable-run button.leafrun,
    178      #resultsVis.disable-run button.subtreerun {
    179         pointer-events: none;
    180         opacity: 25%;
    181      }
    182 
    183      /* tree nodes */
    184 
    185      .nodeheader {
    186        width: 100%;
    187        padding: 0px 2px 0px 1px;
    188      }
    189      .nodeheader:hover {
    190        background: var(--node-hover-bg-color);
    191      }
    192      .subtreerun,
    193      .leafrun,
    194      .nodelink,
    195      .collapsebtn,
    196      .testcaselogbtn,
    197      .copybtn {
    198        display: inline-flex;
    199        flex-shrink: 0;
    200        flex-grow: 0;
    201        justify-content: center;
    202        align-items: center;
    203        text-decoration: none;
    204        vertical-align: top;
    205        color: var(--fg-color);
    206        background-color: var(--button-bg-color);
    207        background-repeat: no-repeat;
    208        background-position: center;
    209        border: 1px solid var(--border-color);
    210      }
    211      .subtreerun::before,
    212      .leafrun::before,
    213      .nodelink::before,
    214      .collapsebtn::before,
    215      .testcaselogbtn::before,
    216      .copybtn::before {
    217        content: "";
    218        width: 100%;
    219        height: 100%;
    220        background-repeat: no-repeat;
    221        background-position: center;
    222        filter: var(--button-image-filter);
    223      }
    224      @media (pointer: fine) {
    225        .subtreerun,
    226        .leafrun,
    227        .nodelink,
    228        .collapsebtn,
    229        .testcaselogbtn,
    230        .copybtn {
    231          flex-basis: 24px;
    232          border-radius: 4px;
    233          width: 24px;
    234          height: 18px;
    235        }
    236      }
    237      @media (pointer: coarse) {
    238        .subtreerun,
    239        .leafrun,
    240        .nodelink,
    241        .collapsebtn,
    242        .testcaselogbtn,
    243        .copybtn {
    244          flex-basis: 36px;
    245          border-radius: 6px;
    246          width: 36px;
    247          height: 36px;
    248        }
    249      }
    250      .subtreerun::before {
    251        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAAB5JREFUCNdjOMDAsIGBoYeBoZmBoaEBRPaARQ4wAABTfwX/l/WQvgAAAABJRU5ErkJggg==);
    252      }
    253      .leafrun::before {
    254        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAANklEQVQoU2NkYGD4zwABjFAagwJJwBTBJDEUY1OEoRifIrhiYhSBHYvuJnSHM5LtJry+wxlOAGPTCQmAB/WwAAAAAElFTkSuQmCC);
    255      }
    256      .nodelink::before {
    257        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAACRJREFUCNdjYGBg+P+BoUGAYesFhj4BhvsFDPYNDHwMCMTAAACqJwbp3VgbrAAAAABJRU5ErkJggg==);
    258      }
    259      .copybtn::before {
    260        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAACVJREFUCNdjYGBgqGdgcGRgcGBg8H/A4KEAQhkKDBxgxP8AKA8AVNUEx41Lj8MAAAAASUVORK5CYII=);
    261      }
    262      .nodetitle {
    263        display: inline;
    264        flex: 10 0 4em;
    265      }
    266      .nodecolumns {
    267        position: absolute;
    268        left: 220px;
    269      }
    270      .nodequery {
    271        font-weight: bold;
    272        background: transparent;
    273        border: none;
    274        padding: 2px;
    275        margin: 0 0.5em;
    276        width: calc(100vw - 360px);
    277      }
    278      .nodedescription {
    279        margin: 0 0 0 1em;
    280        color: var(--node-description-fg-color);
    281        white-space: pre-wrap;
    282        font-size: 80%;
    283      }
    284 
    285      /* tree nodes which are subtrees */
    286 
    287      .subtree {
    288        margin: 3px 0 0 0;
    289        padding: 3px 0 0 3px;
    290        border-width: 1px 0 0;
    291        border-style: solid;
    292        border-color: var(--subtree-border-color);
    293      }
    294      .subtree::before {
    295        float: right;
    296        margin-right: 3px;
    297      }
    298      .subtree[data-status='fail'], .subtree[data-status='passfail'] {
    299        background: linear-gradient(90deg, var(--testcase-data-status-fail-bg-color), var(--testcase-data-status-fail-bg-color) 16px, var(--bg-color) 16px);
    300      }
    301      .subtree[data-status='fail']::before {
    302        content: "⛔"
    303      }
    304      .subtree[data-status='pass'] {
    305        background: linear-gradient(90deg, var(--testcase-data-status-pass-bg-color), var(--testcase-data-status-pass-bg-color) 16px, var(--bg-color) 16px);
    306      }
    307      .subtree[data-status='skip'] {
    308        background: linear-gradient(90deg, var(--testcase-data-status-skip-bg-color), var(--testcase-data-status-skip-bg-color) 16px, var(--bg-color) 16px);
    309      }
    310      .subtree[data-status='pass']::before {
    311        content: "✔"
    312      }
    313      .subtree[data-status='skip']::before {
    314        content: "○"
    315      }
    316      .subtree[data-status='passfail']::before {
    317        content: "✔/⛔"
    318      }
    319      .subtree:hover {
    320        border-left-color: var(--subtree-hover-left-border-color);
    321      }
    322      .subtree.multifile > .subtreechildren > .subtree.multitest,
    323      .subtree.multifile > .subtreechildren > .subtree.multicase {
    324        border-width: 2px 0 0 1px;
    325        border-color: var(--multicase-border-color);
    326      }
    327      .subtree.multitest > .subtreechildren > .subtree.multicase,
    328      .subtree.multitest > .subtreechildren > .testcase {
    329        border-width: 2px 0 0 1px;
    330        border-color: var(--testcase-border-color);
    331      }
    332      .subtreechildren {
    333        margin-left: 9px;
    334      }
    335 
    336      /* tree nodes which are test cases */
    337 
    338      .testcase {
    339        padding: 3px;
    340        border-width: 1px 0 0 0;
    341        border-style: solid;
    342        border-color: var(--border-color);
    343        background: var(--testcase-bg-color);
    344      }
    345      .testcase:first-child {
    346        margin-top: 3px;
    347      }
    348      .testcase::after {
    349        float: right;
    350        margin-top: -1.1em;
    351      }
    352      .testcase[data-status='fail'] {
    353        background: var(--testcase-data-status-fail-bg-color);
    354      }
    355      .testcase[data-status='fail']::after {
    356        content: "⛔"
    357      }
    358      .testcase[data-status='warn'] {
    359        background: var(--testcase-data-status-warn-bg-color);
    360      }
    361      .testcase[data-status='warn']::after {
    362        content: "⚠"
    363      }
    364      .testcase[data-status='pass'] {
    365        background: var(--testcase-data-status-pass-bg-color);
    366      }
    367      .testcase[data-status='pass']::after {
    368        content: "✔"
    369      }
    370      .testcase[data-status='skip'] {
    371        background: var(--testcase-data-status-skip-bg-color);
    372      }
    373      .testcase .nodequery {
    374        font-weight: normal;
    375        width: calc(100vw - 275px);
    376      }
    377      .testcasetime {
    378        white-space: nowrap;
    379        text-align: right;
    380        flex: 1 0 5.5em;
    381      }
    382      .testcaselogs {
    383        margin-left: 6px;
    384        width: calc(100% - 6px);
    385        border-width: 0 0px 0 1px;
    386        border-style: solid;
    387        border-color: var(--border-color);
    388        background: var(--testcase-logs-bg-color);
    389      }
    390      .testcaselog {
    391        display: flex;
    392      }
    393      .testcaselog:nth-child(odd) {
    394        background: var(--testcase-log-odd-bg-color);
    395      }
    396      .testcaselog:nth-child(even) {
    397        background: var(--testcase-log-even-bg-color);
    398      }
    399      .testcaselogbtn::before {
    400        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAACRJREFUCNdjYGBg+H+AwUGBwV+BQUGAQX0CiNQQYFABk8ogLgBsYQUt2gNKPwAAAABJRU5ErkJggg==);
    401      }
    402      .testcaselogtext {
    403        flex: 1 0;
    404        font-size: 10pt;
    405        white-space: pre-wrap;
    406        word-break: break-word;
    407        margin: 0;
    408        color: var(--testcase-log-text-fg-color)
    409      }
    410      .testcaselogtext::first-line {
    411        color: var(--testcase-log-text-first-line-fg-color);
    412      }
    413 
    414      @media only screen and (max-width: 600px) {
    415        .subtreechildren {
    416          margin-left: 2px;
    417        }
    418        .testcaselogs {
    419          margin-left: 2px;
    420          width: calc(100% - 2px);
    421        }
    422        .nodequery {
    423          position: relative;
    424          left: 0;
    425          width: 100%;
    426        }
    427      }
    428    </style>
    429  </head>
    430  <body>
    431    <h1><img class="logo" src="webgpu-logo-notext.svg">WebGPU Conformance Test Suite</h1>
    432    <details>
    433      <summary>options (requires reload!)</summary>
    434      <table id="options">
    435        <tbody></tbody>
    436      </table>
    437      <p class="important">Note: The options above only set the url parameters.
    438         You must reload the page for the options to take effect.</p>
    439    </details>
    440    <p>
    441      <div id="device"></div>
    442    </p>
    443    <p>
    444      <input type=button id=expandall value="Expand All (slow!)">
    445      <label><input type=checkbox id=autoCloseOnPass> Auto-close each subtree when it passes</label>
    446    </p>
    447 
    448    <div id="info"></div>
    449    <div id="resultsVis"></div>
    450    <div id="progress" style="display: none;"><button type="button">stop</button><div class="progress-test-name"></div></div>
    451 
    452    <fieldset>
    453      <legend>Serialize results:</legend>
    454      <p>
    455        <label><input type="checkbox" id="saveOnlyFailures" checked>Only result failures</label>
    456      </p>
    457      <p>
    458         <input type="button" id="copyResultsJSON" value="Copy results as JSON">
    459      </p>
    460      <p>
    461         <input type="button" id="saveResultsJSON" value="Save results to JSON file">
    462      </p>
    463    </fieldset>
    464 
    465    <script type="module" src="../out/common/runtime/standalone.js"></script>
    466  </body>
    467 </html>
	tor-browser The Tor Browser
	git clone https://git.dasho.dev/tor-browser.git
	Log \| Files \| Refs \| README \| LICENSE