Synthetic click events and event dispatch

This is testing some of the scenarios discussed in whatwg/dom#325 and specified in whatwg/dom#342.
web-platform-tests · Oct 20, 2016 · c36310c · c36310c
1 parent b530caf
commit c36310c
Showing 1 changed file with 119 additions and 0 deletions.
diff --git a/dom/events/Event-dispatch-click.html b/dom/events/Event-dispatch-click.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<title>Synthetic click event "magic"</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<div id=dump style=display:none></div>
+<script>
+var dump = document.getElementById("dump")
+
+async_test(function(t) {
+  var input = document.createElement("input")
+  input.type = "checkbox"
+  dump.appendChild(input)
+  input.onclick = t.step_func_done(function() {
+    assert_true(input.checked)
+  })
+  input.click()
+}, "basic with click()")
+
+async_test(function(t) {
+  var input = document.createElement("input")
+  input.type = "checkbox"
+  dump.appendChild(input)
+  input.onclick = t.step_func_done(function() {
+    assert_true(input.checked)
+  })
+  input.dispatchEvent(new MouseEvent("click", {bubbles:true})) // equivalent to the above
+}, "basic with dispatchEvent()")
+
+async_test(function(t) {
+  var input = document.createElement("input")
+  input.type = "checkbox"
+  dump.appendChild(input)
+  input.onclick = t.step_func_done(function() {
+    assert_false(input.checked)
+  })
+  input.dispatchEvent(new Event("click", {bubbles:true})) // no MouseEvent
+}, "basic with wrong event class")
+
+async_test(function(t) {
+  var input = document.createElement("input")
+  input.type = "checkbox"
+  dump.appendChild(input)
+  var child = input.appendChild(new Text("does not matter"))
+  child.dispatchEvent(new MouseEvent("click")) // does not bubble
+  assert_false(input.checked)
+  t.done()
+}, "look at parents only when event bubbles")
+
+async_test(function(t) {
+  var input = document.createElement("input")
+  input.type = "checkbox"
+  dump.appendChild(input)
+  input.onclick = t.step_func_done(function() {
+    assert_true(input.checked)
+  })
+  var child = input.appendChild(new Text("does not matter"))
+  child.dispatchEvent(new MouseEvent("click", {bubbles:true}))
+}, "look at parents when event bubbles")
+
+async_test(function(t) {
+  var input = document.createElement("input")
+  input.type = "checkbox"
+  dump.appendChild(input)
+  input.onclick = t.step_func(function() {
+    assert_false(input.checked, "input pre-click must not be triggered")
+  })
+  var child = input.appendChild(document.createElement("input"))
+  child.type = "checkbox"
+  child.onclick = t.step_func(function() {
+    assert_true(input.checked, "child pre-click must be triggered")
+  })
+  child.dispatchEvent(new MouseEvent("click", {bubbles:true}))
+  t.done()
+}, "pick the first with activation behavior <input type=checkbox>")
+
+var globalCounter = 0 // sorry
+async_test(function(t) { // as above with <a>
+  var i = 0
+  var link = document.createElement("a")
+  link.href = "javascript:globalCounter--" // must not be triggered
+  dump.appendChild(link)
+  var child = link.appendChild(document.createElement("a"))
+  child.href = "javascript:globalCounter++"
+  child.dispatchEvent(new MouseEvent("click", {bubbles:true}))
+  assert_equals(globalCounter, 1)
+  t.done()
+}, "pick the first with activation behavior <a href>")
+
+async_test(function(t) {
+  var input = document.createElement("input")
+  input.type = "checkbox"
+  dump.appendChild(input)
+  var clickEvent = new MouseEvent("click")
+  input.onchange = t.step_func_done(function() {
+    assert_false(clickEvent.defaultPrevented)
+    assert_equals(clickEvent.eventPhase, 0)
+    assert_equals(clickEvent.currentTarget, null)
+    assert_equals(clickEvent.target, input)
+    assert_equals(clickEvent.composedPath().length, 0)
+  })
+  input.dispatchEvent(clickEvent)
+}, "event state during post-click handling")
+
+async_test(function(t) {
+  var input = document.createElement("input")
+  input.type = "checkbox"
+  dump.appendChild(input)
+  var clickEvent = new MouseEvent("click")
+  var finalTarget = document.createElement("doesnotmatter")
+  finalTarget.onclick = t.step_func_done(function() {
+    assert_equals(clickEvent.target, finalTarget)
+  })
+  input.onchange = t.step_func(function() {
+    finalTarget.dispatchEvent(clickEvent)
+  })
+  input.dispatchEvent(clickEvent)
+}, "redispatch during post-click handling")
+</script>