<!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>[175715] trunk</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/175715">175715</a></dd>
<dt>Author</dt> <dd>benjamin@webkit.org</dd>
<dt>Date</dt> <dd>2014-11-06 14:07:19 -0800 (Thu, 06 Nov 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Give pseudo elements the correct specificity
https://bugs.webkit.org/show_bug.cgi?id=138378
Patch by Benjamin Poulain <bpoulain@apple.com> on 2014-11-06
Reviewed by Dean Jackson.
Source/WebCore:
WebKit had an old silly bug where pseudo elements were given specificity in the class B
instead of the class C.
Now that the inspector shows the specificity, this bug is much more visible which is why
I fix it now.
Test: fast/css/pseudo-element-specificity.html
* css/CSSSelector.cpp:
(WebCore::CSSSelector::specificityForOneSelector):
Give pseudo-elements the right specificity.
* Modules/mediacontrols/mediaControlsApple.css:
(video::-webkit-media-controls-volume-slider):
(audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb):
(audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb):
(audio::-webkit-media-controls-timeline):
(audio::-webkit-media-controls-timeline::-webkit-slider-thumb):
(audio::-webkit-media-controls-timeline:active::-webkit-slider-thumb,):
(video:-webkit-full-screen::-webkit-media-controls-volume-slider):
(video:-webkit-full-screen::-webkit-media-controls-volume-slider::-webkit-slider-thumb):
* Modules/mediacontrols/mediaControlsBase.css:
(video::-webkit-media-controls-volume-slider):
(audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb):
(audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb):
(audio::-webkit-media-controls-timeline):
(audio::-webkit-media-controls-timeline::-webkit-slider-thumb):
(audio::-webkit-media-controls-timeline:active::-webkit-slider-thumb,):
(video:-webkit-full-screen::-webkit-media-controls-volume-slider):
(video:-webkit-full-screen::-webkit-media-controls-volume-slider::-webkit-slider-thumb):
* css/mediaControls.css:
(audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider):
(audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button):
* css/mediaControlsGtk.css:
(audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline):
(audio::-webkit-media-controls-timeline[disabled], video::-webkit-media-controls-timeline[disabled]):
(audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider):
The media controls were relying on the bug to override the style of input[type=range].
Ideally we should either:
-Implement some kind of high level style isolation (e.g. CSS Scoping).
-Fix the media control tree to use regular CSS scoped by a shadow pseudo ID.
Until we have one of those, I just fixed the styling by forcing the properties with lower
specificity with !important.
LayoutTests:
* fast/css/pseudo-element-specificity-expected.html: Added.
* fast/css/pseudo-element-specificity.html: Added.
Given that all selector affecting the pseudo element were offset by one,
it is impossible to use a pseudo element directly to affect the order, making the bug
hard to test.
What I did here for testing is use the stauration at 255 of any specificity field.
With 255 class + 1 pseudo element, the old code would saturate at (0, 255, 0), while
the fixed code would correctly give (0, 255, 1). By comparing that to a non-saturated
selector, I can show the fix is correct.
* inspector/css/selector-specificity-expected.txt:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsinspectorcssselectorspecificityexpectedtxt">trunk/LayoutTests/inspector/css/selector-specificity-expected.txt</a></li>
<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="#trunkSourceWebCoreModulesmediacontrolsmediaControlsBasecss">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsBase.css</a></li>
<li><a href="#trunkSourceWebCorecssCSSSelectorcpp">trunk/Source/WebCore/css/CSSSelector.cpp</a></li>
<li><a href="#trunkSourceWebCorecssmediaControlscss">trunk/Source/WebCore/css/mediaControls.css</a></li>
<li><a href="#trunkSourceWebCorecssmediaControlsGtkcss">trunk/Source/WebCore/css/mediaControlsGtk.css</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcsspseudoelementspecificityexpectedhtml">trunk/LayoutTests/fast/css/pseudo-element-specificity-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoelementspecificityhtml">trunk/LayoutTests/fast/css/pseudo-element-specificity.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (175714 => 175715)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2014-11-06 22:04:21 UTC (rev 175714)
+++ trunk/LayoutTests/ChangeLog        2014-11-06 22:07:19 UTC (rev 175715)
</span><span class="lines">@@ -1,3 +1,23 @@
</span><ins>+2014-11-06 Benjamin Poulain <bpoulain@apple.com>
+
+ Give pseudo elements the correct specificity
+ https://bugs.webkit.org/show_bug.cgi?id=138378
+
+ Reviewed by Dean Jackson.
+
+ * fast/css/pseudo-element-specificity-expected.html: Added.
+ * fast/css/pseudo-element-specificity.html: Added.
+ Given that all selector affecting the pseudo element were offset by one,
+ it is impossible to use a pseudo element directly to affect the order, making the bug
+ hard to test.
+
+ What I did here for testing is use the stauration at 255 of any specificity field.
+ With 255 class + 1 pseudo element, the old code would saturate at (0, 255, 0), while
+ the fixed code would correctly give (0, 255, 1). By comparing that to a non-saturated
+ selector, I can show the fix is correct.
+
+ * inspector/css/selector-specificity-expected.txt:
+
</ins><span class="cx"> 2014-11-06 Alexey Proskuryakov <ap@apple.com>
</span><span class="cx">
</span><span class="cx"> inspector-protocol/debugger/setPauseOnExceptions-uncaught.html frequently times out on Yosemite
</span></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoelementspecificityexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-element-specificity-expected.html (0 => 175715)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-element-specificity-expected.html         (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-element-specificity-expected.html        2014-11-06 22:07:19 UTC (rev 175715)
</span><span class="lines">@@ -0,0 +1,19 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+ <style>
+ testcase::before {
+ content:"Before";
+ display: block;
+ background-color: green;
+ color: white;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>Test the specificity of pseudo elements. If the text succeed, there should be a green rectangle with the text "Before".</p>
+ <testcase class="testcase"></testcase>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoelementspecificityhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-element-specificity.html (0 => 175715)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-element-specificity.html         (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-element-specificity.html        2014-11-06 22:07:19 UTC (rev 175715)
</span><span class="lines">@@ -0,0 +1,23 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+ <style>
+ .testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase
.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcas
e.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase::before {
+ background-color: green;
+ color: white;
+ }
+
+ .testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase
.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcas
e.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase.testcase::before {
+ content:"Before";
+ display: block;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>Test the specificity of pseudo elements. If the text succeed, there should be a green rectangle with the text "Before".</p>
+ <testcase class="testcase"></testcase>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsinspectorcssselectorspecificityexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/inspector/css/selector-specificity-expected.txt (175714 => 175715)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/css/selector-specificity-expected.txt        2014-11-06 22:04:21 UTC (rev 175714)
+++ trunk/LayoutTests/inspector/css/selector-specificity-expected.txt        2014-11-06 22:07:19 UTC (rev 175715)
</span><span class="lines">@@ -8,7 +8,7 @@
</span><span class="cx"> body #foo (1, 0, 1)
</span><span class="cx"> body > #foo (1, 0, 1)
</span><span class="cx"> body > #foo.a.b (1, 2, 1)
</span><del>-h1::before (0, 1, 1)
-body h1::before (0, 1, 2)
-body.a h1.b::before (0, 3, 2)
</del><ins>+h1::before (0, 0, 2)
+body h1::before (0, 0, 3)
+body.a h1.b::before (0, 2, 3)
</ins><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (175714 => 175715)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2014-11-06 22:04:21 UTC (rev 175714)
+++ trunk/Source/WebCore/ChangeLog        2014-11-06 22:07:19 UTC (rev 175715)
</span><span class="lines">@@ -1,3 +1,56 @@
</span><ins>+2014-11-06 Benjamin Poulain <bpoulain@apple.com>
+
+ Give pseudo elements the correct specificity
+ https://bugs.webkit.org/show_bug.cgi?id=138378
+
+ Reviewed by Dean Jackson.
+
+ WebKit had an old silly bug where pseudo elements were given specificity in the class B
+ instead of the class C.
+
+ Now that the inspector shows the specificity, this bug is much more visible which is why
+ I fix it now.
+
+ Test: fast/css/pseudo-element-specificity.html
+
+ * css/CSSSelector.cpp:
+ (WebCore::CSSSelector::specificityForOneSelector):
+ Give pseudo-elements the right specificity.
+
+ * Modules/mediacontrols/mediaControlsApple.css:
+ (video::-webkit-media-controls-volume-slider):
+ (audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb):
+ (audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb):
+ (audio::-webkit-media-controls-timeline):
+ (audio::-webkit-media-controls-timeline::-webkit-slider-thumb):
+ (audio::-webkit-media-controls-timeline:active::-webkit-slider-thumb,):
+ (video:-webkit-full-screen::-webkit-media-controls-volume-slider):
+ (video:-webkit-full-screen::-webkit-media-controls-volume-slider::-webkit-slider-thumb):
+ * Modules/mediacontrols/mediaControlsBase.css:
+ (video::-webkit-media-controls-volume-slider):
+ (audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb):
+ (audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb):
+ (audio::-webkit-media-controls-timeline):
+ (audio::-webkit-media-controls-timeline::-webkit-slider-thumb):
+ (audio::-webkit-media-controls-timeline:active::-webkit-slider-thumb,):
+ (video:-webkit-full-screen::-webkit-media-controls-volume-slider):
+ (video:-webkit-full-screen::-webkit-media-controls-volume-slider::-webkit-slider-thumb):
+ * css/mediaControls.css:
+ (audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider):
+ (audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button):
+ * css/mediaControlsGtk.css:
+ (audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline):
+ (audio::-webkit-media-controls-timeline[disabled], video::-webkit-media-controls-timeline[disabled]):
+ (audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider):
+ The media controls were relying on the bug to override the style of input[type=range].
+
+ Ideally we should either:
+ -Implement some kind of high level style isolation (e.g. CSS Scoping).
+ -Fix the media control tree to use regular CSS scoped by a shadow pseudo ID.
+
+ Until we have one of those, I just fixed the styling by forcing the properties with lower
+ specificity with !important.
+
</ins><span class="cx"> 2014-11-06 Beth Dakin <bdakin@apple.com>
</span><span class="cx">
</span><span class="cx"> Preview views often misplaced inside popover
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (175714 => 175715)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css        2014-11-06 22:04:21 UTC (rev 175714)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css        2014-11-06 22:07:19 UTC (rev 175715)
</span><span class="lines">@@ -221,42 +221,42 @@
</span><span class="cx">
</span><span class="cx"> audio::-webkit-media-controls-volume-slider,
</span><span class="cx"> video::-webkit-media-controls-volume-slider {
</span><del>- -webkit-appearance: none;
- box-sizing: border-box;
- height: 10px;
- width: 80px;
- padding: 0;
- margin-right: 6px;
</del><ins>+ -webkit-appearance: none !important;
+ box-sizing: border-box !important;
+ height: 10px !important;
+ width: 80px !important;
+ padding: 0 !important;
+ margin-right: 6px !important;
</ins><span class="cx">
</span><del>- border-radius: 5px;
- background-color: transparent;
</del><ins>+ border-radius: 5px !important;
+ background-color: transparent !important;
</ins><span class="cx"> background-image: -webkit-linear-gradient(
</span><span class="cx"> top,
</span><span class="cx"> rgba(15, 15, 15, .85) 0,
</span><span class="cx"> rgba(23, 23, 23, .85) 50%,
</span><span class="cx"> rgba(15, 15, 15, .85) 100%
</span><del>- );
- border: 1px solid rgba(0, 0, 0, 0.875);
</del><ins>+ ) !important;
+ border: 1px solid rgba(0, 0, 0, 0.875) !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-volume-slider::-webkit-slider-thumb,
</span><span class="cx"> audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
</span><del>- -webkit-appearance: none;
- width: 8px;
- height: 8px;
- border-radius: 4px;
- background-color: transparent;
</del><ins>+ -webkit-appearance: none !important;
+ width: 8px !important;
+ height: 8px !important;
+ border-radius: 4px !important;
+ background-color: transparent !important;
</ins><span class="cx">
</span><span class="cx"> /* rotateZ() forces the layer into compositing mode.
</span><span class="cx"> Slider 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><del>- -webkit-transform: rotateZ(0);
</del><ins>+ -webkit-transform: rotateZ(0) !important;
</ins><span class="cx"> background-image: -webkit-linear-gradient(
</span><span class="cx"> left,
</span><span class="cx"> rgba(99, 99, 99, 1),
</span><span class="cx"> rgba(144, 144, 144, 1)
</span><del>- );
- box-shadow: inset -1px 0 0 rgba(255, 255, 255, .5), 0 1px rgba(255, 255, 255, .14);
</del><ins>+ ) !important;
+ box-shadow: inset -1px 0 0 rgba(255, 255, 255, .5), 0 1px rgba(255, 255, 255, .14) !important;
</ins><span class="cx"> }
</span><span class="cx"> video::-webkit-media-controls-volume-slider::-webkit-slider-thumb::-webkit-slider-thumb:active,
</span><span class="cx"> video::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb,
</span><span class="lines">@@ -266,7 +266,7 @@
</span><span class="cx"> right top,
</span><span class="cx"> rgba(160, 160, 160, 1),
</span><span class="cx"> rgba(221, 221, 221, 1)
</span><del>- );
</del><ins>+ ) !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-mute-button.muted,
</span><span class="lines">@@ -417,27 +417,27 @@
</span><span class="cx"> }
</span><span class="cx"> video::-webkit-media-controls-timeline,
</span><span class="cx"> audio::-webkit-media-controls-timeline {
</span><del>- -webkit-appearance: none;
- -webkit-flex: 1 1 0;
- height: 9px;
- margin: 0;
- background-size: 100% 9px;
</del><ins>+ -webkit-appearance: none !important;
+ -webkit-flex: 1 1 0 !important;
+ height: 9px !important;
+ margin: 0 !important;
+ background-size: 100% 9px !important;
</ins><span class="cx">
</span><del>- border-radius: 4.5px;
- background-color: rgb(74, 74, 74);
- box-shadow: inset -1px 0 0 rgba(0, 0, 0, .68), 0 1px rgba(255, 255, 255, .08);
</del><ins>+ border-radius: 4.5px !important;
+ background-color: rgb(74, 74, 74) !important;
+ box-shadow: inset -1px 0 0 rgba(0, 0, 0, .68), 0 1px rgba(255, 255, 255, .08) !important;
</ins><span class="cx"> }
</span><span class="cx"> video::-webkit-media-controls-timeline::-webkit-slider-thumb,
</span><span class="cx"> audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
</span><del>- -webkit-appearance: none;
- width:6px;
- height: 6px;
- background-color: white;
</del><ins>+ -webkit-appearance: none !important;
+ width:6px !important;
+ height: 6px !important;
+ background-color: white !important;
</ins><span class="cx">
</span><span class="cx"> /* rotateZ() forces the layer into compositing mode.
</span><span class="cx"> Slider 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><del>- -webkit-transform: translateY(1px) rotateZ(-45deg);
</del><ins>+ -webkit-transform: translateY(1px) rotateZ(-45deg) !important;
</ins><span class="cx">
</span><span class="cx"> background-image: -webkit-gradient(
</span><span class="cx"> linear,
</span><span class="lines">@@ -445,7 +445,7 @@
</span><span class="cx"> right top,
</span><span class="cx"> color-stop(0, rgba(99, 99, 99, 1)),
</span><span class="cx"> color-stop(1, rgba(144, 144, 144, 1))
</span><del>- );
</del><ins>+ ) !important;
</ins><span class="cx"> }
</span><span class="cx"> video::-webkit-media-controls-timeline::-webkit-slider-thumb:active,
</span><span class="cx"> video::-webkit-media-controls-timeline:active::-webkit-slider-thumb,
</span><span class="lines">@@ -458,7 +458,7 @@
</span><span class="cx"> right top,
</span><span class="cx"> color-stop(0, rgba(160, 160, 160, 1)),
</span><span class="cx"> color-stop(1, rgba(221, 221, 221, 1))
</span><del>- );
</del><ins>+ ) !important;
</ins><span class="cx"> }
</span><span class="cx"> video::-webkit-media-controls-current-time-display,
</span><span class="cx"> video::-webkit-media-controls-time-remaining-display,
</span><span class="lines">@@ -605,24 +605,24 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-volume-slider {
</span><del>- height: 6px;
- border-radius: 3px;
</del><ins>+ height: 6px !important;
+ border-radius: 3px !important;
</ins><span class="cx"> background-image: -webkit-linear-gradient(top,
</span><span class="cx"> rgba(16, 16, 16, .300) 0,
</span><span class="cx"> rgba(9, 9, 9, .629) 100%
</span><del>- );
- box-shadow: inset -1px 0 0 rgba(0, 0, 0, .68), 0 1px rgba(255, 255, 255, .08);
</del><ins>+ ) !important;
+ box-shadow: inset -1px 0 0 rgba(0, 0, 0, .68), 0 1px rgba(255, 255, 255, .08) !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
</span><del>- width: 10px;
- height: 10px;
- border-radius: 5px;
</del><ins>+ width: 10px !important;
+ height: 10px !important;
+ border-radius: 5px !important;
</ins><span class="cx">
</span><span class="cx"> /* rotateZ() forces the layer into compositing mode.
</span><span class="cx"> Slider 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><del>- -webkit-transform: rotateZ(270deg);
</del><ins>+ -webkit-transform: rotateZ(270deg) !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-play-button {
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsBasecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsBase.css (175714 => 175715)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsBase.css        2014-11-06 22:04:21 UTC (rev 175714)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsBase.css        2014-11-06 22:07:19 UTC (rev 175715)
</span><span class="lines">@@ -224,42 +224,42 @@
</span><span class="cx">
</span><span class="cx"> audio::-webkit-media-controls-volume-slider,
</span><span class="cx"> video::-webkit-media-controls-volume-slider {
</span><del>- -webkit-appearance: none;
- box-sizing: border-box;
- height: 10px;
- width: 80px;
- padding: 0;
- margin-right: 6px;
</del><ins>+ -webkit-appearance: none !important;
+ box-sizing: border-box !important;
+ height: 10px !important;
+ width: 80px !important;
+ padding: 0 !important;
+ margin-right: 6px !important;
</ins><span class="cx">
</span><del>- border-radius: 5px;
- background-color: transparent;
</del><ins>+ border-radius: 5px !important;
+ background-color: transparent !important;
</ins><span class="cx"> background-image: -webkit-linear-gradient(
</span><span class="cx"> top,
</span><span class="cx"> rgba(15, 15, 15, .85) 0,
</span><span class="cx"> rgba(23, 23, 23, .85) 50%,
</span><span class="cx"> rgba(15, 15, 15, .85) 100%
</span><del>- );
- border: 1px solid rgba(0, 0, 0, 0.875);
</del><ins>+ ) !important;
+ border: 1px solid rgba(0, 0, 0, 0.875) !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-volume-slider::-webkit-slider-thumb,
</span><span class="cx"> audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
</span><del>- -webkit-appearance: none;
- width: 8px;
- height: 8px;
- border-radius: 4px;
- background-color: transparent;
</del><ins>+ -webkit-appearance: none !important;
+ width: 8px !important;
+ height: 8px !important;
+ border-radius: 4px !important;
+ background-color: transparent !important;
</ins><span class="cx">
</span><span class="cx"> /* rotateZ() forces the layer into compositing mode.
</span><span class="cx"> Slider 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><del>- -webkit-transform: rotateZ(0);
</del><ins>+ -webkit-transform: rotateZ(0) !important;
</ins><span class="cx"> background-image: -webkit-linear-gradient(
</span><span class="cx"> left,
</span><span class="cx"> rgba(99, 99, 99, 1),
</span><span class="cx"> rgba(144, 144, 144, 1)
</span><del>- );
- box-shadow: inset -1px 0 0 rgba(255, 255, 255, .5), 0 1px rgba(255, 255, 255, .14);
</del><ins>+ ) !important;
+ box-shadow: inset -1px 0 0 rgba(255, 255, 255, .5), 0 1px rgba(255, 255, 255, .14) !important;
</ins><span class="cx"> }
</span><span class="cx"> video::-webkit-media-controls-volume-slider::-webkit-slider-thumb::-webkit-slider-thumb:active,
</span><span class="cx"> video::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb,
</span><span class="lines">@@ -269,7 +269,7 @@
</span><span class="cx"> right top,
</span><span class="cx"> rgba(160, 160, 160, 1),
</span><span class="cx"> rgba(221, 221, 221, 1)
</span><del>- );
</del><ins>+ ) !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-mute-button.muted,
</span><span class="lines">@@ -415,26 +415,26 @@
</span><span class="cx"> }
</span><span class="cx"> video::-webkit-media-controls-timeline,
</span><span class="cx"> audio::-webkit-media-controls-timeline {
</span><del>- -webkit-appearance: none;
- -webkit-flex: 1 1 0;
- height: 9px;
- margin: 0;
</del><ins>+ -webkit-appearance: none !important;
+ -webkit-flex: 1 1 0 !important;
+ height: 9px !important;
+ margin: 0 !important;
</ins><span class="cx">
</span><del>- border-radius: 4.5px;
- background-color: rgb(74, 74, 74);
- box-shadow: inset -1px 0 0 rgba(0, 0, 0, .68), 0 1px rgba(255, 255, 255, .08);
</del><ins>+ border-radius: 4.5px !important;
+ background-color: rgb(74, 74, 74) !important;
+ box-shadow: inset -1px 0 0 rgba(0, 0, 0, .68), 0 1px rgba(255, 255, 255, .08) !important;
</ins><span class="cx"> }
</span><span class="cx"> video::-webkit-media-controls-timeline::-webkit-slider-thumb,
</span><span class="cx"> audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
</span><del>- -webkit-appearance: none;
- width:6px;
- height: 6px;
- background-color: white;
</del><ins>+ -webkit-appearance: none !important;
+ width:6px !important;
+ height: 6px !important;
+ background-color: white !important;
</ins><span class="cx">
</span><span class="cx"> /* rotateZ() forces the layer into compositing mode.
</span><span class="cx"> Slider 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><del>- -webkit-transform: translateY(1px) rotateZ(-45deg);
</del><ins>+ -webkit-transform: translateY(1px) rotateZ(-45deg) !important;
</ins><span class="cx">
</span><span class="cx"> background-image: -webkit-gradient(
</span><span class="cx"> linear,
</span><span class="lines">@@ -442,7 +442,7 @@
</span><span class="cx"> right top,
</span><span class="cx"> color-stop(0, rgba(99, 99, 99, 1)),
</span><span class="cx"> color-stop(1, rgba(144, 144, 144, 1))
</span><del>- );
</del><ins>+ ) !important;
</ins><span class="cx"> }
</span><span class="cx"> video::-webkit-media-controls-timeline::-webkit-slider-thumb:active,
</span><span class="cx"> video::-webkit-media-controls-timeline:active::-webkit-slider-thumb,
</span><span class="lines">@@ -455,7 +455,7 @@
</span><span class="cx"> right top,
</span><span class="cx"> color-stop(0, rgba(160, 160, 160, 1)),
</span><span class="cx"> color-stop(1, rgba(221, 221, 221, 1))
</span><del>- );
</del><ins>+ ) !important;
</ins><span class="cx"> }
</span><span class="cx"> video::-webkit-media-controls-current-time-display,
</span><span class="cx"> video::-webkit-media-controls-time-remaining-display,
</span><span class="lines">@@ -597,24 +597,24 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-volume-slider {
</span><del>- height: 6px;
- border-radius: 3px;
</del><ins>+ height: 6px !important;
+ border-radius: 3px !important;
</ins><span class="cx"> background-image: -webkit-linear-gradient(top,
</span><span class="cx"> rgba(16, 16, 16, .300) 0,
</span><span class="cx"> rgba(9, 9, 9, .629) 100%
</span><del>- );
- box-shadow: inset -1px 0 0 rgba(0, 0, 0, .68), 0 1px rgba(255, 255, 255, .08);
</del><ins>+ ) !important;
+ box-shadow: inset -1px 0 0 rgba(0, 0, 0, .68), 0 1px rgba(255, 255, 255, .08) !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
</span><del>- width: 10px;
- height: 10px;
- border-radius: 5px;
</del><ins>+ width: 10px !important;
+ height: 10px !important;
+ border-radius: 5px !important;
</ins><span class="cx">
</span><span class="cx"> /* rotateZ() forces the layer into compositing mode.
</span><span class="cx"> Slider 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><del>- -webkit-transform: rotateZ(270deg);
</del><ins>+ -webkit-transform: rotateZ(270deg) !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-play-button {
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSSelectorcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSSelector.cpp (175714 => 175715)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSSelector.cpp        2014-11-06 22:04:21 UTC (rev 175714)
+++ trunk/Source/WebCore/css/CSSSelector.cpp        2014-11-06 22:07:19 UTC (rev 175715)
</span><span class="lines">@@ -92,8 +92,6 @@
</span><span class="cx">
</span><span class="cx"> inline unsigned CSSSelector::specificityForOneSelector() const
</span><span class="cx"> {
</span><del>- // FIXME: Pseudo-elements and pseudo-classes do not have the same specificity. This function
- // isn't quite correct.
</del><span class="cx"> switch (match()) {
</span><span class="cx"> case Id:
</span><span class="cx"> return 0x10000;
</span><span class="lines">@@ -124,13 +122,14 @@
</span><span class="cx"> case Set:
</span><span class="cx"> case List:
</span><span class="cx"> case Hyphen:
</span><del>- case PseudoElement:
</del><span class="cx"> case Contain:
</span><span class="cx"> case Begin:
</span><span class="cx"> case End:
</span><span class="cx"> return 0x100;
</span><span class="cx"> case Tag:
</span><span class="cx"> return (tagQName().localName() != starAtom) ? 1 : 0;
</span><ins>+ case PseudoElement:
+ return 1;
</ins><span class="cx"> case Unknown:
</span><span class="cx"> return 0;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCorecssmediaControlscss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/mediaControls.css (175714 => 175715)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/mediaControls.css        2014-11-06 22:04:21 UTC (rev 175714)
+++ trunk/Source/WebCore/css/mediaControls.css        2014-11-06 22:07:19 UTC (rev 175715)
</span><span class="lines">@@ -129,10 +129,10 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
</span><del>- background-color: initial;
- border: initial;
- color: inherit;
- margin: initial;
</del><ins>+ background-color: initial !important;
+ border: initial !important;
+ color: inherit !important;
+ margin: initial !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
</span><span class="lines">@@ -198,11 +198,11 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button {
</span><del>- -webkit-appearance: media-volume-slider-mute-button;
- display: none;
- background-color: initial;
- border: initial;
- color: inherit;
</del><ins>+ -webkit-appearance: media-volume-slider-mute-button !important;
+ display: none !important;
+ background-color: initial !important;
+ border: initial !important;
+ color: inherit !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-controls-fullscreen-volume-slider {
</span></span></pre></div>
<a id="trunkSourceWebCorecssmediaControlsGtkcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/mediaControlsGtk.css (175714 => 175715)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/mediaControlsGtk.css        2014-11-06 22:04:21 UTC (rev 175714)
+++ trunk/Source/WebCore/css/mediaControlsGtk.css        2014-11-06 22:07:19 UTC (rev 175715)
</span><span class="lines">@@ -173,21 +173,21 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
</span><del>- -webkit-appearance: media-slider;
- display: -webkit-flex;
- -webkit-flex: 1 1 auto;
- height: 8px;
- margin: 0 15px 0 1px;
- padding: 0;
- background-color: transparent;
- min-width: 25px;
- border-radius: 4px;
- color: rgba(230, 230, 230, 0.35);
- outline: none;
</del><ins>+ -webkit-appearance: media-slider !important;
+ display: -webkit-flex !important;
+ -webkit-flex: 1 1 auto !important;
+ height: 8px !important;
+ margin: 0 15px 0 1px !important;
+ padding: 0 !important;
+ background-color: transparent !important;
+ min-width: 25px !important;
+ border-radius: 4px !important;
+ color: rgba(230, 230, 230, 0.35) !important;
+ outline: none !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> audio::-webkit-media-controls-timeline[disabled], video::-webkit-media-controls-timeline[disabled] {
</span><del>- opacity: 0.3;
</del><ins>+ opacity: 0.3 !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
</span><span class="lines">@@ -224,18 +224,18 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
</span><del>- -webkit-appearance: media-volume-slider;
- display: -webkit-flex;
- -webkit-align-items: center;
- -webkit-flex-direction: column;
- box-sizing: border-box;
- height: 80px;
- width: 8px;
- margin: 10px auto;
- border-radius: 4px;
- background-color: transparent;
- color: rgba(230, 230, 230, 0.35);
- outline: none;
</del><ins>+ -webkit-appearance: media-volume-slider !important;
+ display: -webkit-flex !important;
+ -webkit-align-items: center !important;
+ -webkit-flex-direction: column !important;
+ box-sizing: border-box !important;
+ height: 80px !important;
+ width: 8px !important;
+ margin: 10px auto !important;
+ border-radius: 4px !important;
+ background-color: transparent !important;
+ color: rgba(230, 230, 230, 0.35) !important;
+ outline: none !important;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div, video::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div {
</span></span></pre>
</div>
</div>
</body>
</html>