Skip to content
Permalink
Browse files
[css-position-sticky] createIndicatorForStickyElements testing functi…
…on races with font loading

https://bugs.webkit.org/show_bug.cgi?id=229602

Reviewed by Žan Doberšek.

LayoutTests/imported/w3c:

* web-platform-tests/css/css-position/resources/ref-rectangle.js:
(createIndicatorForStickyElements): Wait to read the size of the target div until
all web fonts have loaded. This ensures that this executes after Ahem has loaded
for the failing test.

LayoutTests:

* TestExpectations: Mark a test as newly passing.


Canonical link: https://commits.webkit.org/241048@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@281698 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
mrobinson committed Aug 27, 2021
1 parent 58de3b4 commit 178a58672718a1c76728f86577a6dee6ba5d125a
Showing 4 changed files with 42 additions and 17 deletions.
@@ -1,3 +1,12 @@
2021-08-27 Martin Robinson <mrobinson@webkit.org>

[css-position-sticky] createIndicatorForStickyElements testing function races with font loading
https://bugs.webkit.org/show_bug.cgi?id=229602

Reviewed by Žan Doberšek.

* TestExpectations: Mark a test as newly passing.

2021-08-27 Ayumi Kojima <ayumi_kojima@apple.com>

[Mac wk2] http/tests/media/hls/hls-webvtt-seek-backwards.html is a flaky timeout.
@@ -3473,7 +3473,6 @@ webkit.org/b/228993 imported/w3c/web-platform-tests/css/css-position/multicol/st
webkit.org/b/228993 imported/w3c/web-platform-tests/css/css-position/multicol/static-position/vrl-ltr-rtl-in-multicol.tentative.html [ ImageOnlyFailure ]
webkit.org/b/228993 imported/w3c/web-platform-tests/css/css-position/multicol/static-position/vrl-rtl-ltr-in-multicol.tentative.html [ ImageOnlyFailure ]
webkit.org/b/228993 imported/w3c/web-platform-tests/css/css-position/multicol/static-position/vrl-rtl-rtl-in-multicol.html [ ImageOnlyFailure ]
webkit.org/b/203450 imported/w3c/web-platform-tests/css/css-position/sticky/position-sticky-inline.html [ ImageOnlyFailure ]
webkit.org/b/203450 imported/w3c/web-platform-tests/css/css-position/sticky/position-sticky-writing-modes.html [ ImageOnlyFailure ]
webkit.org/b/203450 imported/w3c/web-platform-tests/css/css-position/sticky/position-sticky-large-top-2.tentative.html [ ImageOnlyFailure ]
webkit.org/b/203450 imported/w3c/web-platform-tests/css/css-position/sticky/position-sticky-large-top.tentative.html [ ImageOnlyFailure ]
@@ -1,3 +1,15 @@
2021-08-27 Martin Robinson <mrobinson@webkit.org>

[css-position-sticky] createIndicatorForStickyElements testing function races with font loading
https://bugs.webkit.org/show_bug.cgi?id=229602

Reviewed by Žan Doberšek.

* web-platform-tests/css/css-position/resources/ref-rectangle.js:
(createIndicatorForStickyElements): Wait to read the size of the target div until
all web fonts have loaded. This ensures that this executes after Ahem has loaded
for the failing test.

2021-08-27 Emilio Cobos Álvarez <emilio@crisal.io>

Don't forget about the outer selector when matching ::slotted().
@@ -7,23 +7,28 @@ function createIndicatorForStickyElements(sticky_divs) {
throw "No sticky div was found in the test case.";

sticky_divs.forEach((sticky_div) => {
// The relative position indicator will be able to share the same containing
// block to match the position with the same offset from in flow position
// (offsetTop/offsetLeft)
if (getComputedStyle(sticky_div).position != "sticky")
throw "Provided sticky element does not have position: sticky";
var position_div = document.createElement("div");
position_div.style.left = sticky_div.offsetLeft + "px";
position_div.style.top = sticky_div.offsetTop + "px";
// The absolute position is to ensure that the position_div adds zero size
// to in flow layout
position_div.style.position = "absolute"
var indicator_div = document.createElement("div");
indicator_div.style.width = sticky_div.offsetWidth + "px";
indicator_div.style.height = sticky_div.offsetHeight + "px";
indicator_div.style.backgroundColor = "blue";
indicator_div.style.position = "relative";
position_div.appendChild(indicator_div);
sticky_div.parentNode.insertBefore(position_div, sticky_div);
});

document.fonts.ready.then(() => {
sticky_divs.forEach((sticky_div) => {
// The relative position indicator will be able to share the same containing
// block to match the position with the same offset from in flow position
// (offsetTop/offsetLeft)
let position_div = document.createElement("div");
position_div.style.left = sticky_div.offsetLeft + "px";
position_div.style.top = sticky_div.offsetTop + "px";
// The absolute position is to ensure that the position_div adds zero size
// to in flow layout
position_div.style.position = "absolute"
let indicator_div = document.createElement("div");
indicator_div.style.width = sticky_div.offsetWidth + "px";
indicator_div.style.height = sticky_div.offsetHeight + "px";
indicator_div.style.backgroundColor = "blue";
indicator_div.style.position = "relative";
position_div.appendChild(indicator_div);
sticky_div.parentNode.insertBefore(position_div, sticky_div);
});
});
}

0 comments on commit 178a586

Please sign in to comment.