<!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>[177251] 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/177251">177251</a></dd>
<dt>Author</dt> <dd>dino@apple.com</dd>
<dt>Date</dt> <dd>2014-12-12 16:44:32 -0800 (Fri, 12 Dec 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>[Media iOS] Inline video controls have an outlined scrubber
https://bugs.webkit.org/show_bug.cgi?id=139602
<rdar://problem/19184212>
Reviewed by Eric Carlson.
This is another change similar to https://bugs.webkit.org/show_bug.cgi?id=138378
where the specificity of pseduo elements had changed, and thus iOS
was inheriting some of the UA styles.
The fix is to add some more style rules to ensure that the timeline track
is drawn in white.
* Modules/mediacontrols/mediaControlsiOS.css:
(audio::-webkit-media-controls-timeline): Border rules not needed here.
(video::-webkit-media-controls-timeline::-webkit-slider-runnable-track): But are needed
here, along with some other things.
(audio::-webkit-media-controls-timeline::-webkit-slider-thumb): Now that the runnable
track has some style, we need to account for the change.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</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 (177250 => 177251)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2014-12-13 00:42:16 UTC (rev 177250)
+++ trunk/Source/WebCore/ChangeLog 2014-12-13 00:44:32 UTC (rev 177251)
</span><span class="lines">@@ -1,3 +1,25 @@
</span><ins>+2014-12-12 Dean Jackson <dino@apple.com>
+
+ [Media iOS] Inline video controls have an outlined scrubber
+ https://bugs.webkit.org/show_bug.cgi?id=139602
+ <rdar://problem/19184212>
+
+ Reviewed by Eric Carlson.
+
+ This is another change similar to https://bugs.webkit.org/show_bug.cgi?id=138378
+ where the specificity of pseduo elements had changed, and thus iOS
+ was inheriting some of the UA styles.
+
+ The fix is to add some more style rules to ensure that the timeline track
+ is drawn in white.
+
+ * Modules/mediacontrols/mediaControlsiOS.css:
+ (audio::-webkit-media-controls-timeline): Border rules not needed here.
+ (video::-webkit-media-controls-timeline::-webkit-slider-runnable-track): But are needed
+ here, along with some other things.
+ (audio::-webkit-media-controls-timeline::-webkit-slider-thumb): Now that the runnable
+ track has some style, we need to account for the change.
+
</ins><span class="cx"> 2014-12-12 Anders Carlsson <andersca@apple.com>
</span><span class="cx">
</span><span class="cx"> Remove a workaround for a bug that was fixed in Mountain Lion
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsiOScss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css (177250 => 177251)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css 2014-12-13 00:42:16 UTC (rev 177250)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css 2014-12-13 00:44:32 UTC (rev 177251)
</span><span class="lines">@@ -276,26 +276,32 @@
</span><span class="cx"> -webkit-flex: 1 1 0;
</span><span class="cx"> height: 3px;
</span><span class="cx"> margin: 0;
</span><del>-
- border-radius: 1.5px;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-timeline {
</span><span class="cx"> opacity: 0.75;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+video::-webkit-media-controls-timeline::-webkit-slider-runnable-track {
+ height: 3px !important;
+ border-radius: 1.5px !important;
+ background-color: white !important;
+}
+
</ins><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;
</span><ins>+ position: relative;
+ top: -6px;
</ins><span class="cx"> width: 16px;
</span><span class="cx"> height: 16px;
</span><span class="cx"> border-width: 0px !important;
</span><span class="cx"> border-radius: 8px;
</span><del>- background-image: url('data:image/svg+xml,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><circle r="7.75" cy="8" cx="8" fill="white" stroke="rgba(0, 0, 0, .25)" stroke-width=".5"/></svg>');
</del><ins>+ background-image: url('data:image/svg+xml,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><circle r="7.75" cy="8" cx="8" fill="white" stroke="rgba(0, 0, 0, .25)" stroke-width=".5"/></svg>') !important;
</ins><span class="cx"> background-color: transparent !important;
</span><span class="cx"> box-shadow: 0 3px 1px -1px rgba(0, 0, 0, .15);
</span><span class="cx">
</span><del>- /* rotateZ() forces the layer into compositing mode. Slider
</del><ins>+ /* rotateZ() forces the layer into compositing mode. Slider
</ins><span class="cx"> thumbs are small, so forcing a compositing layer is inexpensive,
</span><span class="cx"> and it keeps the slider from having to repaint while sliding. */
</span><span class="cx"> -webkit-transform: rotateZ(0deg);
</span></span></pre>
</div>
</div>
</body>
</html>