[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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@177251 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index f3e0f08..d6b6558 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,25 @@
+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.
+
 2014-12-12  Anders Carlsson  <andersca@apple.com>
 
         Remove a workaround for a bug that was fixed in Mountain Lion

diff --git a/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css b/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css
index 7829ce0..b4d1a31 100644 (file)
--- a/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css
+++ b/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css
@@ -276,26 +276,32 @@ audio::-webkit-media-controls-timeline {
     -webkit-flex: 1 1 0;
     height: 3px;
     margin: 0;
-
-    border-radius: 1.5px;
 }
 
 video::-webkit-media-controls-timeline {
     opacity: 0.75;
 }
 
+video::-webkit-media-controls-timeline::-webkit-slider-runnable-track {
+  height: 3px !important;
+  border-radius: 1.5px !important;
+  background-color: white !important;
+}
+
 video::-webkit-media-controls-timeline::-webkit-slider-thumb,
 audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
     -webkit-appearance: none;
+    position: relative;
+    top: -6px;
     width: 16px;
     height: 16px;
     border-width: 0px !important;
     border-radius: 8px;
-    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>');
+    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;
     background-color: transparent !important;
     box-shadow: 0 3px 1px -1px rgba(0, 0, 0, .15);
 
-    /* rotateZ() forces the layer into compositing mode. Slider 
+    /* rotateZ() forces the layer into compositing mode. Slider
        thumbs are small, so forcing a compositing layer is inexpensive,
        and it keeps the slider from having to repaint while sliding. */
     -webkit-transform: rotateZ(0deg);