trusted-types-event-handlers.html | Explore in Territory

<!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__) {
  // This captures all "on{foo}" handlers, but not "on" itself, which is an IDL
  // attribute that returns an Observable.
  const should_be_event_handler = name.startsWith("on") && name !== "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 {
    // Rather than going through all the non-event handler, we randomly choose
    // a few examples to test.
    if (name == "align" ||  name == "title" ||   name == "inert" || name == "draggable") {
        test(t => {
        element.setAttribute(name, "2+2");
      }, `Non-event handler div.${name} should not be blocked.`);
    }
  }
}

</script>
</body>
chromium/third_party/blink/web_tests/external/wpt/trusted-types/trusted-types-event-handlers.html
