tor-browser

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

slot-fallback-content-006.html (2782B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8" >
      3 <meta name="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
      4 <meta name="assert" content="Imperatively assigned node overwrites fallback contents, when dynamically created.">
      5 <title>Shadow DOM: Slots and fallback contents</title>
      6 <link rel="match" href="slot-fallback-content-006-ref.html">
      7 
      8 <p>Test passes if there are two lines of text "B", "A" below.</p>
      9 
     10 <div id="host1">
     11  <slot id="slot1" name="slot1">FAIL</slot>
     12 </div>
     13 <div id="A">A</div>
     14 <div id="B">B</div>
     15 
     16 <p>Test passes if there are two lines of text "D", "C" below.</p>
     17 
     18 <div id="host2">
     19  <slot id="slot2" name="slot2">FAIL</slot>
     20 </div>
     21 <div id="C">C</div>
     22 <div id="D">D</div>
     23 
     24 <p>Test passes if there are two lines of text "F", "E" below.</p>
     25 
     26 <div id="host3">
     27  <slot id="slot3" name="slot3">FAIL</slot>
     28 </div>
     29 <div id="E">E</div>
     30 <div id="F">F</div>
     31 
     32 <p>Test passes if there is one line of text "SLOT4" below.</p>
     33 
     34 <div id="host4">
     35  <slot id="slot4" name="slot4">SLOT4</slot>
     36 </div>
     37 <div id="G">FAIL</div>
     38 <div id="H">FAIL</div>
     39 
     40 <p>Test passes if there is one line of text "SLOT5" below.</p>
     41 
     42 <div id="host5">
     43  <slot id="slot5" name="slot5">FAIL</slot>
     44 </div>
     45 <div id="I">FAIL</div>
     46 <div id="J">FAIL</div>
     47 
     48 <script>
     49 /*
     50 1. Append nodes to document.
     51 2. Assign nodes to slot.
     52 */
     53 const shadowRoot1 = host1.attachShadow({ mode: "open", slotAssignment: 'manual' });
     54 shadowRoot1.appendChild(slot1);
     55 const s1 = shadowRoot1.getElementById('slot1');
     56 host1.append(A, B);
     57 s1.assign(B, A);
     58 
     59 /*
     60 1. Assign nodes to slot.
     61 2. Append nodes to document.
     62 */
     63 const shadowRoot2 = host2.attachShadow({ mode: "open", slotAssignment: 'manual' });
     64 shadowRoot2.appendChild(slot2);
     65 const s2 = shadowRoot2.getElementById('slot2');
     66 s2.assign(D, C);
     67 host2.append(C, D);
     68 
     69 /*
     70 1. Assign nodes to slot.
     71 2. Change the fallback content.
     72 3. Append nodes to document.
     73 */
     74 const shadowRoot3 = host3.attachShadow({ mode: "open", slotAssignment: 'manual' });
     75 shadowRoot3.appendChild(slot3);
     76 const s3 = shadowRoot3.getElementById('slot3');
     77 s3.assign(F, E);
     78 s3.innerText = 'FAIL';
     79 host3.append(E, F);
     80 
     81 /*
     82 1. Append nodes to document.
     83 2. Assign nodes to slot.
     84 3. Remove nodes from document.
     85 */
     86 const shadowRoot4 = host4.attachShadow({ mode: "open", slotAssignment: 'manual' });
     87 shadowRoot4.appendChild(slot4);
     88 const s4 = shadowRoot4.getElementById('slot4');
     89 host4.append(G, H);
     90 s4.assign(H, G);
     91 G.remove();
     92 H.remove();
     93 
     94 /*
     95 1. Append nodes to document.
     96 2. Assign nodes to slot.
     97 3. Change the fallback content.
     98 4. Remove nodes from document.
     99 */
    100 const shadowRoot5 = host5.attachShadow({ mode: "open", slotAssignment: 'manual' });
    101 shadowRoot5.appendChild(slot5);
    102 const s5 = shadowRoot5.getElementById('slot5');
    103 host5.append(I, J);
    104 s5.assign(J, I);
    105 s5.innerText = 'SLOT5';
    106 I.remove();
    107 J.remove();
    108 
    109 </script>