picture-disallowed.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<body>
<script type="text/javascript">
// Verify that the resource selection algorithm for <img> elements nested into
// <picture> elements runs first, and only then is subresource filtering applied
// to the selected resource.

if (window.testRunner) {
  // Inject a subresource filter to disallow 'beta.png' (but not 'alpha.png').
  testRunner.setDisallowedSubresourcePathSuffixes(["beta.png"], true /* block_subresources */);
}

function createPicture(selectedSourceUrl, notSelectedSourceUrl) {
  let p = document.createElement("picture");
  let s1 = document.createElement("source");
  s1.srcset = notSelectedSourceUrl;
  s1.type = "not-supported-type/to-disable-this-source";
  p.append(s1);
  let s2 = document.createElement("source");
  s2.srcset = selectedSourceUrl;
  s2.type = "image/png";
  p.append(s2);
  let i = document.createElement("img");
  i.src = "totally-not-existing-image";
  p.append(i);
  return p;
}

async_test(t => {
  let p = createPicture("resources/alpha.png", "resources/beta.png");
  let i = p.lastChild;
  i.onerror = t.unreached_func();
  i.onload = t.step_func_done(_ => {
    assert_equals(i.clientWidth, 100, "Images that are not disallowed should be displayed at their natural width.");
    assert_equals(i.clientHeight, 100, "Images that are not disallowed should be displayed at their natural height.");
    let style = window.getComputedStyle(i);
    assert_equals(style.display, "inline", "Images that are not disallowed should be display:inline");
  });
  document.body.append(p);
}, "Images whose selected source URL is not disallowed should still be displayed as normal.");

async_test(t => {
  let p = createPicture("resources/beta.png", "resources/alpha.png");
  let i = p.lastChild;
  i.onload = t.unreached_func();
  i.onerror = t.step_func_done(_ => {
    assert_equals(i.clientWidth, 0, "Images that are disallowed should be collapsed.");
    assert_equals(i.clientHeight, 0, "Images that are disallowed should be collapsed.");
    assert_equals(i.naturalWidth, 0, "Images that are disallowed should not be loaded.");
    assert_equals(i.naturalHeight, 0, "Images that are disallowed should not be loaded.");
    let style = window.getComputedStyle(i);
    assert_equals(style.display, "none", "Images that are disallowed should be set to display:none");
  });
  document.body.append(p);
}, "Images whose selected source URL is disallowed should not be loaded and should be collapsed in the layout.");

</script>
chromium/third_party/blink/web_tests/http/tests/subresource_filter/picture-disallowed.html
