<!DOCTYPE html>
<head>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script'">
</head>
<body>
<script>
const element = document.createElement("div");

[
  "onclick",
  "onchange",
  "onfocus",
  "oNclick",
  "OnClIcK"
].forEach(name => {
  test(t => {
    assert_throws_js(TypeError,
        _ => element.setAttribute(name, "2+2"));
  }, `Event handler ${name} should be blocked.`);
});

[
  "one",
  "oNe",
  "onIcon",
  "offIcon",
  "blubb"
].forEach(name => {
  test(t => {
    element.setAttribute(name, "2+2");
  }, `Non-event handler ${name} should not be blocked.`);
});

// We'd like to be sure we're not missing anything. Let's "query" an HTML
// element about which attributes it knows.
const div = document.createElement("div");
for(name in div.__proto__) {
  const should_be_event_handler = name.startsWith("on");
  if (should_be_event_handler) {
    test(t => {
      assert_throws_js(TypeError,
          _ => element.setAttribute(name, "2+2"));
    }, `Event handler div.${name} should be blocked.`);
  } else {
    test(t => {
      element.setAttribute(name, "2+2");
    }, `Non-event handler div.${name} should not be blocked.`);
  }
}
</script>
</body>
