[ElementTiming] Add more image Timing-Allow-Origin tests

Bug: 879270
Change-Id: I7de3f75d2d27fd960b6e1fb6785f8269a56f1401
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1689785
Commit-Queue: Nicolás Peña Moreno <npm@chromium.org>
Reviewed-by: Yoav Weiss <yoavweiss@chromium.org>
Cr-Commit-Position: refs/heads/master@{#676038}
diff --git a/element-timing/image-TAO-wildcard.sub.html b/element-timing/image-TAO-wildcard.sub.html
deleted file mode 100644
index 3af893a..0000000
--- a/element-timing/image-TAO-wildcard.sub.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE HTML>
-<meta charset=utf-8>
-<title>Element Timing: observe elements from same-origin iframes</title>
-<body>
-<style>
-body {
-  margin: 0;
-}
-</style>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/element-timing-helpers.js"></script>
-<script>
-  async_test((t) => {
-    if (!window.PerformanceElementTiming) {
-      assert_unreached("PerformanceElementTiming is not implemented");
-    }
-    let beforeRender;
-    let img;
-    const img_src = 'http://{{domains[www]}}:{{ports[http][1]}}/element-timing/'
-        + 'resources/TAOImage.py?tao=wildcard';
-    const observer = new PerformanceObserver(
-      t.step_func_done((entryList) => {
-        assert_equals(entryList.getEntries().length, 1);
-        const entry = entryList.getEntries()[0];
-        checkElement(entry, img_src, 'my_image', 'my_id', beforeRender, img);
-        // Assume viewport has size at least 20, so the element is fully visible.
-        checkRect(entry, [0, 20, 0, 20]);
-        checkNaturalSize(entry, 20, 20);
-      })
-    );
-    observer.observe({entryTypes: ['element']});
-    // We add the image during onload to be sure that the observer is registered
-    // in time for it to observe the element timing.
-    // TODO(npm): change observer to use buffered flag.
-    window.onload = t.step_func(() => {
-      img = document.createElement('img');
-      img.src = img_src;
-      img.setAttribute('elementtiming', 'my_image');
-      img.setAttribute('id', 'my_id');
-      img.onload = t.step_func(() => {
-        // After a short delay, assume that the entry was not dispatched.
-        t.step_timeout(() => {
-          assert_unreached("Should have received an entry!");
-          t.done();
-        }, 100);
-      });
-      document.body.appendChild(img);
-      beforeRender = performance.now();
-    });
-  }, 'Cross-origin element with wildcard TAO is observed.');
-</script>
-
-</body>
diff --git a/element-timing/image-TAO.sub.html b/element-timing/image-TAO.sub.html
new file mode 100644
index 0000000..83a7a5c
--- /dev/null
+++ b/element-timing/image-TAO.sub.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>Element Timing: observe cross origin images with various Timing-Allow-Origin headers</title>
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/element-timing-helpers.js"></script>
+<script>
+  async_test(t => {
+    if (!window.PerformanceElementTiming) {
+      assert_unreached("PerformanceElementTiming is not implemented");
+    }
+    const beforeRender = performance.now();
+    const remote_img = 'http://{{domains[www]}}:{{ports[http][1]}}/element-timing/resources/TAOImage.py?'
+        + 'origin=' + window.location.origin +'&tao=';
+    const valid_tao = ['wildcard', 'origin', 'multi', 'multi_wildcard', 'match_origin', 'match_wildcard'];
+    function addImage(tao) {
+      const img = document.createElement('img');
+      img.src = remote_img + tao;
+      img.setAttribute('elementtiming', tao);
+      img.id = 'id_' + tao;
+      document.body.appendChild(img);
+    }
+    valid_tao.forEach(tao => {
+      addImage(tao);
+    });
+    const invalid_tao = ['null', 'space', 'uppercase'];
+    invalid_tao.forEach(tao => {
+      addImage(tao);
+    });
+    let img_count = 0;
+    const total_images = valid_tao.length + invalid_tao.length;
+    new PerformanceObserver(
+      t.step_func(entryList => {
+        entryList.getEntries().forEach(entry => {
+          img_count++;
+          const tao = entry.identifier;
+          const img = document.getElementById('id_' + tao);
+          if (valid_tao.includes(tao)) {
+            checkElement(entry, remote_img + tao, tao, 'id_' + tao, beforeRender, img);
+          } else if (invalid_tao.includes(tao)) {
+            assert_equals(entry.startTime, 0, 'Entry with tao=' + tao + ' must have a startTime of 0');
+            checkElement(entry, remote_img + tao, tao, 'id_' + tao, 0, img);
+          }
+          else {
+            assert_unreached('Should be in one of valid_tao OR invalid_tao');
+          }
+          checkNaturalSize(entry, 20, 20);
+          if (img_count == total_images)
+            t.done();
+        });
+      })
+    ).observe({type: 'element', buffered: true});
+  }, 'Cross-origin elements with valid TAO have correct startTime, with invalid TAO have startTime set to 0.');
+</script>
+</body>
diff --git a/element-timing/resources/TAOImage.py b/element-timing/resources/TAOImage.py
index 5d042c4..1e0afb3 100644
--- a/element-timing/resources/TAOImage.py
+++ b/element-timing/resources/TAOImage.py
@@ -1,7 +1,7 @@
 import os
 
 def main(request, response):
-    origin = request.GET.first('origin', '');
+    origin = request.GET.first('origin')
     if origin:
         response.headers.set('Access-Control-Allow-Origin', origin)