[webkit-changes] [295421] trunk

Thu, 09 Jun 2022 08:59:00 -0700

Title: [295421] trunk
Revision
295421
Author
commit-qu...@webkit.org
Date
2022-06-09 08:58:02 -0700 (Thu, 09 Jun 2022)

Log Message

Replace uses of -webkit-gradient with standard linear-gradient.
https://bugs.webkit.org/show_bug.cgi?id=241066
rdar://94390714

Patch by Ryan Reno <rr...@apple.com> on 2022-06-09
Reviewed by Tim Nguyen.

Replace uses of the -webkit-gradient extension with the standardized
linear-gradient in internal CSS. This doesn't change functionality and
is covered by existing tests of the linear-gradient CSS function.

* Source/WebCore/Modules/mediacontrols/mediaControlsBase.css:
(video::-webkit-media-controls-panel,):
(video::-webkit-media-controls-panel .volume-box,):
(audio::-webkit-media-controls-volume-slider,):
(video::-webkit-media-controls-volume-slider::-webkit-slider-thumb,):
(video::-webkit-media-controls-volume-slider::-webkit-slider-thumb::-webkit-slider-thumb:active,):
(video:-webkit-full-screen::-webkit-media-controls-panel):
(video:-webkit-full-screen::-webkit-media-controls-volume-slider):
* Source/WebCore/html/shadow/meterElementShadow.css:
(div#bar):
(div#value.optimum):
(div#value.suboptimum):
(div#value.even-less-good):
* LayoutTests/fast/dom/HTMLMeterElement/meter-element-markup-expected.txt:

Canonical link: https://commits.webkit.org/251427@main

Modified Paths

Diff

Modified: trunk/LayoutTests/fast/dom/HTMLMeterElement/meter-element-markup-expected.txt (295420 => 295421)


--- trunk/LayoutTests/fast/dom/HTMLMeterElement/meter-element-markup-expected.txt	2022-06-09 15:07:15 UTC (rev 295420)
+++ trunk/LayoutTests/fast/dom/HTMLMeterElement/meter-element-markup-expected.txt	2022-06-09 15:58:02 UTC (rev 295421)
@@ -6,7 +6,7 @@
 |   value="70"
 |   <shadow:root>
 |     <style>
-|       "div#inner { appearance: inherit; box-sizing: inherit; height: 100%; width: 100%; } div#bar { background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc)); height: 100%; width: 100%; box-sizing: border-box; } div#value { height: 100%; box-sizing: border-box; } div#value.optimum { background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3)); } div#value.suboptimum { background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3)); height: 100%; box-sizing: border-box; } div#value.even-less-good { background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44)); height: 100%; box-sizing: border-box; }&q
 uot;
+|       "div#inner { appearance: inherit; box-sizing: inherit; height: 100%; width: 100%; } div#bar { background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd); height: 100%; width: 100%; box-sizing: border-box; } div#value { height: 100%; box-sizing: border-box; } div#value.optimum { background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7); } div#value.suboptimum { background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7); height: 100%; box-sizing: border-box; } div#value.even-less-good { background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77); height: 100%; box-sizing: border-box; }"
 |     <div>
 |       id="inner"
 |       pseudo="-webkit-meter-inner-element"
@@ -31,7 +31,7 @@
 |   value="10"
 |   <shadow:root>
 |     <style>
-|       "div#inner { appearance: inherit; box-sizing: inherit; height: 100%; width: 100%; } div#bar { background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc)); height: 100%; width: 100%; box-sizing: border-box; } div#value { height: 100%; box-sizing: border-box; } div#value.optimum { background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3)); } div#value.suboptimum { background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3)); height: 100%; box-sizing: border-box; } div#value.even-less-good { background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44)); height: 100%; box-sizing: border-box; }&q
 uot;
+|       "div#inner { appearance: inherit; box-sizing: inherit; height: 100%; width: 100%; } div#bar { background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd); height: 100%; width: 100%; box-sizing: border-box; } div#value { height: 100%; box-sizing: border-box; } div#value.optimum { background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7); } div#value.suboptimum { background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7); height: 100%; box-sizing: border-box; } div#value.even-less-good { background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77); height: 100%; box-sizing: border-box; }"
 |     <div>
 |       id="inner"
 |       pseudo="-webkit-meter-inner-element"
@@ -56,7 +56,7 @@
 |   value="10"
 |   <shadow:root>
 |     <style>
-|       "div#inner { appearance: inherit; box-sizing: inherit; height: 100%; width: 100%; } div#bar { background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc)); height: 100%; width: 100%; box-sizing: border-box; } div#value { height: 100%; box-sizing: border-box; } div#value.optimum { background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3)); } div#value.suboptimum { background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3)); height: 100%; box-sizing: border-box; } div#value.even-less-good { background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44)); height: 100%; box-sizing: border-box; }&q
 uot;
+|       "div#inner { appearance: inherit; box-sizing: inherit; height: 100%; width: 100%; } div#bar { background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd); height: 100%; width: 100%; box-sizing: border-box; } div#value { height: 100%; box-sizing: border-box; } div#value.optimum { background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7); } div#value.suboptimum { background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7); height: 100%; box-sizing: border-box; } div#value.even-less-good { background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77); height: 100%; box-sizing: border-box; }"
 |     <div>
 |       id="inner"
 |       pseudo="-webkit-meter-inner-element"

Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsBase.css (295420 => 295421)


--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsBase.css	2022-06-09 15:07:15 UTC (rev 295420)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsBase.css	2022-06-09 15:58:02 UTC (rev 295421)
@@ -81,7 +81,7 @@
     line-height: 25px;
     user-select: none;
     background-color: transparent;
-    background-image: -webkit-linear-gradient(top,
+    background-image: linear-gradient(to bottom,
         rgba(0,  0,  0,  .92) 0,
         rgba(0,  0,  0,  .92) 1px,
         rgba(89, 89, 89, .92) 1px,
@@ -191,8 +191,8 @@
     -webkit-transform-origin: 11px 11px;
 
     background-color: transparent;
-    background-image: -webkit-linear-gradient(
-        left,
+    background-image: linear-gradient(
+        to right,
         rgba(17, 17, 17,  0.92),
         rgba(42, 42, 42, 0.92)
     );
@@ -233,8 +233,8 @@
 
     border-radius: 5px !important;
     background-color: transparent !important;
-    background-image: -webkit-linear-gradient(
-        top,
+    background-image: linear-gradient(
+        to bottom,
         rgba(15, 15, 15, .85) 0,
         rgba(23, 23, 23, .85) 50%,
         rgba(15, 15, 15, .85) 100%
@@ -254,8 +254,8 @@
     Slider thumbs are small, so forcing a compositing layer is inexpensive,
        and it keeps the slider from having to repaint while sliding. */
     transform: rotateZ(0) !important;
-    background-image: -webkit-linear-gradient(
-        left,
+    background-image: linear-gradient(
+        to right,
         rgba(99, 99, 99, 1),
         rgba(144, 144, 144, 1)
     ) !important;
@@ -265,8 +265,8 @@
 video::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb,
 audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb::-webkit-slider-thumb:active,
 audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb {
-    background-image: -webkit-linear-gradient(
-        right top,
+    background-image: linear-gradient(
+        to bottom left,
         rgba(160, 160, 160, 1),
         rgba(221, 221, 221, 1)
     ) !important;
@@ -557,7 +557,7 @@
     margin: 0 auto 50px auto !important;
     padding-top: 10px !important;
 
-    background: -webkit-linear-gradient(top,
+    background: linear-gradient(to bottom,
         rgba(45, 45, 45, .97) 0,
         rgba(30, 30, 30, .97) 19px,
         rgba(25, 25, 25, .97) 19px,
@@ -598,7 +598,7 @@
 video:-webkit-full-screen::-webkit-media-controls-volume-slider {
     height: 6px !important;
     border-radius: 3px !important;
-    background-image: -webkit-linear-gradient(top,
+    background-image: linear-gradient(to bottom,
         rgba(16, 16, 16, .300) 0,
         rgba(9,  9,  9,  .629) 100%
     ) !important;

Modified: trunk/Source/WebCore/html/shadow/meterElementShadow.css (295420 => 295421)


--- trunk/Source/WebCore/html/shadow/meterElementShadow.css	2022-06-09 15:07:15 UTC (rev 295420)
+++ trunk/Source/WebCore/html/shadow/meterElementShadow.css	2022-06-09 15:58:02 UTC (rev 295421)
@@ -8,7 +8,7 @@
 }
 
 div#bar {
-    background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc));
+    background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd);
     height: 100%;
     width: 100%;
     box-sizing: border-box;
@@ -20,17 +20,17 @@
 }
 
 div#value.optimum {
-    background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3));
+    background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7);
 }
 
 div#value.suboptimum {
-    background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3));
+    background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7);
     height: 100%;
     box-sizing: border-box;
 }
 
 div#value.even-less-good {
-    background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44));
+    background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77);
     height: 100%;
     box-sizing: border-box;
 }

_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to