- Revision
- 284186
- Author
- [email protected]
- Date
- 2021-10-14 11:46:17 -0700 (Thu, 14 Oct 2021)
Log Message
Cherry-pick r284169. rdar://problem/84266655
REGRESSION (r283858): Intense white hover state appears on playback controls on Netflix/YouTube
https://bugs.webkit.org/show_bug.cgi?id=231719
rdar://84213404
Reviewed by Tim Horton.
Source/WebCore:
The playback controls on Netflix/YouTube are buttons that have a
non-'none' appearance value, but a used value of 'none' due to author
styles. In WebKit, and other engines, setting a background or text
color different from the UA style makes the used value 'none' and
drops native appearance.
The used value (effectiveAppearance) is set to none by comparing the
element's style to the UA style in RenderTheme::adjustStyle. However, when
style is adjusted during animation, the UA style is not passed in to the
method (see r273003). Consequently, we are unable to compare styles and
end up setting the 'effectiveAppearance' to 'appearance' (the computed value)
after r283858. Since the 'appearance' is not 'none', a native button is
briefly displayed during a hover animation, resulting in a white flash.
This was not an issue before r283858, as that change added logic to
always update the effectiveAppearance in RenderTheme::adjustStyle.
Before the change, the effectiveAppearance would simply be carried over
from the style before animation, and would remain 'none'.
To fix, only update the effectiveAppearance if its current value is
incorrect (auto, or styled). Additionally, use effectiveAppearance
more consistently, to ensure we do not incorrectly treat
style.appearance() as the used value.
Test: fast/forms/button-animation-appearance.html
* rendering/RenderTheme.cpp:
(WebCore::RenderTheme::adjustStyle):
LayoutTests:
Added a mismatch test to ensure that animating the background color
of a button drops native appearance. Verified that the test passes
before r283858, on Safari 15, and fails on r283858.
* fast/forms/button-animation-appearance-expected-mismatch.html: Added.
* fast/forms/button-animation-appearance.html: Added.
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@284169 268f45cc-cd09-0410-ab3c-d52691b4dbfc
Modified Paths
Added Paths
Diff
Modified: branches/safari-613.1.5-branch/LayoutTests/ChangeLog (284185 => 284186)
--- branches/safari-613.1.5-branch/LayoutTests/ChangeLog 2021-10-14 18:46:14 UTC (rev 284185)
+++ branches/safari-613.1.5-branch/LayoutTests/ChangeLog 2021-10-14 18:46:17 UTC (rev 284186)
@@ -1,3 +1,71 @@
+2021-10-14 Alan Coon <[email protected]>
+
+ Cherry-pick r284169. rdar://problem/84266655
+
+ REGRESSION (r283858): Intense white hover state appears on playback controls on Netflix/YouTube
+ https://bugs.webkit.org/show_bug.cgi?id=231719
+ rdar://84213404
+
+ Reviewed by Tim Horton.
+
+ Source/WebCore:
+
+ The playback controls on Netflix/YouTube are buttons that have a
+ non-'none' appearance value, but a used value of 'none' due to author
+ styles. In WebKit, and other engines, setting a background or text
+ color different from the UA style makes the used value 'none' and
+ drops native appearance.
+
+ The used value (effectiveAppearance) is set to none by comparing the
+ element's style to the UA style in RenderTheme::adjustStyle. However, when
+ style is adjusted during animation, the UA style is not passed in to the
+ method (see r273003). Consequently, we are unable to compare styles and
+ end up setting the 'effectiveAppearance' to 'appearance' (the computed value)
+ after r283858. Since the 'appearance' is not 'none', a native button is
+ briefly displayed during a hover animation, resulting in a white flash.
+
+ This was not an issue before r283858, as that change added logic to
+ always update the effectiveAppearance in RenderTheme::adjustStyle.
+ Before the change, the effectiveAppearance would simply be carried over
+ from the style before animation, and would remain 'none'.
+
+ To fix, only update the effectiveAppearance if its current value is
+ incorrect (auto, or styled). Additionally, use effectiveAppearance
+ more consistently, to ensure we do not incorrectly treat
+ style.appearance() as the used value.
+
+ Test: fast/forms/button-animation-appearance.html
+
+ * rendering/RenderTheme.cpp:
+ (WebCore::RenderTheme::adjustStyle):
+
+ LayoutTests:
+
+ Added a mismatch test to ensure that animating the background color
+ of a button drops native appearance. Verified that the test passes
+ before r283858, on Safari 15, and fails on r283858.
+
+ * fast/forms/button-animation-appearance-expected-mismatch.html: Added.
+ * fast/forms/button-animation-appearance.html: Added.
+
+
+ git-svn-id: https://svn.webkit.org/repository/webkit/trunk@284169 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+ 2021-10-14 Aditya Keerthi <[email protected]>
+
+ REGRESSION (r283858): Intense white hover state appears on playback controls on Netflix/YouTube
+ https://bugs.webkit.org/show_bug.cgi?id=231719
+ rdar://84213404
+
+ Reviewed by Tim Horton.
+
+ Added a mismatch test to ensure that animating the background color
+ of a button drops native appearance. Verified that the test passes
+ before r283858, on Safari 15, and fails on r283858.
+
+ * fast/forms/button-animation-appearance-expected-mismatch.html: Added.
+ * fast/forms/button-animation-appearance.html: Added.
+
2021-10-10 Sihui Liu <[email protected]>
Add support for iterating FileSystemDirectoryHandle
Added: branches/safari-613.1.5-branch/LayoutTests/fast/forms/button-animation-appearance-expected-mismatch.html (0 => 284186)
--- branches/safari-613.1.5-branch/LayoutTests/fast/forms/button-animation-appearance-expected-mismatch.html (rev 0)
+++ branches/safari-613.1.5-branch/LayoutTests/fast/forms/button-animation-appearance-expected-mismatch.html 2021-10-14 18:46:17 UTC (rev 284186)
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+ <input type=button value="Test">
+</body>
+</html>
Added: branches/safari-613.1.5-branch/LayoutTests/fast/forms/button-animation-appearance.html (0 => 284186)
--- branches/safari-613.1.5-branch/LayoutTests/fast/forms/button-animation-appearance.html (rev 0)
+++ branches/safari-613.1.5-branch/LayoutTests/fast/forms/button-animation-appearance.html 2021-10-14 18:46:17 UTC (rev 284186)
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+ @keyframes test {
+ from { background-color: red; }
+ to { background-color: red; }
+ }
+
+ input {
+ background-color: red;
+ animation-name: test;
+ animation-duration: 1s;
+ }
+</style>
+</head>
+<body>
+ <input type=button value="Test">
+</body>
+</html>
Modified: branches/safari-613.1.5-branch/Source/WebCore/ChangeLog (284185 => 284186)
--- branches/safari-613.1.5-branch/Source/WebCore/ChangeLog 2021-10-14 18:46:14 UTC (rev 284185)
+++ branches/safari-613.1.5-branch/Source/WebCore/ChangeLog 2021-10-14 18:46:17 UTC (rev 284186)
@@ -1,3 +1,93 @@
+2021-10-14 Alan Coon <[email protected]>
+
+ Cherry-pick r284169. rdar://problem/84266655
+
+ REGRESSION (r283858): Intense white hover state appears on playback controls on Netflix/YouTube
+ https://bugs.webkit.org/show_bug.cgi?id=231719
+ rdar://84213404
+
+ Reviewed by Tim Horton.
+
+ Source/WebCore:
+
+ The playback controls on Netflix/YouTube are buttons that have a
+ non-'none' appearance value, but a used value of 'none' due to author
+ styles. In WebKit, and other engines, setting a background or text
+ color different from the UA style makes the used value 'none' and
+ drops native appearance.
+
+ The used value (effectiveAppearance) is set to none by comparing the
+ element's style to the UA style in RenderTheme::adjustStyle. However, when
+ style is adjusted during animation, the UA style is not passed in to the
+ method (see r273003). Consequently, we are unable to compare styles and
+ end up setting the 'effectiveAppearance' to 'appearance' (the computed value)
+ after r283858. Since the 'appearance' is not 'none', a native button is
+ briefly displayed during a hover animation, resulting in a white flash.
+
+ This was not an issue before r283858, as that change added logic to
+ always update the effectiveAppearance in RenderTheme::adjustStyle.
+ Before the change, the effectiveAppearance would simply be carried over
+ from the style before animation, and would remain 'none'.
+
+ To fix, only update the effectiveAppearance if its current value is
+ incorrect (auto, or styled). Additionally, use effectiveAppearance
+ more consistently, to ensure we do not incorrectly treat
+ style.appearance() as the used value.
+
+ Test: fast/forms/button-animation-appearance.html
+
+ * rendering/RenderTheme.cpp:
+ (WebCore::RenderTheme::adjustStyle):
+
+ LayoutTests:
+
+ Added a mismatch test to ensure that animating the background color
+ of a button drops native appearance. Verified that the test passes
+ before r283858, on Safari 15, and fails on r283858.
+
+ * fast/forms/button-animation-appearance-expected-mismatch.html: Added.
+ * fast/forms/button-animation-appearance.html: Added.
+
+
+ git-svn-id: https://svn.webkit.org/repository/webkit/trunk@284169 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+ 2021-10-14 Aditya Keerthi <[email protected]>
+
+ REGRESSION (r283858): Intense white hover state appears on playback controls on Netflix/YouTube
+ https://bugs.webkit.org/show_bug.cgi?id=231719
+ rdar://84213404
+
+ Reviewed by Tim Horton.
+
+ The playback controls on Netflix/YouTube are buttons that have a
+ non-'none' appearance value, but a used value of 'none' due to author
+ styles. In WebKit, and other engines, setting a background or text
+ color different from the UA style makes the used value 'none' and
+ drops native appearance.
+
+ The used value (effectiveAppearance) is set to none by comparing the
+ element's style to the UA style in RenderTheme::adjustStyle. However, when
+ style is adjusted during animation, the UA style is not passed in to the
+ method (see r273003). Consequently, we are unable to compare styles and
+ end up setting the 'effectiveAppearance' to 'appearance' (the computed value)
+ after r283858. Since the 'appearance' is not 'none', a native button is
+ briefly displayed during a hover animation, resulting in a white flash.
+
+ This was not an issue before r283858, as that change added logic to
+ always update the effectiveAppearance in RenderTheme::adjustStyle.
+ Before the change, the effectiveAppearance would simply be carried over
+ from the style before animation, and would remain 'none'.
+
+ To fix, only update the effectiveAppearance if its current value is
+ incorrect (auto, or styled). Additionally, use effectiveAppearance
+ more consistently, to ensure we do not incorrectly treat
+ style.appearance() as the used value.
+
+ Test: fast/forms/button-animation-appearance.html
+
+ * rendering/RenderTheme.cpp:
+ (WebCore::RenderTheme::adjustStyle):
+
2021-10-10 Sihui Liu <[email protected]>
Add support for iterating FileSystemDirectoryHandle
Modified: branches/safari-613.1.5-branch/Source/WebCore/rendering/RenderTheme.cpp (284185 => 284186)
--- branches/safari-613.1.5-branch/Source/WebCore/rendering/RenderTheme.cpp 2021-10-14 18:46:14 UTC (rev 284185)
+++ branches/safari-613.1.5-branch/Source/WebCore/rendering/RenderTheme.cpp 2021-10-14 18:46:17 UTC (rev 284186)
@@ -83,13 +83,15 @@
void RenderTheme::adjustStyle(RenderStyle& style, const Element* element, const RenderStyle* userAgentAppearanceStyle)
{
- auto part = style.appearance();
+ auto part = style.effectiveAppearance();
if (part == AutoPart) {
part = autoAppearanceForElement(element);
- if (part == NoControlPart) {
- style.setEffectiveAppearance(NoControlPart);
+
+ ASSERT(part != AutoPart);
+ style.setEffectiveAppearance(part);
+
+ if (part == NoControlPart)
return;
- }
}
// Force inline and table display styles to be inline-block (except for table- which is block)
@@ -110,11 +112,10 @@
part = NoControlPart;
break;
}
+
+ style.setEffectiveAppearance(part);
}
- ASSERT(part != AutoPart);
- style.setEffectiveAppearance(part);
-
if (!style.hasEffectiveAppearance())
return;
