Skip to content
Permalink
Browse files
Replace uses of -webkit-gradient with standard linear-gradient.
https://bugs.webkit.org/show_bug.cgi?id=241066
rdar://94390714

Patch by Ryan Reno <rreno@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
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@295421 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
rreno authored and webkit-commit-queue committed Jun 9, 2022
1 parent 98be1ea commit 321d351b4f829293aa94cdfd5cb2030e182f81f8
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 18 deletions.
@@ -6,7 +6,7 @@ Both meter elements should have a nested shadow box with a width specified:
| 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; }"
| "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 @@ Both meter elements should have a nested shadow box with a width specified:
| 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; }"
| "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 @@ Both meter elements should have a nested shadow box with a width specified:
| 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; }"
| "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"
@@ -81,7 +81,7 @@ audio::-webkit-media-controls-panel {
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 @@ audio::-webkit-media-controls-panel .volume-box {
-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 @@ video::-webkit-media-controls-volume-slider {

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 @@ audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
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::-webkit-slide
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 @@ video:-webkit-full-screen::-webkit-media-controls-panel {
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-panel .volume-box {
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;
@@ -8,7 +8,7 @@ div#inner {
}

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 {
}

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;
}

0 comments on commit 321d351

Please sign in to comment.