Bug 1540738 [wpt PR 15936] - [ElementTiming] Mimic FCP++ rect computa…

…tions, a=testonly

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 <image> 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 <maxlgchromium.org>
Reviewed-by: Mason Freed <masonfreedchromium.org>
Reviewed-by: Chris Harrelson <chrishtrchromium.org>
Commit-Queue: Nicolás Peña Moreno <npmchromium.org>
Cr-Commit-Position: refs/heads/master{#645021}

--

wpt-commits: 5570bb27d55420f0639dab2415e618afdb94a6f6
wpt-pr: 15936

UltraBlame original commit: 23a225d2d306b6eaa5d2f6a044dc58eb0ff75b1e

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
+>