Title: [285033] trunk
- Revision
- 285033
- Author
- akeer...@apple.com
- Date
- 2021-10-29 09:46:39 -0700 (Fri, 29 Oct 2021)
Log Message
REGRESSION (r283269) disneyplus.com time remaining bar shows an extra line/bar
https://bugs.webkit.org/show_bug.cgi?id=232461
rdar://84561981
Reviewed by Antti Koivisto.
Source/WebCore:
The "time remaining" bar on disneyplus.com is implemented using a
<progress> element. Some elements, including <progress>, drop their
native appearance depending on which CSS properties are set. For
example, setting a custom background color on a <progress> element
prevents us from drawing the native progress bar. This behavior is
implemented by changing the used value of 'appearance' to 'none'.
Prior to r283269, there was no distinction between the specified and
used value for 'appearance'. The logic to set the used value of
'appearance' to 'none' resulted in the used value being exposed to
the page. In particular, getComputedStyle() returned the used value for
for 'appearance' (rather than the specified value), contrary to the
specification. To fix, r283269 split up the specified value (appearance)
and the used value (effectiveAppearance) into distinct fields in
RenderStyle.
<progress> elements are shadow roots, containing a
'-webkit-progress-inner-element' in their shadow tree. This element has
a '-webkit-appearance: inherit' declaration in the UA stylesheet. The
change in r283269 made it so that the 'none' value obtained as a result
of styling the <progress> is not inherited by
'-webkit-progress-inner-element', as it is not the specified value in
the parent style. Consequently, the '-webkit-progress-inner-element'
has 'appearance: progress-bar', causing a second bar to show up on
disneyplus.com.
To fix, remove the '-webkit-appearance: inherit' declaration for
'-webkit-progress-inner-element' in the UA stylesheet. The declaration
was originally added in r124754, to support the 'AuthorShadowDOM'
feature, but is no longer necessary as it is not possible to attach
a shadow root to <progress> elements. This change ensures that
'-webkit-progress-inner-element' has a specified/used 'appearance: none',
and does not draw an additional progress bar.
Test: fast/dom/HTMLProgressElement/progress-element-styled-drop-appearance.html
* css/html.css:
(progress::-webkit-progress-inner-element):
LayoutTests:
Added a ref test to verify that the native progress bar is not drawn
when a <progress> element has custom styling.
Thanks to Antti Koivisto for the reduction leading to this test case.
* fast/dom/HTMLProgressElement/progress-element-styled-drop-appearance-expected.html: Added.
* fast/dom/HTMLProgressElement/progress-element-styled-drop-appearance.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (285032 => 285033)
--- trunk/LayoutTests/ChangeLog 2021-10-29 16:22:04 UTC (rev 285032)
+++ trunk/LayoutTests/ChangeLog 2021-10-29 16:46:39 UTC (rev 285033)
@@ -1,3 +1,19 @@
+2021-10-29 Aditya Keerthi <akeer...@apple.com>
+
+ REGRESSION (r283269) disneyplus.com time remaining bar shows an extra line/bar
+ https://bugs.webkit.org/show_bug.cgi?id=232461
+ rdar://84561981
+
+ Reviewed by Antti Koivisto.
+
+ Added a ref test to verify that the native progress bar is not drawn
+ when a <progress> element has custom styling.
+
+ Thanks to Antti Koivisto for the reduction leading to this test case.
+
+ * fast/dom/HTMLProgressElement/progress-element-styled-drop-appearance-expected.html: Added.
+ * fast/dom/HTMLProgressElement/progress-element-styled-drop-appearance.html: Added.
+
2021-10-29 Antti Koivisto <an...@apple.com>
Make :-webkit-any() a synonym of :is()
Added: trunk/LayoutTests/fast/dom/HTMLProgressElement/progress-element-styled-drop-appearance-expected.html (0 => 285033)
--- trunk/LayoutTests/fast/dom/HTMLProgressElement/progress-element-styled-drop-appearance-expected.html (rev 0)
+++ trunk/LayoutTests/fast/dom/HTMLProgressElement/progress-element-styled-drop-appearance-expected.html 2021-10-29 16:46:39 UTC (rev 285033)
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+#overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 200px;
+ height: 4px;
+ background-color:red;
+}
+
+</style>
+</head>
+<body>
+ <div id="overlay"></div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/dom/HTMLProgressElement/progress-element-styled-drop-appearance.html (0 => 285033)
--- trunk/LayoutTests/fast/dom/HTMLProgressElement/progress-element-styled-drop-appearance.html (rev 0)
+++ trunk/LayoutTests/fast/dom/HTMLProgressElement/progress-element-styled-drop-appearance.html 2021-10-29 16:46:39 UTC (rev 285033)
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+#overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 200px;
+ height: 4px;
+ background-color:red;
+}
+
+progress {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 200px;
+ height: 4px;
+ background-color:red;
+}
+
+</style>
+</head>
+<body>
+ <progress value="0.5"></progress>
+ <div id="overlay"></div>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (285032 => 285033)
--- trunk/Source/WebCore/ChangeLog 2021-10-29 16:22:04 UTC (rev 285032)
+++ trunk/Source/WebCore/ChangeLog 2021-10-29 16:46:39 UTC (rev 285033)
@@ -1,3 +1,50 @@
+2021-10-29 Aditya Keerthi <akeer...@apple.com>
+
+ REGRESSION (r283269) disneyplus.com time remaining bar shows an extra line/bar
+ https://bugs.webkit.org/show_bug.cgi?id=232461
+ rdar://84561981
+
+ Reviewed by Antti Koivisto.
+
+ The "time remaining" bar on disneyplus.com is implemented using a
+ <progress> element. Some elements, including <progress>, drop their
+ native appearance depending on which CSS properties are set. For
+ example, setting a custom background color on a <progress> element
+ prevents us from drawing the native progress bar. This behavior is
+ implemented by changing the used value of 'appearance' to 'none'.
+
+ Prior to r283269, there was no distinction between the specified and
+ used value for 'appearance'. The logic to set the used value of
+ 'appearance' to 'none' resulted in the used value being exposed to
+ the page. In particular, getComputedStyle() returned the used value for
+ for 'appearance' (rather than the specified value), contrary to the
+ specification. To fix, r283269 split up the specified value (appearance)
+ and the used value (effectiveAppearance) into distinct fields in
+ RenderStyle.
+
+ <progress> elements are shadow roots, containing a
+ '-webkit-progress-inner-element' in their shadow tree. This element has
+ a '-webkit-appearance: inherit' declaration in the UA stylesheet. The
+ change in r283269 made it so that the 'none' value obtained as a result
+ of styling the <progress> is not inherited by
+ '-webkit-progress-inner-element', as it is not the specified value in
+ the parent style. Consequently, the '-webkit-progress-inner-element'
+ has 'appearance: progress-bar', causing a second bar to show up on
+ disneyplus.com.
+
+ To fix, remove the '-webkit-appearance: inherit' declaration for
+ '-webkit-progress-inner-element' in the UA stylesheet. The declaration
+ was originally added in r124754, to support the 'AuthorShadowDOM'
+ feature, but is no longer necessary as it is not possible to attach
+ a shadow root to <progress> elements. This change ensures that
+ '-webkit-progress-inner-element' has a specified/used 'appearance: none',
+ and does not draw an additional progress bar.
+
+ Test: fast/dom/HTMLProgressElement/progress-element-styled-drop-appearance.html
+
+ * css/html.css:
+ (progress::-webkit-progress-inner-element):
+
2021-10-29 Antti Koivisto <an...@apple.com>
Make :-webkit-any() a synonym of :is()
Modified: trunk/Source/WebCore/css/html.css (285032 => 285033)
--- trunk/Source/WebCore/css/html.css 2021-10-29 16:22:04 UTC (rev 285032)
+++ trunk/Source/WebCore/css/html.css 2021-10-29 16:46:39 UTC (rev 285033)
@@ -1177,7 +1177,6 @@
}
progress::-webkit-progress-inner-element {
- -webkit-appearance: inherit;
box-sizing: inherit;
height: 100%;
width: 100%;
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
