third_party/WebKit/LayoutTests/accessibility/aom-click-action.html - chromium/src - Git at Google

 <!DOCTYPE HTML>
 <script src="../resources/gc.js"></script>
 <script src="../resources/testharness.js"></script>
 <script src="../resources/testharnessreport.js"></script>
 <script src="../http/tests/resources/permissions-helper.js"></script>
 <script src="resources/aom-helper.js"></script>

 <!--

 Accessibility Object Model
 Explainer: https://github.com/WICG/aom/blob/gh-pages/explainer.md
 Spec: https://wicg.github.io/aom/spec/

 -->
 <script>
 test(function(t) {
     assert_true(internals.runtimeFlags.accessibilityObjectModelEnabled);
 }, "Make sure that Accessibility Object Model is enabled");
 </script>

 <button id="target1">Target</button>

 <script>
 async_test(function(t) {
   enableAccessibilityEventsPermission().then(function() {
     var target1 = document.getElementById("target1");
     var axTarget1 = accessibilityController.accessibleElementById("target1");

     var success = false;
     target1.accessibleNode.onaccessibleclick = function() {
       success = true;
     };
     axTarget1.press();

     assert_true(success);
     t.done();
   });
 }, "AccessibleNode.onaccessibleclick");
 </script>

 <button id="target2">Target</button>

 <script>
 async_test(function(t) {
   enableAccessibilityEventsPermission().then(function() {
     var target2 = document.getElementById("target2");
     var axTarget2 = accessibilityController.accessibleElementById("target2");

     var success = false;
     target2.accessibleNode.addEventListener("accessibleclick", function() {
       success = true;
     }, false);
     axTarget2.press();

     assert_true(success);
     t.done();
   });
 }, "AccessibleNode.addEventListener('accessibleclick')");
 </script>

 <button id="target3a">Target without preventDefault</button>
 <button id="target3b">Target with preventDefault</button>

 <script>
 async_test(function(t) {
   enableAccessibilityEventsPermission().then(function() {
     var target3a = document.getElementById("target3a");
     var target3b = document.getElementById("target3b");
     var axTarget3a = accessibilityController.accessibleElementById("target3a");
     var axTarget3b = accessibilityController.accessibleElementById("target3b");

     // Without preventDefault, the AOM event listener gets called
     // first, and then the DOM event listener.
     var calledAOMForTargetA = false;
     target3a.accessibleNode.onaccessibleclick = function() {
       calledAOMForTargetA = true;
     };
     var calledDOMForTargetA = false;
     target3a.addEventListener("click", function() {
       calledDOMForTargetA = true;
     }, false);
     axTarget3a.press();

     assert_true(calledAOMForTargetA, "called AOM for target A");
     assert_true(calledDOMForTargetA, "called DOM for target A");

     // With preventDefault, the AOM event listener gets called only.
     var calledAOMForTargetB = false;
     target3b.accessibleNode.onaccessibleclick = function(evt) {
       calledAOMForTargetB = true;
       evt.preventDefault();
     };
     var calledDOMForTargetB = false;
     target3b.addEventListener("click", function() {
       calledDOMForTargetB = true;
     }, false);
     axTarget3b.press();

     assert_true(calledAOMForTargetB, "called AOM for target B");
     assert_false(calledDOMForTargetB, "called DOM for target B");
     t.done();
   });
 }, "AOM events preventDefault");
 </script>

 <p id="p4">
   <button id="target4">Target</button>
 </p>

 <script>
 async_test(function(t) {
   enableAccessibilityEventsPermission().then(function() {
     var p4 = document.getElementById("p4");
     var axTarget4 = accessibilityController.accessibleElementById("target4");

     var success = false;
     p4.accessibleNode.onaccessibleclick = function() {
       success = true;
     };
     axTarget4.press();

     assert_true(success);
     t.done();
   });
 }, "AOM events bubble");
 </script>

 <section id="section5">
   <ul id="ul5">
     <li id="li5">
       <button id="target5">Target</button>
     </li>
   </ul>
 </section>

 <script>
 async_test(function(t) {
   enableAccessibilityEventsPermission().then(function() {
     var section5 = document.getElementById("section5");
     var ul5 = document.getElementById("ul5");
     var li5 = document.getElementById("li5");
     var target5 = document.getElementById("target5");

     var axTarget5 = accessibilityController.accessibleElementById("target5");

     var seq = [];

     section5.accessibleNode.addEventListener("accessibleclick", function() {
       seq.push("AOM capture SECTION");
     }, true);
     section5.accessibleNode.addEventListener("accessibleclick", function() {
       seq.push("AOM bubble SECTION");
     }, false);
     section5.addEventListener("click", function() {
       seq.push("DOM capture SECTION");
     }, true);
     section5.addEventListener("click", function() {
       seq.push("DOM bubble SECTION");
     }, false);
     ul5.accessibleNode.addEventListener("accessibleclick", function() {
       seq.push("AOM capture UL");
     }, true);
     ul5.accessibleNode.addEventListener("accessibleclick", function() {
       seq.push("AOM bubble UL");
     }, false);
     li5.accessibleNode.addEventListener("accessibleclick", function() {
       seq.push("AOM capture LI");
     }, true);
     li5.accessibleNode.addEventListener("accessibleclick", function() {
       seq.push("AOM bubble LI");
     }, false);
     target5.accessibleNode.addEventListener("accessibleclick", function() {
       seq.push("AOM main event listener BUTTON");
     }, false);
     target5.addEventListener("click", function() {
       seq.push("DOM main event listener BUTTON");
     }, false);

     axTarget5.press();

     assert_equals(seq.join(", "),
                   "AOM capture SECTION, " +
                   "AOM capture UL, " +
                   "AOM capture LI, " +
                   "AOM main event listener BUTTON, " +
                   "AOM bubble LI, " +
                   "AOM bubble UL, " +
                   "AOM bubble SECTION, " +
                   "DOM capture SECTION, " +
                   "DOM main event listener BUTTON, " +
                   "DOM bubble SECTION");
     t.done();
   });
 }, "AOM event capturing and bubbling");
 </script>

 <ul id="ul6a" aria-owns="li6b">
   <li id="li6a">Item A</li>
 </ul>
 <ul id="ul6b">
   <li id="li6b">Item B</li>
 </ul>
 </section>

 <script>
 async_test(function(t) {
   enableAccessibilityEventsPermission().then(function() {
     var ul6a = document.getElementById("ul6a");
     var ul6b = document.getElementById("ul6b");
     var li6b = document.getElementById("li6b");

     var axLI6B = accessibilityController.accessibleElementById("li6b");

     var ul6a_got_event = false;
     var ul6b_got_event = false;

     ul6a.accessibleNode.addEventListener("accessibleclick", function() {
       ul6a_got_event = true;
     }, false);
     ul6b.accessibleNode.addEventListener("accessibleclick", function() {
       ul6b_got_event = true;
     }, false);

     axLI6B.press();
     assert_true(ul6a_got_event);
     assert_false(ul6b_got_event);
     t.done();
   });
 }, "AOM event bubbling respects aria-owns over DOM parent chain");
 </script>

 <p id="container7" aria-label="Container7"></p>

 <script>
 async_test(function(t) {
   enableAccessibilityEventsPermission().then(function() {
     var container7 = document.getElementById("container7");
     var axContainer7 = accessibilityController.accessibleElementById(
         "container7");

     var virtualNode = new AccessibleNode();
     virtualNode.role = "button";
     virtualNode.label = "Button7";
     container7.accessibleNode.appendChild(virtualNode);
     var axVirtualNode = axContainer7.childAtIndex(0);

     var success = false;
     virtualNode.onaccessibleclick = function() {
       success = true;
     };
     axVirtualNode.press();

     assert_true(success);
     t.done();
   });
 }, "AccessibleNode.onaccessibleclick on virtual node");
 </script>
	<!DOCTYPE HTML>
	<script src="../resources/gc.js"></script>
	<script src="../resources/testharness.js"></script>
	<script src="../resources/testharnessreport.js"></script>
	<script src="../http/tests/resources/permissions-helper.js"></script>
	<script src="resources/aom-helper.js"></script>

	<!--

	Accessibility Object Model
	Explainer: https://github.com/WICG/aom/blob/gh-pages/explainer.md
	Spec: https://wicg.github.io/aom/spec/

	-->
	<script>
	test(function(t) {
	assert_true(internals.runtimeFlags.accessibilityObjectModelEnabled);
	}, "Make sure that Accessibility Object Model is enabled");
	</script>

	<button id="target1">Target</button>

	<script>
	async_test(function(t) {
	enableAccessibilityEventsPermission().then(function() {
	var target1 = document.getElementById("target1");
	var axTarget1 = accessibilityController.accessibleElementById("target1");

	var success = false;
	target1.accessibleNode.onaccessibleclick = function() {
	success = true;
	};
	axTarget1.press();

	assert_true(success);
	t.done();
	});
	}, "AccessibleNode.onaccessibleclick");
	</script>

	<button id="target2">Target</button>

	<script>
	async_test(function(t) {
	enableAccessibilityEventsPermission().then(function() {
	var target2 = document.getElementById("target2");
	var axTarget2 = accessibilityController.accessibleElementById("target2");

	var success = false;
	target2.accessibleNode.addEventListener("accessibleclick", function() {
	success = true;
	}, false);
	axTarget2.press();

	assert_true(success);
	t.done();
	});
	}, "AccessibleNode.addEventListener('accessibleclick')");
	</script>

	<button id="target3a">Target without preventDefault</button>
	<button id="target3b">Target with preventDefault</button>

	<script>
	async_test(function(t) {
	enableAccessibilityEventsPermission().then(function() {
	var target3a = document.getElementById("target3a");
	var target3b = document.getElementById("target3b");
	var axTarget3a = accessibilityController.accessibleElementById("target3a");
	var axTarget3b = accessibilityController.accessibleElementById("target3b");

	// Without preventDefault, the AOM event listener gets called
	// first, and then the DOM event listener.
	var calledAOMForTargetA = false;
	target3a.accessibleNode.onaccessibleclick = function() {
	calledAOMForTargetA = true;
	};
	var calledDOMForTargetA = false;
	target3a.addEventListener("click", function() {
	calledDOMForTargetA = true;
	}, false);
	axTarget3a.press();

	assert_true(calledAOMForTargetA, "called AOM for target A");
	assert_true(calledDOMForTargetA, "called DOM for target A");

	// With preventDefault, the AOM event listener gets called only.
	var calledAOMForTargetB = false;
	target3b.accessibleNode.onaccessibleclick = function(evt) {
	calledAOMForTargetB = true;
	evt.preventDefault();
	};
	var calledDOMForTargetB = false;
	target3b.addEventListener("click", function() {
	calledDOMForTargetB = true;
	}, false);
	axTarget3b.press();

	assert_true(calledAOMForTargetB, "called AOM for target B");
	assert_false(calledDOMForTargetB, "called DOM for target B");
	t.done();
	});
	}, "AOM events preventDefault");
	</script>

	<p id="p4">
	<button id="target4">Target</button>
	</p>

	<script>
	async_test(function(t) {
	enableAccessibilityEventsPermission().then(function() {
	var p4 = document.getElementById("p4");
	var axTarget4 = accessibilityController.accessibleElementById("target4");

	var success = false;
	p4.accessibleNode.onaccessibleclick = function() {
	success = true;
	};
	axTarget4.press();

	assert_true(success);
	t.done();
	});
	}, "AOM events bubble");
	</script>

	<section id="section5">
	<ul id="ul5">
	<li id="li5">
	<button id="target5">Target</button>
	</li>
	</ul>
	</section>

	<script>
	async_test(function(t) {
	enableAccessibilityEventsPermission().then(function() {
	var section5 = document.getElementById("section5");
	var ul5 = document.getElementById("ul5");
	var li5 = document.getElementById("li5");
	var target5 = document.getElementById("target5");

	var axTarget5 = accessibilityController.accessibleElementById("target5");

	var seq = [];

	section5.accessibleNode.addEventListener("accessibleclick", function() {
	seq.push("AOM capture SECTION");
	}, true);
	section5.accessibleNode.addEventListener("accessibleclick", function() {
	seq.push("AOM bubble SECTION");
	}, false);
	section5.addEventListener("click", function() {
	seq.push("DOM capture SECTION");
	}, true);
	section5.addEventListener("click", function() {
	seq.push("DOM bubble SECTION");
	}, false);
	ul5.accessibleNode.addEventListener("accessibleclick", function() {
	seq.push("AOM capture UL");
	}, true);
	ul5.accessibleNode.addEventListener("accessibleclick", function() {
	seq.push("AOM bubble UL");
	}, false);
	li5.accessibleNode.addEventListener("accessibleclick", function() {
	seq.push("AOM capture LI");
	}, true);
	li5.accessibleNode.addEventListener("accessibleclick", function() {
	seq.push("AOM bubble LI");
	}, false);
	target5.accessibleNode.addEventListener("accessibleclick", function() {
	seq.push("AOM main event listener BUTTON");
	}, false);
	target5.addEventListener("click", function() {
	seq.push("DOM main event listener BUTTON");
	}, false);

	axTarget5.press();

	assert_equals(seq.join(", "),
	"AOM capture SECTION, " +
	"AOM capture UL, " +
	"AOM capture LI, " +
	"AOM main event listener BUTTON, " +
	"AOM bubble LI, " +
	"AOM bubble UL, " +
	"AOM bubble SECTION, " +
	"DOM capture SECTION, " +
	"DOM main event listener BUTTON, " +
	"DOM bubble SECTION");
	t.done();
	});
	}, "AOM event capturing and bubbling");
	</script>

	<ul id="ul6a" aria-owns="li6b">
	<li id="li6a">Item A</li>
	</ul>
	<ul id="ul6b">
	<li id="li6b">Item B</li>
	</ul>
	</section>

	<script>
	async_test(function(t) {
	enableAccessibilityEventsPermission().then(function() {
	var ul6a = document.getElementById("ul6a");
	var ul6b = document.getElementById("ul6b");
	var li6b = document.getElementById("li6b");

	var axLI6B = accessibilityController.accessibleElementById("li6b");

	var ul6a_got_event = false;
	var ul6b_got_event = false;

	ul6a.accessibleNode.addEventListener("accessibleclick", function() {
	ul6a_got_event = true;
	}, false);
	ul6b.accessibleNode.addEventListener("accessibleclick", function() {
	ul6b_got_event = true;
	}, false);

	axLI6B.press();
	assert_true(ul6a_got_event);
	assert_false(ul6b_got_event);
	t.done();
	});
	}, "AOM event bubbling respects aria-owns over DOM parent chain");
	</script>

	<p id="container7" aria-label="Container7"></p>

	<script>
	async_test(function(t) {
	enableAccessibilityEventsPermission().then(function() {
	var container7 = document.getElementById("container7");
	var axContainer7 = accessibilityController.accessibleElementById(
	"container7");

	var virtualNode = new AccessibleNode();
	virtualNode.role = "button";
	virtualNode.label = "Button7";
	container7.accessibleNode.appendChild(virtualNode);
	var axVirtualNode = axContainer7.childAtIndex(0);

	var success = false;
	virtualNode.onaccessibleclick = function() {
	success = true;
	};
	axVirtualNode.press();

	assert_true(success);
	t.done();
	});
	}, "AccessibleNode.onaccessibleclick on virtual node");
	</script>