[ElementTiming] Cleanup window.location.href usage in tests

This CL removes window.location.href usage in element-timing tests and
uses window.location.origin instead, which makes the pathname
computation cleaner. It also adds t.step_func where it is missing.

Change-Id: Iabaac33eb65f9ed24f68e7fa583c8de05d1264c5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1872762Reviewed-by: Tom McKee <tommckee@chromium.org>
Commit-Queue: Nicolás Peña Moreno <npm@chromium.org>
Cr-Commit-Position: refs/heads/master@{#707954}

third_party/blink/web_tests/external/wpt/element-timing/background-image-multiple-elements.html

@@ -31,9 +31,7 @@ body {
     let observedDiv1 = false;
     let observedDiv2Img = false;
     let observedDiv2Txt = false;
-    const index = window.location.href.lastIndexOf('/');
-    const pathname = window.location.href.substring(0, index) +
-        '/resources/square100.png';
+    const pathname = window.location.origin + '/element-timing/resources/square100.png';
     const observer = new PerformanceObserver(
       t.step_func(function(entryList) {
         entryList.getEntries().forEach(entry => {

third_party/blink/web_tests/external/wpt/element-timing/background-image-stretched.html

@@ -25,9 +25,7 @@ body {
       t.step_func_done(function(entryList) {
         assert_equals(entryList.getEntries().length, 1);
         const entry = entryList.getEntries()[0];
-        const index = window.location.href.lastIndexOf('/');
-        const pathname = window.location.href.substring(0, index) +
-            '/resources/square100.png';
+        const pathname = window.location.origin + '/element-timing/resources/square100.png';
         checkElement(entry, pathname, 'my_div', 'target', beforeRender,
             document.getElementById('target'));
         // The background image extends to occupy to full size of the div.

third_party/blink/web_tests/external/wpt/element-timing/buffer-before-onload.html

@@ -25,19 +25,17 @@
 
     // this PerformanceObserver should be notified about the previously
     // buffered element entry
-    new PerformanceObserver(function (entryList, observer) {
+    new PerformanceObserver(t.step_func((entryList, observer) => {
       assert_equals(entryList.getEntries().length, 1);
-      entryList.getEntries().forEach(function(entry) {
+      entryList.getEntries().forEach(entry => {
         assert_equals(entry.entryType, "element");
-        const index = window.location.href.lastIndexOf('/');
-        const pathname = window.location.href.substring(0, index) +
-            '/resources/square20.jpg';
+        const pathname = window.location.origin + '/element-timing/resources/square20.jpg';
         checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img);
         checkNaturalSize(entry, 20, 20);
         observer.disconnect();
         t.done();
       });
-    }).observe({
+    })).observe({
       type: "element",
       buffered: true
     });

third_party/blink/web_tests/external/wpt/element-timing/disconnect-image.html

@@ -16,9 +16,7 @@
       t.step_func_done(function(entryList) {
         assert_equals(entryList.getEntries().length, 1);
         const entry = entryList.getEntries()[0];
-        const index = window.location.href.lastIndexOf('/');
-        const pathname = window.location.href.substring(0, index) +
-            '/resources/square100.png';
+        const pathname = window.location.origin + '/element-timing/resources/square100.png';
         // This method will check that entry.element is |img|.
         checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img);
 

third_party/blink/web_tests/external/wpt/element-timing/image-carousel.html

@@ -32,12 +32,9 @@ body {
     const beforeRenderTimes = [];
     let entry_count = 0;
     const entry_count_per_element = [0, 0];
-    const index = window.location.href.lastIndexOf('/');
-    const pathname0 = window.location.href.substring(0, index) +
-        '/resources/circle.svg';
-    const pathname1 = window.location.href.substring(0, index) +
-        '/resources/square100.png';
-    const observer = new PerformanceObserver(list => {
+    const pathname0 = window.location.origin + '/element-timing/resources/circle.svg';
+    const pathname1 = window.location.origin + '/element-timing/resources/square100.png';
+    const observer = new PerformanceObserver(t.step_func(list => {
       list.getEntries().forEach(entry => {
         if (entry_count % 2 == 0) {
           checkElement(entry, pathname0, 'image0', 'image0', beforeRenderTimes[entry_count],
@@ -61,7 +58,7 @@ body {
           t.done();
         }
       })
-    });
+    }));
     observer.observe({entryTypes: ['element']});
     let slideIndex = 0;
     showCarousel();

third_party/blink/web_tests/external/wpt/element-timing/image-clipped-svg.html

@@ -14,9 +14,7 @@ async_test(function (t) {
     t.step_func_done(function(entryList) {
       assert_equals(entryList.getEntries().length, 1);
       const entry = entryList.getEntries()[0];
-      const index = window.location.href.lastIndexOf('/');
-      const pathname = window.location.href.substring(0, index) +
-          '/resources/circle.svg';
+      const pathname = window.location.origin + '/element-timing/resources/circle.svg';
       checkElement(entry, pathname, 'my_svg', 'SVG', beforeRender,
           document.getElementById('SVG'));
       // Image size is 200x200 but SVG size is 100x100 so it is clipped.

third_party/blink/web_tests/external/wpt/element-timing/image-not-fully-visible.html

@@ -21,9 +21,7 @@ body {
       t.step_func_done(function(entryList) {
         assert_equals(entryList.getEntries().length, 1);
         const entry = entryList.getEntries()[0];
-        const index = window.location.href.lastIndexOf('/');
-        const pathname = window.location.href.substring(0, index) +
-            '/resources/square20.png';
+        const pathname = window.location.origin + '/element-timing/resources/square20.png';
         checkElement(entry, pathname, 'not_fully_visible', '', beforeRender, img);
         // Image will not be fully visible. It should start from the top left part
         // of the document, excluding the margin, and then overflow.

third_party/blink/web_tests/external/wpt/element-timing/image-with-css-scale.html

@@ -28,9 +28,7 @@ body {
       t.step_func_done(function(entryList) {
         assert_equals(entryList.getEntries().length, 1);
         const entry = entryList.getEntries()[0];
-        const index = window.location.href.lastIndexOf('/');
-        const pathname = window.location.href.substring(0, index - 14) +
-            'images/black-rectangle.png';
+        const pathname = window.location.origin + '/images/black-rectangle.png';
         checkElement(entry, pathname, 'rectangle', 'rect_id', beforeRender,
             document.getElementById('rect_id'));
         checkRect(entry, [0, 200, 25, 125]);

third_party/blink/web_tests/external/wpt/element-timing/image-with-rotation.html

@@ -28,9 +28,7 @@ body {
       t.step_func_done(function(entryList) {
         assert_equals(entryList.getEntries().length, 1);
         const entry = entryList.getEntries()[0];
-        const index = window.location.href.lastIndexOf('/');
-        const pathname = window.location.href.substring(0, index - 14) +
-            'images/black-rectangle.png';
+        const pathname = window.location.origin + '/images/black-rectangle.png';
         checkElement(entry, pathname, 'rectangle', 'rect_id', beforeRender,
             document.getElementById('rect_id'));
         checkNaturalSize(entry, 100, 50);

third_party/blink/web_tests/external/wpt/element-timing/images-repeated-resource.html

@@ -19,9 +19,6 @@ body {
   let renderTime2;
   let img;
   let img2;
-  const index = window.location.href.lastIndexOf('/');
-  const pathname = window.location.href.substring(0, index) +
-      '/resources/square100.png';
   async_test(function (t) {
     if (!window.PerformanceElementTiming) {
       assert_unreached("PerformanceElementTiming is not implemented");
@@ -30,6 +27,7 @@ body {
       t.step_func(function(entryList) {
         assert_equals(entryList.getEntries().length, 1);
         const entry = entryList.getEntries()[0];
+        const pathname = window.location.origin + '/element-timing/resources/square100.png';
         // Easier to check the |element| attribute here since element ID is the same for both images.
         checkElement(entry, pathname, entry.identifier, 'image_id', beforeRender, null);
         checkNaturalSize(entry, 100, 100);

third_party/blink/web_tests/external/wpt/element-timing/multiple-background-images.html

@@ -24,8 +24,7 @@ body {
     let numObservedElements = 0;
     let observedCircle = false;
     let observedSquare = false;
-    const index = window.location.href.lastIndexOf('/');
-    const pathname = window.location.href.substring(0, index) + '/resources/';
+    const pathPrefix = window.location.origin + '/element-timing/resources/';
     let div = document.getElementById('target');
     const observer = new PerformanceObserver(
       t.step_func(entryList => {
@@ -33,13 +32,13 @@ body {
           numObservedElements++;
           if (entry.url.endsWith('square100.png')) {
             observedSquare = true;
-            checkElement(entry, pathname + 'square100.png', 'multi', 'target', beforeRender, div);
+            checkElement(entry, pathPrefix + 'square100.png', 'multi', 'target', beforeRender, div);
             checkRect(entry, [0, 200, 0, 200]);
             checkNaturalSize(entry, 100, 100);
           }
           else if (entry.url.endsWith('circle.svg')) {
             observedCircle = true;
-            checkElement(entry, pathname + 'circle.svg', 'multi', 'target', beforeRender, div);
+            checkElement(entry, pathPrefix + 'circle.svg', 'multi', 'target', beforeRender, div);
             checkRect(entry, [0, 200, 0, 200]);
             checkNaturalSize(entry, 200, 200);
           }

third_party/blink/web_tests/external/wpt/element-timing/observe-background-image.html

@@ -25,9 +25,7 @@ body {
       t.step_func_done(function(entryList) {
         assert_equals(entryList.getEntries().length, 1);
         const entry = entryList.getEntries()[0];
-        const index = window.location.href.lastIndexOf('/');
-        const pathname = window.location.href.substring(0, index - 14) +
-            'images/black-rectangle.png';
+        const pathname = window.location.origin + '/images/black-rectangle.png';
         checkElement(entry, pathname, 'my_div', 'target', beforeRender,
             document.getElementById('target'));
         checkRect(entry, [0, 100, 0, 50]);

third_party/blink/web_tests/external/wpt/element-timing/observe-elementtiming.html

@@ -21,9 +21,7 @@ body {
       t.step_func_done(function(entryList) {
         assert_equals(entryList.getEntries().length, 1);
         const entry = entryList.getEntries()[0];
-        const index = window.location.href.lastIndexOf('/');
-        const pathname = window.location.href.substring(0, index) +
-            '/resources/square100.png';
+        const pathname = window.location.origin + '/element-timing/resources/square100.png';
         checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img);
         // Assume viewport has size at least 100, so the element is fully visible.
         checkRect(entry, [0, 100, 0, 100]);

third_party/blink/web_tests/external/wpt/element-timing/observe-multiple-images.html

@@ -25,7 +25,6 @@ body {
     if (!window.PerformanceElementTiming) {
       assert_unreached("PerformanceElementTiming is not implemented");
     }
-    const index = window.location.href.lastIndexOf('/');
     const observer = new PerformanceObserver(
       t.step_func(function(entryList) {
         entryList.getEntries().forEach( entry => {
@@ -35,8 +34,7 @@ body {
               t.done();
             }
             image1Observed = 1;
-            const pathname1 = window.location.href.substring(0, index) +
-                '/resources/square100.png';
+            const pathname1 = window.location.origin + '/element-timing/resources/square100.png';
             // The images do not contain ID, so expect an empty ID.
             checkElement(entry, pathname1, 'image1', 'img1', beforeRender,
                 document.getElementById('img1'));
@@ -61,8 +59,7 @@ body {
               t.done();
             }
             image2Observed = 1;
-            const pathname2 = window.location.href.substring(0, index) +
-                '/resources/square20.png';
+            const pathname2 = window.location.origin + '/element-timing/resources/square20.png';
             checkElement(entry, pathname2, 'image2', 'img2', beforeRender,
                 document.getElementById('img2'));
             // This image should be below image 1, and should respect the margin.
@@ -75,8 +72,7 @@ body {
               t.done();
             }
             image3Observed = 1;
-            const pathname3 = window.location.href.substring(0, index) +
-                '/resources/circle.svg';
+            const pathname3 = window.location.origin + '/element-timing/resources/circle.svg';
             checkElement(entry, pathname3, 'image3', 'img3', beforeRender,
                 document.getElementById('img3'));
             // This image is just to the right of image2.

third_party/blink/web_tests/external/wpt/element-timing/observe-svg-image.html

@@ -14,9 +14,7 @@ async_test(function (t) {
     t.step_func_done(function(entryList) {
       assert_equals(entryList.getEntries().length, 1);
       const entry = entryList.getEntries()[0];
-      const index = window.location.href.lastIndexOf('/');
-      const pathname = window.location.href.substring(0, index) +
-          '/resources/circle.svg';
+      const pathname = window.location.origin + '/element-timing/resources/circle.svg';
       checkElement(entry, pathname, 'my_svg', 'svg_id', beforeRender,
           document.getElementById('svg_id'));
       // Assume viewport has size at least 200, so the element is fully visible.

third_party/blink/web_tests/external/wpt/element-timing/observe-video-poster.html

@@ -14,9 +14,7 @@ async_test(function (t) {
     t.step_func_done(function(entryList) {
       assert_equals(entryList.getEntries().length, 1);
       const entry = entryList.getEntries()[0];
-      const index = window.location.href.lastIndexOf('/');
-      const pathname = window.location.href.substring(0, index) +
-          '/resources/circle.svg';
+      const pathname = window.location.origin + '/element-timing/resources/circle.svg';
       checkElement(entry, pathname, 'my_poster', 'the_poster', beforeRender,
           document.getElementById('the_poster'));
       // Assume viewport has size at least 200, so the element is fully visible.

third_party/blink/web_tests/external/wpt/element-timing/progressively-loaded-image.html

@@ -23,9 +23,7 @@
       t.step_func_done(function(entryList) {
         assert_equals(entryList.getEntries().length, 1);
         const entry = entryList.getEntries()[0];
-        const index = window.location.href.lastIndexOf('/');
-        const pathname = window.location.href.substring(0, index) + '/' +
-            img_src;
+        const pathname = window.location.origin + '/element-timing/' + img_src;
         // Since the image is only fully loaded after the sleep, the render timestamp
         // must be greater than |beforeRender| + |sleep|.
         checkElement(entry, pathname, 'my_image', '', beforeRender + sleep, img);

third_party/blink/web_tests/external/wpt/element-timing/rectangular-image.html

@@ -21,10 +21,7 @@ body {
       t.step_func_done(function(entryList) {
         assert_equals(entryList.getEntries().length, 1);
         const entry = entryList.getEntries()[0];
-        const index = window.location.href.lastIndexOf('/');
-        // Subtracting 14 to remove 'element-timing'.
-        const pathname = window.location.href.substring(0, index - 14) +
-            'images/black-rectangle.png';
+        const pathname = window.location.origin + '/images/black-rectangle.png';
         checkElement(entry, pathname, 'my_image', 'rectangle', beforeRender, img);
         // Assume viewport has size at least 100, so the element is fully visible.
         checkRect(entry, [20, 120, 20, 70]);