1 files changed, 67 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-label-element/proxy-modifier-click-to-associated-element.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-label-element/proxy-modifier-click-to-associated-element.tentative.html
new file mode 100644
index 0000000000..fa50c08025
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-label-element/proxy-modifier-click-to-associated-element.tentative.html
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<title>clicks on label element with modifier keys should be proxied to its associated control</title>
+<link rel="author" title="Mu-An Chiou" href="mailto:hi@muan.co">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/forms.html#the-label-element:the-label-element-10">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<div id="log"></div>
+<div style="user-select: none;">
+  <label id="click-label" for="click">foo</label><input id="click" type="checkbox" />
+  <label id="shift-label" for="shift">foo</label><input id="shift" type="checkbox" />
+  <label id="alt-label" for="alt">foo</label><input id="alt" type="checkbox" />
+  <label id="meta-label" for="meta">foo</label><input id="meta" type="checkbox" />
+</div>
+<script>
+  "use strict";
+
+  function clickWithModifier(label, key) {
+    new test_driver.Actions()
+      .keyDown(key)
+      .pointerMove(0, 0, { origin: label })
+      .pointerDown()
+      .pointerUp()
+      .addTick()
+      .keyUp(key)
+      .send()
+  }
+
+  async_test(t => {
+    const label = document.getElementById("click-label");
+    const input = document.getElementById("click");
+
+    input.addEventListener("click", t.step_func_done());
+    new test_driver.click(label)
+
+  }, "label with for attribute should proxy click events to the associated element on click");
+
+  async_test(t => {
+    const label = document.getElementById("shift-label");
+    const input = document.getElementById("shift");
+
+    input.addEventListener("click", t.step_func_done());
+    clickWithModifier(label, "\uE008"); // ShiftLeft
+
+  }, "label with for attribute should proxy click events to the associated element on shift click");
+
+  async_test(t => {
+    const label = document.getElementById("alt-label");
+    const input = document.getElementById("alt");
+
+    input.addEventListener("click", t.step_func_done());
+    clickWithModifier(label, "\uE00A"); // AltLeft
+
+  }, "label with for attribute should proxy click events to the associated element on alt click");
+
+  async_test(t => {
+    const label = document.getElementById("meta-label");
+    const input = document.getElementById("meta");
+
+    input.addEventListener("click", t.step_func_done());
+    clickWithModifier(label, "\uE03D"); // OSLeft
+
+  }, "label with for attribute should proxy click events to the associated element on meta click");
+
+</script>