LayoutTests/accessibility/canvas-fallback-content-2.html - WebKit - Git at Google

 <!DOCTYPE HTML>
 <html>
 <body>
 <script src="../resources/js-test-pre.js"></script>

 <div>
   <a id="link1" href="#">Link</a>
   <button id="button1">Button</button>
   <button id="labeled-button1" aria-label="Label">Button</button>
   <button id="button-with-title1" title="Title">Button</button>
   <input id="text1" type="text" value="Value">
   <input id="checkbox1" type="checkbox" checked>
   <input id="number1" type="number" value="123">
   <input id="radio1" type="radio" checked>
   <input id="slider1" type="range" min="1" max="10" value="5">
   <input id="submit1" type="submit">
   <select id="combobox1"><option>1<option selected>2</select>
   <select multiple id="listbox1"><option>1<option selected>2</select>
   <textarea id="textarea1">Textarea</textarea>
   <div id="focusable1" tabindex="0">Focusable</div>
   <h5 id="heading1" tabindex="0">Heading</h5>
   <div id="aria-button1" tabindex="0" role="button">ARIA button</div>
   <div id="aria-disabledbutton1" tabindex="0" role="button" aria-disabled="true">ARIA disabled button</div>
   <div id="aria-enabledbutton1" tabindex="0" role="button" aria-disabled="false">ARIA enabled button</div>
   <div id="aria-requiredbutton1" tabindex="0" role="button" aria-required="true">ARIA required button</div>
   <div id="aria-togglebutton1" tabindex="0" role="button" aria-pressed="false">ARIA toggle button</div>
   <div id="aria-link1" tabindex="0" role="link">ARIA link</div>
 </div>

 <canvas id="myCanvas" width="300" height="300">
   <a id="link2" href="#">Link</a>
   <button id="button2">Button</button>
   <button id="labeled-button2" aria-label="Label">Button</button>
   <button id="button-with-title2" title="Title">Button</button>
   <input id="text2" type="text" value="Value">
   <input id="checkbox2" type="checkbox" checked>
   <input id="number2" type="number" value="123">
   <input id="radio2" type="radio" checked>
   <input id="slider2" type="range" min="1" max="10" value="5">
   <input id="submit2" type="submit">
   <select id="combobox2"><option>1<option selected>2</select>
   <select multiple id="listbox2"><option>1<option selected>2</select>
   <textarea id="textarea2">Textarea</textarea>
   <div id="focusable2" tabindex="0">Focusable</div>
   <h5 id="heading2" tabindex="0">Heading</h5>
   <div id="aria-button2" tabindex="0" role="button">ARIA button</div>
   <div id="aria-disabledbutton2" tabindex="0" role="button" aria-disabled="true">ARIA disabled button</div>
   <div id="aria-enabledbutton2" tabindex="0" role="button" aria-disabled="false">ARIA enabled button</div>
   <div id="aria-requiredbutton2" tabindex="0" role="button" aria-required="true">ARIA required button</div>
   <div id="aria-togglebutton2" tabindex="0" role="button" aria-pressed="false">ARIA toggle button</div>
   <div id="aria-link2" tabindex="0" role="link">ARIA link</div>
 </canvas>

 <div id="console"></div>
 <script>
 description("This tests a number of different elements in canvas fallback content to make sure their accessible attributes are essentially identical to the corresponding elements outside of canvas fallback content.");

 if (window.testRunner && window.accessibilityController) {
     window.testRunner.dumpAsText();

     function check(id1, id2) {
         debug(id1);
         window.element1 = document.getElementById(id1);
         element1.focus();
         shouldBe("document.activeElement == element1", "true");
         window.axElement1 = accessibilityController.focusedElement;

         debug(id2);
         window.element2 = document.getElementById(id2);
         element2.focus();
         shouldBe("document.activeElement == element2", "true");
         window.axElement2 = accessibilityController.focusedElement;

         shouldBe("axElement2.role", "axElement1.role");
         shouldBe("axElement2.roleDescription", "axElement1.roleDescription");
         shouldBe("axElement2.title", "axElement1.title");
         shouldBe("axElement2.description", "axElement1.description");
         shouldBe("axElement2.helpText", "axElement1.helpText");
         shouldBe("axElement2.stringValue", "axElement1.stringValue");
         shouldBe("axElement2.isEnabled", "axElement1.isEnabled");
         shouldBe("axElement2.isRequired", "axElement1.isRequired");
         shouldBe("axElement2.isChecked", "axElement1.isChecked");
         shouldBe("axElement2.intValue", "axElement1.intValue");
         shouldBe("axElement2.minValue", "axElement1.minValue");
         shouldBe("axElement2.maxValue", "axElement1.maxValue");
         debug("");
     }

     check("link1", "link2");
     check("button1", "button2");
     check("labeled-button1", "labeled-button2");
     check("button-with-title1", "button-with-title2");
     check("text1", "text2");
     check("checkbox1", "checkbox2");
     check("number1", "number2");
     check("radio1", "radio2");
     check("slider1", "slider2");
     check("submit1", "submit2");
     check("combobox1", "combobox2");
     check("listbox1", "listbox2");
     check("textarea1", "textarea2");
     check("focusable1", "focusable2");
     check("heading1", "heading2");
     check("aria-button1", "aria-button2");
     check("aria-disabledbutton1", "aria-disabledbutton2");
     check("aria-enabledbutton1", "aria-enabledbutton2");
     check("aria-requiredbutton1", "aria-requiredbutton2");
     check("aria-togglebutton1", "aria-togglebutton2");
     check("aria-link1", "aria-link2");
 }

 </script>

 <script src="../resources/js-test-post.js"></script>
 </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<body>
	<script src="../resources/js-test-pre.js"></script>

	<div>
	<a id="link1" href="#">Link</a>
	<button id="button1">Button</button>
	<button id="labeled-button1" aria-label="Label">Button</button>
	<button id="button-with-title1" title="Title">Button</button>
	<input id="text1" type="text" value="Value">
	<input id="checkbox1" type="checkbox" checked>
	<input id="number1" type="number" value="123">
	<input id="radio1" type="radio" checked>
	<input id="slider1" type="range" min="1" max="10" value="5">
	<input id="submit1" type="submit">
	<select id="combobox1"><option>1<option selected>2</select>
	<select multiple id="listbox1"><option>1<option selected>2</select>
	<textarea id="textarea1">Textarea</textarea>
	<div id="focusable1" tabindex="0">Focusable</div>
	<h5 id="heading1" tabindex="0">Heading</h5>
	<div id="aria-button1" tabindex="0" role="button">ARIA button</div>
	<div id="aria-disabledbutton1" tabindex="0" role="button" aria-disabled="true">ARIA disabled button</div>
	<div id="aria-enabledbutton1" tabindex="0" role="button" aria-disabled="false">ARIA enabled button</div>
	<div id="aria-requiredbutton1" tabindex="0" role="button" aria-required="true">ARIA required button</div>
	<div id="aria-togglebutton1" tabindex="0" role="button" aria-pressed="false">ARIA toggle button</div>
	<div id="aria-link1" tabindex="0" role="link">ARIA link</div>
	</div>

	<canvas id="myCanvas" width="300" height="300">
	<a id="link2" href="#">Link</a>
	<button id="button2">Button</button>
	<button id="labeled-button2" aria-label="Label">Button</button>
	<button id="button-with-title2" title="Title">Button</button>
	<input id="text2" type="text" value="Value">
	<input id="checkbox2" type="checkbox" checked>
	<input id="number2" type="number" value="123">
	<input id="radio2" type="radio" checked>
	<input id="slider2" type="range" min="1" max="10" value="5">
	<input id="submit2" type="submit">
	<select id="combobox2"><option>1<option selected>2</select>
	<select multiple id="listbox2"><option>1<option selected>2</select>
	<textarea id="textarea2">Textarea</textarea>
	<div id="focusable2" tabindex="0">Focusable</div>
	<h5 id="heading2" tabindex="0">Heading</h5>
	<div id="aria-button2" tabindex="0" role="button">ARIA button</div>
	<div id="aria-disabledbutton2" tabindex="0" role="button" aria-disabled="true">ARIA disabled button</div>
	<div id="aria-enabledbutton2" tabindex="0" role="button" aria-disabled="false">ARIA enabled button</div>
	<div id="aria-requiredbutton2" tabindex="0" role="button" aria-required="true">ARIA required button</div>
	<div id="aria-togglebutton2" tabindex="0" role="button" aria-pressed="false">ARIA toggle button</div>
	<div id="aria-link2" tabindex="0" role="link">ARIA link</div>
	</canvas>

	<div id="console"></div>
	<script>
	description("This tests a number of different elements in canvas fallback content to make sure their accessible attributes are essentially identical to the corresponding elements outside of canvas fallback content.");

	if (window.testRunner && window.accessibilityController) {
	window.testRunner.dumpAsText();

	function check(id1, id2) {
	debug(id1);
	window.element1 = document.getElementById(id1);
	element1.focus();
	shouldBe("document.activeElement == element1", "true");
	window.axElement1 = accessibilityController.focusedElement;

	debug(id2);
	window.element2 = document.getElementById(id2);
	element2.focus();
	shouldBe("document.activeElement == element2", "true");
	window.axElement2 = accessibilityController.focusedElement;

	shouldBe("axElement2.role", "axElement1.role");
	shouldBe("axElement2.roleDescription", "axElement1.roleDescription");
	shouldBe("axElement2.title", "axElement1.title");
	shouldBe("axElement2.description", "axElement1.description");
	shouldBe("axElement2.helpText", "axElement1.helpText");
	shouldBe("axElement2.stringValue", "axElement1.stringValue");
	shouldBe("axElement2.isEnabled", "axElement1.isEnabled");
	shouldBe("axElement2.isRequired", "axElement1.isRequired");
	shouldBe("axElement2.isChecked", "axElement1.isChecked");
	shouldBe("axElement2.intValue", "axElement1.intValue");
	shouldBe("axElement2.minValue", "axElement1.minValue");
	shouldBe("axElement2.maxValue", "axElement1.maxValue");
	debug("");
	}

	check("link1", "link2");
	check("button1", "button2");
	check("labeled-button1", "labeled-button2");
	check("button-with-title1", "button-with-title2");
	check("text1", "text2");
	check("checkbox1", "checkbox2");
	check("number1", "number2");
	check("radio1", "radio2");
	check("slider1", "slider2");
	check("submit1", "submit2");
	check("combobox1", "combobox2");
	check("listbox1", "listbox2");
	check("textarea1", "textarea2");
	check("focusable1", "focusable2");
	check("heading1", "heading2");
	check("aria-button1", "aria-button2");
	check("aria-disabledbutton1", "aria-disabledbutton2");
	check("aria-enabledbutton1", "aria-enabledbutton2");
	check("aria-requiredbutton1", "aria-requiredbutton2");
	check("aria-togglebutton1", "aria-togglebutton2");
	check("aria-link1", "aria-link2");
	}

	</script>

	<script src="../resources/js-test-post.js"></script>
	</body>
	</html>