tor-browser

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

delegatesFocus-highlight-sibling.html (4649B)

      1 <!DOCTYPE html>
      2 <script src="/resources/testharness.js"></script>
      3 <script src="/resources/testharnessreport.js"></script>
      4 <script src="/resources/testdriver.js"></script>
      5 <script src="/resources/testdriver-vendor.js"></script>
      6 <script src="/resources/testdriver-actions.js"></script>
      7 <script src="resources/shadow-dom.js"></script>
      8 <script src="resources/focus-utils.js"></script>
      9 <!-- Adapted from http://jsbin.com/dexinu/6/edit for layout test -->
     10 
     11 <template id='XMenuTemplate'>
     12  <style>
     13    :host {
     14      display: inline-block;
     15      position: relative;
     16      background-color: #aaa;
     17    }
     18    :host(:focus) {
     19      background-color: #ccc;
     20    }
     21    li {
     22      display: inline-block;
     23      position: relative;
     24      background-color: #eee;
     25    }
     26    li:focus {
     27      background-color: #fff;
     28    }
     29  </style>
     30  <li tabindex='0'>Item One</li>
     31  <li tabindex='0'>Item Two</li>
     32  <li tabindex='0'>Item Three</li>
     33 </template>
     34 
     35 <section>
     36  <x-menu id='XMenu1' tabindex='0'></x-menu>
     37 </section>
     38 <section>
     39  <x-menu id='XMenu2' tabindex='0' delegatesFocus></x-menu>
     40  <x-menu id='XMenu3' tabindex='0' delegatesFocus></x-menu>
     41 </section>
     42 <section>
     43  <x-menu id='XMenu4' tabindex='0' delegatesFocus></x-menu>
     44 </section>
     45 
     46 <script>
     47 'use strict';
     48 
     49 const template = document.querySelector('#XMenuTemplate');
     50 
     51 customElements.define('x-menu', class extends HTMLElement {
     52    connectedCallback() {
     53        const delegatesFocus = this.hasAttribute('delegatesFocus');
     54        this.attachShadow({mode: 'open', delegatesFocus: delegatesFocus})
     55            .appendChild(document.importNode(template.content, true));
     56    }
     57 });
     58 
     59 promise_test(async () => {
     60    let xmenu1 = document.getElementById('XMenu1');
     61 
     62    xmenu1.focus();
     63    await navigateFocusForward();
     64    await navigateFocusForward();
     65    await navigateFocusForward();
     66    assert_equals(document.activeElement.id, 'XMenu1');
     67    assert_background_color('XMenu1', 'rgb(204, 204, 204)');
     68    assert_background_color('XMenu2', 'rgb(170, 170, 170)');
     69    assert_background_color('XMenu3', 'rgb(170, 170, 170)');
     70    assert_background_color('XMenu4', 'rgb(170, 170, 170)');
     71 
     72    await navigateFocusForward();
     73    await navigateFocusForward();
     74    await navigateFocusForward();
     75    assert_equals(document.activeElement.id, 'XMenu2');
     76    await assert_background_color('XMenu1', 'rgb(170, 170, 170)');
     77    await assert_background_color('XMenu2', 'rgb(204, 204, 204)');
     78    await assert_background_color('XMenu3', 'rgb(170, 170, 170)');
     79    await assert_background_color('XMenu4', 'rgb(170, 170, 170)');
     80 
     81    await navigateFocusForward();
     82    await navigateFocusForward();
     83    await navigateFocusForward();
     84    assert_equals(document.activeElement.id, 'XMenu3');
     85    assert_background_color('XMenu1', 'rgb(170, 170, 170)');
     86    assert_background_color('XMenu2', 'rgb(170, 170, 170)');
     87    assert_background_color('XMenu3', 'rgb(204, 204, 204)');
     88    assert_background_color('XMenu4', 'rgb(170, 170, 170)');
     89 
     90    await navigateFocusForward();
     91    await navigateFocusForward();
     92    await navigateFocusForward();
     93    assert_equals(document.activeElement.id, 'XMenu4');
     94    assert_background_color('XMenu1', 'rgb(170, 170, 170)');
     95    assert_background_color('XMenu2', 'rgb(170, 170, 170)');
     96    assert_background_color('XMenu3', 'rgb(170, 170, 170)');
     97    assert_background_color('XMenu4', 'rgb(204, 204, 204)');
     98 
     99    await navigateFocusBackward();
    100    await navigateFocusBackward();
    101    await navigateFocusBackward();
    102    assert_equals(document.activeElement.id, 'XMenu3');
    103    assert_background_color('XMenu1', 'rgb(170, 170, 170)');
    104    assert_background_color('XMenu2', 'rgb(170, 170, 170)');
    105    assert_background_color('XMenu3', 'rgb(204, 204, 204)');
    106    assert_background_color('XMenu4', 'rgb(170, 170, 170)');
    107 
    108    await navigateFocusBackward();
    109    await navigateFocusBackward();
    110    await navigateFocusBackward();
    111    assert_equals(document.activeElement.id, 'XMenu2');
    112    assert_background_color('XMenu1', 'rgb(170, 170, 170)');
    113    assert_background_color('XMenu2', 'rgb(204, 204, 204)');
    114    assert_background_color('XMenu3', 'rgb(170, 170, 170)');
    115    assert_background_color('XMenu4', 'rgb(170, 170, 170)');
    116 
    117    await navigateFocusBackward();
    118    await navigateFocusBackward();
    119    await navigateFocusBackward();
    120    assert_equals(document.activeElement.id, 'XMenu1');
    121    assert_background_color('XMenu1', 'rgb(204, 204, 204)');
    122    assert_background_color('XMenu2', 'rgb(170, 170, 170)');
    123    assert_background_color('XMenu3', 'rgb(170, 170, 170)');
    124    assert_background_color('XMenu4', 'rgb(170, 170, 170)');
    125 }, 'crbug/474687 :focus style should properly be applied to shadow hosts.');
    126 </script>