sanderling/internal/driver/chrome/testdata/fact-parity.html

<!doctype html>
<html id="page">
  <head id="page-head">
    <meta id="page-charset" charset="utf-8" />
    <title id="page-title">fact parity</title>
    <style id="page-style">
      :root {
        --frame-w: 420px;
        --frame-h: 640px;
      }
      body {
        margin: 0;
      }
      #scroller {
        width: 320px;
        height: 120px;
        overflow: auto;
      }
      #scroller-content {
        height: 600px;
      }
      #sideways {
        width: 320px;
        height: 40px;
        overflow: auto;
      }
      #sideways-content {
        width: 900px;
        height: 20px;
      }
      #fits {
        width: 320px;
        height: 120px;
        overflow: auto;
      }
      #fits-content {
        height: 40px;
      }
      #collapsed {
        display: none;
      }
      #filler {
        height: 900px;
      }
    </style>
  </head>
  <body id="page-body">
    <button id="save">save</button>
    <button id="cancel" disabled>cancel</button>
    <a id="link" href="#detail">detail</a>
    <select id="choice">
      <option id="choice-first">first</option>
    </select>
    <input id="amount" type="text" value="10" />
    <!-- One field per rung of the hint ladder both producers name an editable
         field by. A rung read on one side only sends the model a different name
         for the same field on the two hosts, which is the observation channel
         the label-source arms vary. -->
    <label id="hint-label-text" for="hint-label">Amount</label>
    <input id="hint-label" type="text" placeholder="0.00" name="amount-field" />
    <input id="hint-aria" type="text" aria-label="Search" placeholder="Type here" name="q" />
    <input id="hint-placeholder" type="text" placeholder="What's this for?" name="note-field" />
    <input id="hint-name" type="text" name="reference-field" />
    <input id="password" type="password" placeholder="Password" />
    <input id="agree" type="checkbox" placeholder="not a hint" />
    <textarea id="notes"></textarea>
    <!-- contenteditable is INHERITED, so #bio-word answers isContentEditable
         true while matching neither producer's editable selector itself. It is
         the element the ax handle and the enumeration disagreed on. -->
    <div id="bio" contenteditable="true">bio <span id="bio-word">word</span></div>
    <div id="menu" role="button">menu</div>
    <!-- One element per ARIA role both producers resolve as clickable. A role
         covered on one side only makes that control reachable for one host,
         which is how the whole set is kept honest: role="option" is the shape
         the replay UI gives its step rows. -->
    <div id="role-link" role="link">link</div>
    <div id="role-checkbox" role="checkbox">checkbox</div>
    <div id="role-radio" role="radio">radio</div>
    <div id="role-switch" role="switch">switch</div>
    <div id="role-tab" role="tab">tab</div>
    <div id="role-menuitem" role="menuitem">menu item</div>
    <div id="role-menuitemcheckbox" role="menuitemcheckbox">menu item checkbox</div>
    <div id="role-menuitemradio" role="menuitemradio">menu item radio</div>
    <div id="role-treeitem" role="treeitem">tree item</div>
    <ul id="role-listbox" role="listbox">
      <li id="role-option" role="option">option</li>
      <li id="role-option-disabled" role="option" aria-disabled="true">disabled option</li>
    </ul>
    <div id="attribute-click" onclick="void 0">attribute click</div>
    <div id="delegating-root">delegating root</div>
    <div id="plain">plain</div>
    <div id="edit-text-field" class="EditTextField">styled</div>
    <span id="collapsed">collapsed</span>
    <div id="scroller"><div id="scroller-content"></div></div>
    <div id="sideways"><div id="sideways-content"></div></div>
    <div id="fits"><div id="fits-content"></div></div>
    <div id="filler"></div>
    <script id="page-script">
      document.getElementById("delegating-root").onclick = function () {};
      // checked and focused are live state: the markup attribute records only
      // what the page loaded with, and nothing writes focus down at all. Both
      // producers read them off the element, so the fixture has to hold one of
      // each or the comparison is false against false over the whole page.
      // #choice-first is the third: an option a select made current with no
      // attribute anywhere saying so.
      document.getElementById("agree").checked = true;
      document.getElementById("save").focus();
    </script>
  </body>
</html>