<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[186543] trunk/Source/WebCore</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/186543">186543</a></dd>
<dt>Author</dt> <dd>dino@apple.com</dd>
<dt>Date</dt> <dd>2015-07-08 17:11:35 -0700 (Wed, 08 Jul 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Audio elements with controls force their enclosing stacking context to composite
https://bugs.webkit.org/show_bug.cgi?id=146751
<rdar://problem/21466572>
Reviewed by Simon Fraser.
There were a number of issues with audio controls, on both iOS and OS X.
- they used a blurry background which was not the intended design
- they cause the page to composite, which causes a degradation in
text rendering quality
- they inserted 20px of padding above every audio element, which
could break existing page designs.
Removing the need for compositing and blending means that the
colors used for control tints need to be adjusted for the non-blended
case. Wherever I could, I kept as much as possible in a shared
rule and made specific changes for audio or video.
The controls were also unintentionally relying on the compositing
to create stacking contexts and control the rendering order. Without
them, I needed to add some explicit stacking.
I also made some drive-by whitespace clean-ups.
* Modules/mediacontrols/mediaControlsApple.css: Remove as much compositing
as possible in audio controls.
* Modules/mediacontrols/mediaControlsApple.js:
(Controller.prototype.drawTimelineBackground): Use specific colors for audio.
* Modules/mediacontrols/mediaControlsiOS.css: Remove as much need for compositing
as possible.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsApplecss">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsiOScss">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (186542 => 186543)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2015-07-09 00:04:24 UTC (rev 186542)
+++ trunk/Source/WebCore/ChangeLog 2015-07-09 00:11:35 UTC (rev 186543)
</span><span class="lines">@@ -1,3 +1,39 @@
</span><ins>+2015-07-08 Dean Jackson <dino@apple.com>
+
+ Audio elements with controls force their enclosing stacking context to composite
+ https://bugs.webkit.org/show_bug.cgi?id=146751
+ <rdar://problem/21466572>
+
+ Reviewed by Simon Fraser.
+
+ There were a number of issues with audio controls, on both iOS and OS X.
+
+ - they used a blurry background which was not the intended design
+ - they cause the page to composite, which causes a degradation in
+ text rendering quality
+ - they inserted 20px of padding above every audio element, which
+ could break existing page designs.
+
+ Removing the need for compositing and blending means that the
+ colors used for control tints need to be adjusted for the non-blended
+ case. Wherever I could, I kept as much as possible in a shared
+ rule and made specific changes for audio or video.
+
+ The controls were also unintentionally relying on the compositing
+ to create stacking contexts and control the rendering order. Without
+ them, I needed to add some explicit stacking.
+
+ I also made some drive-by whitespace clean-ups.
+
+ * Modules/mediacontrols/mediaControlsApple.css: Remove as much compositing
+ as possible in audio controls.
+
+ * Modules/mediacontrols/mediaControlsApple.js:
+ (Controller.prototype.drawTimelineBackground): Use specific colors for audio.
+
+ * Modules/mediacontrols/mediaControlsiOS.css: Remove as much need for compositing
+ as possible.
+
</ins><span class="cx"> 2015-07-08 Said Abou-Hallawa <sabouhallawa@apple.com>
</span><span class="cx">
</span><span class="cx"> Crash when appending an SVG <use> element dynamically which has animated SVG <path> element
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (186542 => 186543)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2015-07-09 00:04:24 UTC (rev 186542)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2015-07-09 00:11:35 UTC (rev 186543)
</span><span class="lines">@@ -73,13 +73,12 @@
</span><span class="cx"> position: relative;
</span><span class="cx"> bottom: 0;
</span><span class="cx"> width: 100%;
</span><del>- min-height: 45px;
- height: 45px;
</del><ins>+ min-height: 25px;
+ height: 25px;
</ins><span class="cx"> line-height: 25px;
</span><span class="cx"> -webkit-user-select: none;
</span><span class="cx"> -webkit-user-drag: element;
</span><span class="cx"> background-color: transparent;
</span><del>- padding-top: 20px;
</del><span class="cx">
</span><span class="cx"> display: -webkit-flex;
</span><span class="cx"> -webkit-flex-direction: row;
</span><span class="lines">@@ -93,6 +92,9 @@
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-panel {
</span><span class="cx"> opacity: 0;
</span><ins>+ padding-top: 20px;
+ min-height: 45px;
+ height: 45px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-panel.show,
</span><span class="lines">@@ -108,21 +110,28 @@
</span><span class="cx"> left: 0;
</span><span class="cx"> top: 0;
</span><span class="cx"> width: 100%;
</span><ins>+}
+
+video::-webkit-media-controls-panel-background-container {
+ z-index: 0;
+}
+
+video::-webkit-media-controls-panel-background-container {
</ins><span class="cx"> min-height: 45px;
</span><span class="cx"> height: 45px;
</span><span class="cx"> -webkit-clip-path: inset(20px 0px 0px 0px);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-audio::-webkit-media-controls-panel-background-container {
- background-color: black;
-}
-
</del><span class="cx"> video::-webkit-media-controls-panel-tint,
</span><span class="cx"> audio::-webkit-media-controls-panel-tint {
</span><span class="cx"> position: absolute;
</span><span class="cx"> left: 0;
</span><span class="cx"> top: 0;
</span><span class="cx"> width: 100%;
</span><ins>+ background-color: transparent;
+}
+
+video::-webkit-media-controls-panel-tint {
</ins><span class="cx"> min-height: 45px;
</span><span class="cx"> height: 45px;
</span><span class="cx"> background-color: rgb(41, 41, 41);
</span><span class="lines">@@ -135,6 +144,12 @@
</span><span class="cx"> left: 0;
</span><span class="cx"> top: 0;
</span><span class="cx"> width: 100%;
</span><ins>+ min-height: 25px;
+ height: 25px;
+ background-color: rgb(41, 41, 41);
+}
+
+video::-webkit-media-controls-panel-background {
</ins><span class="cx"> min-height: 45px;
</span><span class="cx"> height: 45px;
</span><span class="cx"> background-color: rgba(30, 30, 30, 0.45);
</span><span class="lines">@@ -153,8 +168,15 @@
</span><span class="cx"> background-origin: content-box;
</span><span class="cx"> background-repeat: no-repeat;
</span><span class="cx"> background-position: center;
</span><ins>+}
+
+audio::-webkit-media-controls-panel button {
+ z-index: 0;
+}
+
+video::-webkit-media-controls-panel button {
+ mix-blend-mode: plus-lighter;
</ins><span class="cx"> -webkit-transform: translateZ(0);
</span><del>- mix-blend-mode: plus-lighter;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-panel button:focus,
</span><span class="lines">@@ -217,7 +239,7 @@
</span><span class="cx"> width: 63px;
</span><span class="cx"> bottom: 5px;
</span><span class="cx"> left: -25px;
</span><del>-
</del><ins>+
</ins><span class="cx"> -webkit-clip-path: inset(20px 20px 20px 20px round 4px 4px 0px 0px);
</span><span class="cx"> background-color: transparent;
</span><span class="cx"> overflow: hidden;
</span><span class="lines">@@ -247,6 +269,10 @@
</span><span class="cx"> border-bottom-right-radius: 4px;
</span><span class="cx"> border-top-right-radius: 4px;
</span><span class="cx"> background-color: rgba(30, 30, 30, 0.45);
</span><ins>+}
+
+video::-webkit-media-controls-volume-slider-container-background {
+ background-color: rgba(30, 30, 30, 0.45);
</ins><span class="cx"> -webkit-backdrop-filter: saturate(180%) blur(20px);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -260,6 +286,9 @@
</span><span class="cx"> border-bottom-right-radius: 4px;
</span><span class="cx"> border-top-right-radius: 4px;
</span><span class="cx"> background-color: rgb(41, 41, 41);
</span><ins>+}
+
+video::-webkit-media-controls-volume-slider-container-tint {
</ins><span class="cx"> mix-blend-mode: lighten;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -290,6 +319,9 @@
</span><span class="cx"> background-repeat: no-repeat;
</span><span class="cx"> -webkit-transform-origin: 0 0;
</span><span class="cx"> -webkit-transform: rotate(-90deg) translateY(28px) translateX(-40px);
</span><ins>+}
+
+video::-webkit-media-controls-volume-slider {
</ins><span class="cx"> mix-blend-mode: plus-lighter;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -447,9 +479,8 @@
</span><span class="cx"> audio::-webkit-media-controls-status-display {
</span><span class="cx"> cursor: default;
</span><span class="cx"> overflow: hidden;
</span><del>- color: white;
- opacity: .45;
- mix-blend-mode: plus-lighter;
</del><ins>+ color: rgb(156, 156, 156);
+ opacity: 0.99;
</ins><span class="cx">
</span><span class="cx"> letter-spacing: normal;
</span><span class="cx"> word-spacing: normal;
</span><span class="lines">@@ -463,6 +494,13 @@
</span><span class="cx">
</span><span class="cx"> -webkit-flex: 1 1 0;
</span><span class="cx"> }
</span><ins>+
+video::-webkit-media-controls-status-display {
+ color: white;
+ opacity: .45;
+ mix-blend-mode: plus-lighter;
+}
+
</ins><span class="cx"> video::-webkit-media-controls-timeline,
</span><span class="cx"> audio::-webkit-media-controls-timeline {
</span><span class="cx"> -webkit-appearance: none !important;
</span><span class="lines">@@ -472,16 +510,19 @@
</span><span class="cx"> background-size: 100% 100% !important;
</span><span class="cx"> background-repeat: no-repeat;
</span><span class="cx"> background-color: transparent;
</span><ins>+}
+
+video::-webkit-media-controls-timeline {
</ins><span class="cx"> mix-blend-mode: plus-lighter;
</span><ins>+}
</ins><span class="cx">
</span><del>-}
</del><span class="cx"> video::-webkit-media-controls-timeline::-webkit-slider-thumb,
</span><span class="cx"> audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
</span><span class="cx"> -webkit-appearance: none !important;
</span><del>- width:3px !important;
</del><ins>+ width: 3px !important;
</ins><span class="cx"> height: 15px !important;
</span><span class="cx"> }
</span><del>-
</del><ins>+
</ins><span class="cx"> video::-webkit-media-controls-current-time-display,
</span><span class="cx"> video::-webkit-media-controls-time-remaining-display,
</span><span class="cx"> audio::-webkit-media-controls-current-time-display,
</span><span class="lines">@@ -490,10 +531,8 @@
</span><span class="cx"> -webkit-flex: 0 0 0;
</span><span class="cx"> display: -webkit-flex;
</span><span class="cx"> cursor: default;
</span><del>- overflow-y: hidden;
- overflow-x: hidden;
- color: white;
- opacity: .45;
</del><ins>+ overflow: hidden;
+ color: rgb(156, 156, 156);
</ins><span class="cx"> letter-spacing: normal;
</span><span class="cx"> word-spacing: normal;
</span><span class="cx"> line-height: normal;
</span><span class="lines">@@ -503,7 +542,13 @@
</span><span class="cx"> position: relative;
</span><span class="cx"> bottom: 0.5px;
</span><span class="cx"> font-family: -apple-system-monospaced-numbers;
</span><del>- -webkit-text-size-adjust:none;
</del><ins>+ -webkit-text-size-adjust: none;
+}
+
+video::-webkit-media-controls-current-time-display,
+video::-webkit-media-controls-time-remaining-display {
+ color: white;
+ opacity: .45;
</ins><span class="cx"> mix-blend-mode: plus-lighter;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -702,7 +747,7 @@
</span><span class="cx">
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-play-button {
</span><span class="cx"> position: absolute;
</span><del>-
</del><ins>+
</ins><span class="cx"> background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23" fill="rgba(255,255,255,0.45)"><path d="M 0,0 0,22 8,22 8,0 z"/><path d="M 13,0 13,22 21,22 21,0 z"/></svg>');
</span><span class="cx">
</span><span class="cx"> width: 21px;
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (186542 => 186543)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-07-09 00:04:24 UTC (rev 186542)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-07-09 00:11:35 UTC (rev 186543)
</span><span class="lines">@@ -1183,7 +1183,7 @@
</span><span class="cx"> var dpr = window.devicePixelRatio;
</span><span class="cx"> var width = this.timelineWidth * dpr;
</span><span class="cx"> var height = this.timelineHeight * dpr;
</span><del>-
</del><ins>+
</ins><span class="cx"> if (!width || !height)
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="lines">@@ -1191,31 +1191,34 @@
</span><span class="cx"> var buffered = 0;
</span><span class="cx"> for (var i = 0, end = this.video.buffered.length; i < end; ++i)
</span><span class="cx"> buffered = Math.max(this.video.buffered.end(i), buffered);
</span><del>-
</del><ins>+
</ins><span class="cx"> buffered /= this.video.duration;
</span><del>-
</del><ins>+
</ins><span class="cx"> var ctx = document.getCSSCanvasContext('2d', this.timelineContextName, width, height);
</span><del>-
</del><ins>+
</ins><span class="cx"> width /= dpr;
</span><span class="cx"> height /= dpr;
</span><del>-
</del><ins>+
</ins><span class="cx"> ctx.save();
</span><span class="cx"> ctx.scale(dpr, dpr);
</span><span class="cx"> ctx.clearRect(0, 0, width, height);
</span><del>-
</del><ins>+
</ins><span class="cx"> var timelineHeight = 3;
</span><span class="cx"> var trackHeight = 1;
</span><span class="cx"> var scrubberWidth = 3;
</span><span class="cx"> var scrubberHeight = 15;
</span><span class="cx"> var borderSize = 2;
</span><span class="cx"> var scrubberPosition = Math.max(0, Math.min(width - scrubberWidth, Math.round(width * played)));
</span><del>-
</del><ins>+
</ins><span class="cx"> // Draw buffered section.
</span><span class="cx"> ctx.save();
</span><del>- ctx.fillStyle = "rgb(30, 30, 30)";
</del><ins>+ if (this.isAudio())
+ ctx.fillStyle = "rgb(71, 71, 71)";
+ else
+ ctx.fillStyle = "rgb(30, 30, 30)";
</ins><span class="cx"> ctx.fillRect(1, 8, Math.round(width * buffered) - borderSize, trackHeight);
</span><span class="cx"> ctx.restore();
</span><del>-
</del><ins>+
</ins><span class="cx"> // Draw timeline border.
</span><span class="cx"> ctx.save();
</span><span class="cx"> ctx.beginPath();
</span><span class="lines">@@ -1223,20 +1226,26 @@
</span><span class="cx"> this.addRoundedRect(ctx, scrubberPosition + 1, 8, width - scrubberPosition - borderSize , trackHeight, trackHeight / 2.0);
</span><span class="cx"> ctx.closePath();
</span><span class="cx"> ctx.clip("evenodd");
</span><del>- ctx.fillStyle = "rgb(30, 30, 30)";
</del><ins>+ if (this.isAudio())
+ ctx.fillStyle = "rgb(71, 71, 71)";
+ else
+ ctx.fillStyle = "rgb(30, 30, 30)";
</ins><span class="cx"> ctx.fillRect(0, 0, width, height);
</span><span class="cx"> ctx.restore();
</span><del>-
</del><ins>+
</ins><span class="cx"> // Draw played section.
</span><del>- ctx.save();
</del><ins>+ ctx.save();
</ins><span class="cx"> ctx.beginPath();
</span><span class="cx"> this.addRoundedRect(ctx, 0, 7, width, timelineHeight, timelineHeight / 2.0);
</span><span class="cx"> ctx.closePath();
</span><span class="cx"> ctx.clip();
</span><del>- ctx.fillStyle = "rgb(75, 75, 75)";
</del><ins>+ if (this.isAudio())
+ ctx.fillStyle = "rgb(116, 116, 116)";
+ else
+ ctx.fillStyle = "rgb(75, 75, 75)";
</ins><span class="cx"> ctx.fillRect(0, 0, width * played, height);
</span><span class="cx"> ctx.restore();
</span><del>-
</del><ins>+
</ins><span class="cx"> // Draw the scrubber.
</span><span class="cx"> ctx.save();
</span><span class="cx"> ctx.clearRect(scrubberPosition - 1, 0, scrubberWidth + borderSize, height, 0);
</span><span class="lines">@@ -1244,10 +1253,13 @@
</span><span class="cx"> this.addRoundedRect(ctx, scrubberPosition, 1, scrubberWidth, scrubberHeight, 1);
</span><span class="cx"> ctx.closePath();
</span><span class="cx"> ctx.clip();
</span><del>- ctx.fillStyle = "rgb(140, 140, 140)";
</del><ins>+ if (this.isAudio())
+ ctx.fillStyle = "rgb(181, 181, 181)";
+ else
+ ctx.fillStyle = "rgb(140, 140, 140)";
</ins><span class="cx"> ctx.fillRect(0, 0, width, height);
</span><span class="cx"> ctx.restore();
</span><del>-
</del><ins>+
</ins><span class="cx"> ctx.restore();
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -1258,26 +1270,26 @@
</span><span class="cx">
</span><span class="cx"> if (!width || !height)
</span><span class="cx"> return;
</span><del>-
</del><ins>+
</ins><span class="cx"> var ctx = document.getCSSCanvasContext('2d', this.volumeContextName, width, height);
</span><del>-
</del><ins>+
</ins><span class="cx"> width /= dpr;
</span><span class="cx"> height /= dpr;
</span><del>-
</del><ins>+
</ins><span class="cx"> ctx.save();
</span><span class="cx"> ctx.scale(dpr, dpr);
</span><span class="cx"> ctx.clearRect(0, 0, width, height);
</span><del>-
</del><ins>+
</ins><span class="cx"> var seekerPosition = this.controls.volume.value;
</span><span class="cx"> var trackHeight = 1;
</span><span class="cx"> var timelineHeight = 3;
</span><span class="cx"> var scrubberRadius = 3.5;
</span><span class="cx"> var scrubberDiameter = 2 * scrubberRadius;
</span><span class="cx"> var borderSize = 2;
</span><del>-
</del><ins>+
</ins><span class="cx"> var scrubberPosition = Math.round(seekerPosition * (width - scrubberDiameter - borderSize));
</span><del>-
</del><span class="cx">
</span><ins>+
</ins><span class="cx"> // Draw portion of volume under slider thumb.
</span><span class="cx"> ctx.save();
</span><span class="cx"> ctx.beginPath();
</span><span class="lines">@@ -1287,7 +1299,7 @@
</span><span class="cx"> ctx.fillStyle = "rgb(75, 75, 75)";
</span><span class="cx"> ctx.fillRect(0, 0, width, height);
</span><span class="cx"> ctx.restore();
</span><del>-
</del><ins>+
</ins><span class="cx"> // Draw portion of volume above slider thumb.
</span><span class="cx"> ctx.save();
</span><span class="cx"> ctx.beginPath();
</span><span class="lines">@@ -1297,7 +1309,7 @@
</span><span class="cx"> ctx.fillStyle = "rgb(30, 30, 30)";
</span><span class="cx"> ctx.fillRect(0, 0, width, height);
</span><span class="cx"> ctx.restore();
</span><del>-
</del><ins>+
</ins><span class="cx"> // Clear a hole in the slider for the scrubber.
</span><span class="cx"> ctx.save();
</span><span class="cx"> ctx.beginPath();
</span><span class="lines">@@ -1306,7 +1318,7 @@
</span><span class="cx"> ctx.clip();
</span><span class="cx"> ctx.clearRect(0, 0, width, height);
</span><span class="cx"> ctx.restore();
</span><del>-
</del><ins>+
</ins><span class="cx"> // Draw scrubber.
</span><span class="cx"> ctx.save();
</span><span class="cx"> ctx.beginPath();
</span><span class="lines">@@ -1319,10 +1331,10 @@
</span><span class="cx"> ctx.fillStyle = "rgb(140, 140, 140)";
</span><span class="cx"> ctx.fillRect(0, 0, width, height);
</span><span class="cx"> ctx.restore();
</span><del>-
</del><ins>+
</ins><span class="cx"> ctx.restore();
</span><span class="cx"> },
</span><del>-
</del><ins>+
</ins><span class="cx"> formatTime: function(time)
</span><span class="cx"> {
</span><span class="cx"> if (isNaN(time))
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsiOScss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css (186542 => 186543)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css 2015-07-09 00:04:24 UTC (rev 186542)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css 2015-07-09 00:11:35 UTC (rev 186543)
</span><span class="lines">@@ -104,7 +104,6 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> audio::-webkit-media-controls-panel-container {
</span><del>- -webkit-transform: translateZ(0);
</del><span class="cx"> width: 100%;
</span><span class="cx"> direction: ltr;
</span><span class="cx"> height: 39px;
</span><span class="lines">@@ -246,8 +245,8 @@
</span><span class="cx"> audio::-webkit-media-controls-play-button,
</span><span class="cx"> video::-webkit-media-controls-fullscreen-button,
</span><span class="cx"> audio::-webkit-media-controls-fullscreen-button,
</span><ins>+video::-webkit-media-controls-wireless-playback-picker-button,
</ins><span class="cx"> audio::-webkit-media-controls-wireless-playback-picker-button,
</span><del>-video::-webkit-media-controls-wireless-playback-picker-button,
</del><span class="cx"> video::-webkit-media-controls-picture-in-picture-button,
</span><span class="cx"> audio::-webkit-media-controls-picture-in-picture-button {
</span><span class="cx"> -webkit-appearance: none;
</span><span class="lines">@@ -259,7 +258,6 @@
</span><span class="cx"> background-position: 50% 50%;
</span><span class="cx"> mix-blend-mode: plus-darker;
</span><span class="cx"> opacity: 0.55;
</span><del>- -webkit-transform: translate3d(0, 0, 0);
</del><span class="cx"> -webkit-mask-position: 50% 50%;
</span><span class="cx"> -webkit-mask-repeat: no-repeat;
</span><span class="cx"> -webkit-mask-origin: border-box;
</span><span class="lines">@@ -267,6 +265,13 @@
</span><span class="cx"> transition: background-color 250ms;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+video::-webkit-media-controls-play-button,
+video::-webkit-media-controls-fullscreen-button,
+video::-webkit-media-controls-wireless-playback-picker-button,
+video::-webkit-media-controls-picture-in-picture-button {
+ -webkit-transform: translate3d(0, 0, 0);
+}
+
</ins><span class="cx"> video::-webkit-media-controls-play-button:active,
</span><span class="cx"> audio::-webkit-media-controls-play-button:active,
</span><span class="cx"> video::-webkit-media-controls-fullscreen-button:active,
</span><span class="lines">@@ -382,10 +387,10 @@
</span><span class="cx"> border: none !important;
</span><span class="cx"> border-radius: 0 !important;
</span><span class="cx"> box-sizing: content-box !important;
</span><del>- -webkit-transform: translate3d(0, 0, 0);
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-timeline {
</span><ins>+ -webkit-transform: translate3d(0, 0, 0);
</ins><span class="cx"> mix-blend-mode: plus-darker;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>