shadowdom.html | Explore in Territory

<!DOCTYPE html>

<p>go to chrome://settings/addresses to set up autofill</p>
<p>autofill is not supported in file:// urls</p>

<div id=case0>
  <!-- A form whose inputs are in different shadow DOMs. -->
  <form>
    <div>
      <label for=input1>name</label>
      <span id=input1>
        <template shadowrootmode=open>
          <span>
            <template shadowrootmode=open>
              <input>
            </template>
          </span>
        </template>
      </span>
    </div>
    <div>
      <label for=input2>address</label>
      <span id=input2>
        <template shadowrootmode=open>
          <input>
        </template>
      </span>
    </div>
    <div>
      <label for=input3>city</label>
      <span id=input3>
        <template shadowrootmode=open>
          <input id=shadowinput name=shadowname>
        </template>
      </span>
    </div>
    <div>
      <label for=input4>state</label>
      <span id=input4>
        <template shadowrootmode=open>
          <select>
            <option value=WA>WA</option>
            <option value=CA>CA</option>
            <option value=TX>TX</option>
          </select>
        </template>
      </span>
    </div>
    <div>
      <label for=input5>zip</label>
      <span id=input5>
        <template shadowrootmode=open>
          <input id=shadowinput>
        </template>
      </span>
    </div>
  </form>
<div>

<div id=case1>
  <!-- A copy of the above, but inside another shadow DOM. -->
  <template shadowrootmode=open>
    <form>
      <div>
        <label for=input1>name</label>
        <span id=input1>
          <template shadowrootmode=open>
            <span>
              <template shadowrootmode=open>
                <input>
              </template>
            </span>
          </template>
        </span>
      </div>
      <div>
        <label for=input2>address</label>
        <span id=input2>
          <template shadowrootmode=open>
            <input>
          </template>
        </span>
      </div>
      <div>
        <label for=input3>city</label>
        <span id=input3>
          <template shadowrootmode=open>
            <input id=shadowinput name=shadowname>
          </template>
        </span>
      </div>
      <div>
        <label for=input4>state</label>
        <span id=input4>
          <template shadowrootmode=open>
            <select>
              <option value=WA>WA</option>
              <option value=CA>CA</option>
              <option value=TX>TX</option>
            </select>
          </template>
        </span>
      </div>
      <div>
        <label for=input5>zip</label>
        <span id=input5>
          <template shadowrootmode=open>
            <input id=shadowinput>
          </template>
        </span>
      </div>
    </form>
  </template>
</div>

<script>
function getForm(caseNum) {
  switch (caseNum) {
    case 0:
      return document.querySelector('#case0').querySelector('form');
    case 1:
      return document.querySelector('#case1').shadowRoot.querySelector('form');
  }
  throw Error(`Invalid test case: "${caseNum}"`);
}

function getNameElement(caseNum) {
  return getForm(caseNum).querySelector('#input1').shadowRoot.querySelector('span').shadowRoot.querySelector('input');
}

function getName(caseNum) {
  return getNameElement(caseNum).value;
}

function getAddress(caseNum) {
  return getForm(caseNum).querySelector('#input2').shadowRoot.querySelector('input').value;
}

function getCity(caseNum) {
  return getForm(caseNum).querySelector('#input3').shadowRoot.querySelector('input').value;
}

function getState(caseNum) {
  return getForm(caseNum).querySelector('#input4').shadowRoot.querySelector('select').value;
}

function getZip(caseNum) {
  return getForm(caseNum).querySelector('#input5').shadowRoot.querySelector('input').value;
}
</script>
chromium/chrome/test/data/autofill/shadowdom.html
