1 files changed, 115 insertions, 0 deletions
diff --git a/accessible/tests/mochitest/jsat/doc_content_integration.html b/accessible/tests/mochitest/jsat/doc_content_integration.html
new file mode 100644
index 000000000..d62c000cb
--- /dev/null
+++ b/accessible/tests/mochitest/jsat/doc_content_integration.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Traversal Rule test document</title>
+  <meta charset="utf-8" />
+  <script>
+    var frameContents = '<html>' +
+      '<head><title>such app</title></head>' +
+      '<body>' +
+      '<h1>wow</h1>' +
+      '<ul>' +
+      '<li><label><input type="checkbox">many option</label></li>' +
+      '</ul>' +
+      '<label for="r">much range</label>' +
+      '<input min="0" max="10" value="5" type="range" id="r">' +
+      '</body>' +
+      '</html>';
+
+    function showAlert() {
+      document.getElementById('alert').hidden = false;
+    }
+
+    function hideAlert() {
+      document.getElementById('alert').hidden = true;
+    }
+
+    function ariaShowBack() {
+      document.getElementById('back').setAttribute('aria-hidden', false);
+    }
+
+    function ariaHideBack() {
+      document.getElementById('back').setAttribute('aria-hidden', true);
+    }
+
+    function ariaShowIframe() {
+      document.getElementById('iframe').setAttribute('aria-hidden', false);
+    }
+
+    function ariaHideIframe() {
+      document.getElementById('iframe').setAttribute('aria-hidden', true);
+    }
+
+    function renameFruit() {
+      document.getElementById('fruit').setAttribute('aria-label', 'banana');
+    }
+
+    function renameSlider() {
+      document.getElementById('slider').setAttribute(
+        'aria-label', 'mover');
+    }
+
+    function changeSliderValue() {
+      document.getElementById('slider').setAttribute('aria-valuenow', '5');
+      document.getElementById('slider').setAttribute(
+        'aria-valuetext', 'medium');
+    }
+
+    function toggleLight() {
+      var lightSwitch = document.getElementById('light');
+      lightSwitch.setAttribute('aria-checked',
+        lightSwitch.getAttribute('aria-checked') === 'true' ? 'false' : 'true');
+    }
+
+  </script>
+  <style>
+    #windows {
+      position: relative;
+      width: 320px;
+      height: 480px;
+    }
+
+    #windows > iframe {
+      z-index: 1;
+    }
+
+    #windows > div[role='dialog'] {
+      z-index: 2;
+      background-color: pink;
+    }
+
+    #windows > * {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+
+  </style>
+
+</head>
+<body>
+  <div>Phone status bar</div>
+  <div id="windows">
+    <button id="back">Back</button>
+    <div role="dialog" id="alert" hidden>
+      <h1>This is an alert!</h1>
+      <p>Do you agree?</p>
+      <button onclick="setTimeout(hideAlert, 500)">Yes</button>
+      <button onclick="hideAlert()">No</button>
+    </div>
+    <div id="appframe"></div>
+  </div>
+  <button id="home">Home</button>
+  <button id="fruit" aria-label="apple"></button>
+  <span id="light" role="switch" aria-label="Light" aria-checked="false" onclick="toggleLight()"></span>
+  <div id="live" aria-live="polite" aria-label="live">
+    <div id="slider" role="slider" aria-label="slider" aria-valuemin="0"
+      aria-valuemax="10"  aria-valuenow="0"></div>
+  </div>
+</body>
+</html>