tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

activation-behavior.html (3864B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>summary element: activation behavior</title>
      4 <link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me">
      5 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-summary-element">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 
      9 <div id="log"></div>
     10 
     11 <details id="happy-path-starts-closed">
     12  <summary id="happy-path-starts-closed-summary">Summary</summary>
     13  <p>Contents</p>
     14 </details>
     15 
     16 <details id="happy-path-starts-open" open>
     17  <summary id="happy-path-starts-open-summary">Summary</summary>
     18  <p>Contents</p>
     19 </details>
     20 
     21 <details id="details-not-being-rendered" style="display: none">
     22  <summary id="details-not-being-rendered-summary">Summary</summary>
     23  <p>Contents</p>
     24 </details>
     25 
     26 <details id="summary-not-being-rendered">
     27  <summary id="summary-not-being-rendered-summary" style="display: none">Summary</summary>
     28  <p>Contents</p>
     29 </details>
     30 
     31 <details id="has-preceding-element">
     32  <span></span>
     33  <summary id="has-preceding-element-summary">Summary</summary>
     34  <p>Contents</p>
     35 </details>
     36 
     37 <details id="has-preceding-summary">
     38  <summary>Summary 1</summary>
     39  <summary id="has-preceding-summary-summary">Summary 2</summary>
     40  <p>Contents</p>
     41 </details>
     42 
     43 <details id="has-preceding-summary-descendant">
     44  <span><summary>Summary 1</summary></span>
     45  <summary id="has-preceding-summary-descendant-summary">Summary 2</summary>
     46  <p>Contents</p>
     47 </details>
     48 
     49 <details id="summary-nested">
     50  <span><summary id="summary-nested-summary">Summary</summary></span>
     51  <p>Contents</p>
     52 </details>
     53 
     54 <details id="toggle-tester">
     55  <summary>Summary</summary>
     56  <p>Contents</p>
     57 </details>
     58 
     59 <script>
     60 "use strict";
     61 
     62 testSummary(
     63  "happy-path-starts-closed", false, true,
     64  "Should open a closed details if all conditions are met"
     65 );
     66 
     67 testSummary(
     68  "happy-path-starts-open", true, false,
     69  "Should close an open details if all conditions are met"
     70 );
     71 
     72 testSummary(
     73  "details-not-being-rendered", false, true,
     74  "Should open a closed details even if the details is not being rendered"
     75 );
     76 
     77 testSummary(
     78  "summary-not-being-rendered", false, true,
     79  "Should open a closed details even if the summary is not being rendered"
     80 );
     81 
     82 testSummary(
     83  "has-preceding-element", false, true,
     84  "Should open a closed details if a span element precedes the summary"
     85 );
     86 
     87 testSummary(
     88  "has-preceding-summary", false, false,
     89  "Should stay closed if another summary element precedes the summary"
     90 );
     91 
     92 testSummary(
     93  "has-preceding-summary-descendant", false, true,
     94  "Should open a closed details if another summary element *nested inside a span* precedes the summary"
     95 );
     96 
     97 testSummary(
     98  "summary-nested", false, false,
     99  "Should stay closed if the summary element is nested inside a span element"
    100 );
    101 
    102 async_test(t => {
    103  const details = document.getElementById("toggle-tester");
    104  const summary = details.firstElementChild;
    105 
    106  let timesToggleFired = 0;
    107  details.addEventListener("toggle", t.step_func(() => {
    108    ++timesToggleFired;
    109  }));
    110 
    111  t.step_timeout(() => {
    112    assert_equals(timesToggleFired, 1, "Expected toggle to fire exactly once");
    113    t.done();
    114  }, 200);
    115 
    116  summary.click();
    117  summary.click();
    118  summary.click();
    119  summary.click();
    120  Promise.resolve().then(() => summary.click());
    121 
    122 }, "toggle events should be coalesced even when using the activation behavior of a summary");
    123 
    124 function testSummary(detailsId, expectedBefore, expectedAfter, name) {
    125  test(() => {
    126    const details = document.getElementById(detailsId);
    127    const summary = document.getElementById(detailsId + "-summary");
    128 
    129    assert_equals(details.open, expectedBefore, "Before activation: expected open to be " + expectedBefore);
    130    summary.click();
    131    assert_equals(details.open, expectedAfter, "After activation: expected open to be " + expectedAfter);
    132  }, name);
    133 }
    134 </script>