From 47624bdda645c126d6a14becd89dcd6347402927 Mon Sep 17 00:00:00 2001 From: Marco Castelluccio Date: Fri, 4 Oct 2019 14:42:17 +0000 Subject: [PATCH] Bug 1540738 [wpt PR 15936] - [ElementTiming] Mimic FCP++ rect computations, a=testonly MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Automatic update from web-platform-tests [ElementTiming] Mimic FCP++ rect computations This CL changes ElementTiming rect computation to use a computation similar to that used by FCP++, but relative to the owning frame. The tests show that the new computation seems more accurate as they uncovered a problem with the SVG test: default SVG size is 300x150 so it was clipping the element inside. A test for rect coordinates relative to iframe is added. Bug: 879270, 943138 Change-Id: Ib8fa266bda76843fbf7ca07f82ac5bb245d52c4d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1531503 Reviewed-by: Liquan (Max) Gu Reviewed-by: Mason Freed Reviewed-by: Chris Harrelson Commit-Queue: Nicolás Peña Moreno Cr-Commit-Position: refs/heads/master{#645021} -- wpt-commits: 5570bb27d55420f0639dab2415e618afdb94a6f6 wpt-pr: 15936 UltraBlame original commit: 23a225d2d306b6eaa5d2f6a044dc58eb0ff75b1e --- .../element-timing/image-clipped-svg.html | 304 ++++++++++++++++++ .../element-timing/image-rect-iframe.html | 237 ++++++++++++++ .../element-timing/observe-svg-image.html | 10 + .../iframe-with-square-sends-entry.html | 130 ++++++++ 4 files changed, 681 insertions(+) create mode 100644 testing/web-platform/tests/element-timing/image-clipped-svg.html create mode 100644 testing/web-platform/tests/element-timing/image-rect-iframe.html create mode 100644 testing/web-platform/tests/element-timing/resources/iframe-with-square-sends-entry.html diff --git a/testing/web-platform/tests/element-timing/image-clipped-svg.html b/testing/web-platform/tests/element-timing/image-clipped-svg.html new file mode 100644 index 0000000000000..275286770c2ea --- /dev/null +++ b/testing/web-platform/tests/element-timing/image-clipped-svg.html @@ -0,0 +1,304 @@ +< +! +DOCTYPE +HTML +> +< +meta +charset += +utf +- +8 +> +< +title +> +Element +Timing +: +observe +image +inside +SVG +with +small +dimensions +< +/ +title +> +< +script +src += +" +/ +resources +/ +testharness +. +js +" +> +< +/ +script +> +< +script +src += +" +/ +resources +/ +testharnessreport +. +js +" +> +< +/ +script +> +< +script +src += +" +resources +/ +element +- +timing +- +helpers +. +js +" +> +< +/ +script +> +< +script +> +let +beforeRender +; +async_test +( +function +( +t +) +{ +const +observer += +new +PerformanceObserver +( +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 +' +; +checkElement +( +entry +pathname +' +my_svg +' +beforeRender +) +; +/ +/ +Image +size +is +200x200 +but +SVG +size +is +100x100 +so +it +is +clipped +. +checkRect +( +entry +[ +0 +100 +0 +100 +] +) +; +} +) +) +; +observer +. +observe +( +{ +entryTypes +: +[ +' +element +' +] +} +) +; +beforeRender += +performance +. +now +( +) +; +} +" +Able +to +observe +svg +image +. +" +) +; +< +/ +script +> +< +style +> +body +{ +margin +: +0 +; +} +< +/ +style +> +< +svg +width += +" +100 +" +height += +" +100 +" +> +< +image +href += +' +resources +/ +circle +. +svg +' +elementtiming += +' +my_svg +' +/ +> +< +/ +svg +> diff --git a/testing/web-platform/tests/element-timing/image-rect-iframe.html b/testing/web-platform/tests/element-timing/image-rect-iframe.html new file mode 100644 index 0000000000000..47a616ea002f6 --- /dev/null +++ b/testing/web-platform/tests/element-timing/image-rect-iframe.html @@ -0,0 +1,237 @@ +< +! +DOCTYPE +HTML +> +< +meta +charset += +utf +- +8 +> +< +title +> +Element +Timing +: +check +intersectionRect +for +element +in +iframe +< +/ +title +> +< +body +> +< +style +> +body +{ +margin +: +50px +; +} +< +/ +style +> +< +script +src += +" +/ +resources +/ +testharness +. +js +" +> +< +/ +script +> +< +script +src += +" +/ +resources +/ +testharnessreport +. +js +" +> +< +/ +script +> +< +script +> +async_test +( +( +t +) += +> +{ +on_event +( +window +' +message +' +e += +> +{ +assert_equals +( +e +. +data +. +length +1 +) +; +assert_equals +( +e +. +data +. +entryType +' +element +' +) +; +const +rect += +e +. +data +. +rect +; +/ +/ +rect +should +start +at +( +0 +0 +) +even +though +main +frame +has +a +margin +. +assert_equals +( +rect +. +left +0 +) +; +assert_equals +( +rect +. +right +100 +) +; +assert_equals +( +rect +. +top +0 +) +; +assert_equals +( +rect +. +bottom +100 +) +; +t +. +done +( +) +; +} +) +; +} +' +Element +Timing +entry +in +iframe +has +coordinates +relative +to +the +iframe +. +' +) +; +< +/ +script +> +< +iframe +src += +" +resources +/ +iframe +- +with +- +square +- +sends +- +entry +. +html +" +/ +> +< +/ +body +> diff --git a/testing/web-platform/tests/element-timing/observe-svg-image.html b/testing/web-platform/tests/element-timing/observe-svg-image.html index 3217b46b0a749..62f4ba5f994f2 100644 --- a/testing/web-platform/tests/element-timing/observe-svg-image.html +++ b/testing/web-platform/tests/element-timing/observe-svg-image.html @@ -266,6 +266,16 @@ > < svg +width += +" +300 +" +height += +" +300 +" > < image diff --git a/testing/web-platform/tests/element-timing/resources/iframe-with-square-sends-entry.html b/testing/web-platform/tests/element-timing/resources/iframe-with-square-sends-entry.html new file mode 100644 index 0000000000000..43a35615f976b --- /dev/null +++ b/testing/web-platform/tests/element-timing/resources/iframe-with-square-sends-entry.html @@ -0,0 +1,130 @@ +< +! +DOCType +html +> +< +html +> +< +style +> +body +{ +margin +: +0 +; +} +< +/ +style +> +< +body +> +< +script +> +const +observer += +new +PerformanceObserver +( +entryList += +> +{ +top +. +postMessage +( +{ +' +length +' +: +entryList +. +getEntries +( +) +. +length +' +entryType +' +: +entryList +. +getEntries +( +) +[ +0 +] +. +entryType +' +rect +' +: +entryList +. +getEntries +( +) +[ +0 +] +. +intersectionRect +} +' +* +' +) +; +} +) +; +observer +. +observe +( +{ +entryTypes +: +[ +' +element +' +] +} +) +; +< +/ +script +> +< +img +src += +square100 +. +png +elementtiming += +my_image +/ +> +< +/ +body +> +< +/ +html +>