<!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>[190160] 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/190160">190160</a></dd>
<dt>Author</dt> <dd>changseok.oh@collabora.com</dd>
<dt>Date</dt> <dd>2015-09-23 04:07:15 -0700 (Wed, 23 Sep 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>[GTK] playbutton in media controls is not changed when it is clicked.
https://bugs.webkit.org/show_bug.cgi?id=149113
Reviewed by Philippe Normand.
Source/WebCore:
When the play button in media controls is clicked, a 'paused' class is added or removed
for the element to update its appearance. Although Document::recalcStyle is triggered
by that class attribute change, the play button is not changed since there is
no difference in styles whether having the 'paused' class or not. Gtk port
does not define the -webkit-media-controls-play-button.paused. To fix this,
-webkit-media-controls-play-button.paused is newly defined with a dummy style,
"position: relative;", which should not change the play button appearance,
but be clearly different in style.
Test: media/media-controls-play-button-updates.html
* css/mediaControlsGtk.css:
(video::-webkit-media-controls-play-button.paused):
LayoutTests:
* media/media-controls-play-button-updates-expected.png: Added.
* media/media-controls-play-button-updates-expected.txt: Added.
* media/media-controls-play-button-updates.html: Added.
* platform/gtk/media/media-controls-play-button-updates-expected.png: Added.
* platform/gtk/media/media-controls-play-button-updates-expected.txt: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssmediaControlsGtkcss">trunk/Source/WebCore/css/mediaControlsGtk.css</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsmediamediacontrolsplaybuttonupdatesexpectedpng">trunk/LayoutTests/media/media-controls-play-button-updates-expected.png</a></li>
<li><a href="#trunkLayoutTestsmediamediacontrolsplaybuttonupdatesexpectedtxt">trunk/LayoutTests/media/media-controls-play-button-updates-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamediacontrolsplaybuttonupdateshtml">trunk/LayoutTests/media/media-controls-play-button-updates.html</a></li>
<li><a href="#trunkLayoutTestsplatformgtkmediamediacontrolsplaybuttonupdatesexpectedpng">trunk/LayoutTests/platform/gtk/media/media-controls-play-button-updates-expected.png</a></li>
<li><a href="#trunkLayoutTestsplatformgtkmediamediacontrolsplaybuttonupdatesexpectedtxt">trunk/LayoutTests/platform/gtk/media/media-controls-play-button-updates-expected.txt</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (190159 => 190160)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2015-09-23 11:03:08 UTC (rev 190159)
+++ trunk/LayoutTests/ChangeLog 2015-09-23 11:07:15 UTC (rev 190160)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+2015-09-23 ChangSeok Oh <changseok.oh@collabora.com>
+
+ [GTK] playbutton in media controls is not changed when it is clicked.
+ https://bugs.webkit.org/show_bug.cgi?id=149113
+
+ Reviewed by Philippe Normand.
+
+ * media/media-controls-play-button-updates-expected.png: Added.
+ * media/media-controls-play-button-updates-expected.txt: Added.
+ * media/media-controls-play-button-updates.html: Added.
+ * platform/gtk/media/media-controls-play-button-updates-expected.png: Added.
+ * platform/gtk/media/media-controls-play-button-updates-expected.txt: Added.
+
</ins><span class="cx"> 2015-09-23 Xabier Rodriguez Calvar <calvaris@igalia.com>
</span><span class="cx">
</span><span class="cx"> [Streams API] Add bad strategies writable streams tests
</span></span></pre></div>
<a id="trunkLayoutTestsmediamediacontrolsplaybuttonupdatesexpectedpng"></a>
<div class="binary"><h4>Added: trunk/LayoutTests/media/media-controls-play-button-updates-expected.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/LayoutTests/media/media-controls-play-button-updates-expected.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkLayoutTestsmediamediacontrolsplaybuttonupdatesexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/media-controls-play-button-updates-expected.txt (0 => 190160)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/media-controls-play-button-updates-expected.txt (rev 0)
+++ trunk/LayoutTests/media/media-controls-play-button-updates-expected.txt 2015-09-23 11:07:15 UTC (rev 190160)
</span><span class="lines">@@ -0,0 +1,64 @@
</span><ins>+layer at (0,0) size 800x600
+ RenderView at (0,0) size 800x600
+layer at (0,0) size 800x356
+ RenderBlock {HTML} at (0,0) size 800x356
+ RenderBody {BODY} at (8,16) size 784x332
+ RenderBlock {P} at (0,0) size 784x18
+ RenderText {#text} at (0,0) size 548x18
+ text run at (0,0) width 548: "This tests if media controls play button is properly updated accroding to mouse clicks"
+ RenderBlock (anonymous) at (0,34) size 784x244
+ RenderText {#text} at (0,0) size 0x0
+ RenderText {#text} at (0,0) size 0x0
+ RenderText {#text} at (0,0) size 0x0
+ RenderText {#text} at (0,0) size 0x0
+ RenderBlock {DIV} at (0,278) size 784x54
+ RenderText {#text} at (0,0) size 163x18
+ text run at (0,0) width 163: "EVENT(canplaythrough)"
+ RenderBR {BR} at (162,0) size 1x18
+ RenderText {#text} at (0,18) size 112x18
+ text run at (0,18) width 112: "EVENT(playing)"
+ RenderBR {BR} at (111,18) size 1x18
+ RenderText {#text} at (0,36) size 100x18
+ text run at (0,36) width 100: "EVENT(pause)"
+ RenderBR {BR} at (99,36) size 1x18
+layer at (8,50) size 320x240 isolatesBlending
+ RenderVideo {VIDEO} at (0,0) size 320x240
+layer at (8,50) size 320x240
+ RenderFlexibleBox {DIV} at (0,0) size 320x240
+layer at (8,245) size 320x45
+ RenderFlexibleBox {DIV} at (0,195) size 320x45
+layer at (8,245) size 320x45 isolatesBlending
+ RenderBlock (positioned) {DIV} at (0,0) size 320x45
+layer at (8,245) size 320x45
+ RenderBlock (positioned) {DIV} at (0,0) size 320x45 [bgcolor=#1E1E1E73]
+layer at (8,245) size 320x45 blendMode: lighten
+ RenderBlock (positioned) {DIV} at (0,0) size 320x45 [bgcolor=#292929]
+layer at (16,270) size 12x15 blendMode: plus-lighter
+ RenderButton {BUTTON} at (8,25) size 12x15 [color=#FFFFFF]
+layer at (44,270) size 16x15 blendMode: plus-lighter
+ RenderButton {BUTTON} at (36,24) size 16x16 [color=#FFFFFF]
+layer at (68,269) size 234x17
+ RenderFlexibleBox {DIV} at (60,24) size 234x17
+layer at (76,271) size 32x13 blendMode: plus-lighter
+ RenderFlexibleBox {DIV} at (8,2) size 32x13 [color=#FFFFFF]
+ RenderBlock (anonymous) at (0,0) size 32x13
+ RenderText {#text} at (0,0) size 32x13
+ text run at (0,0) width 32: "00:00"
+layer at (118,269) size 129x17
+ RenderFlexibleBox {DIV} at (50,0) size 129x17
+layer at (118,269) size 129x17 blendMode: plus-lighter
+ RenderSlider {INPUT} at (0,0) size 129x17 [color=#909090]
+ RenderFlexibleBox {DIV} at (0,0) size 129x17
+ RenderBlock {DIV} at (0,1) size 129x15
+ RenderBlock {DIV} at (0,0) size 3x15
+layer at (257,271) size 37x13 scrollWidth 38 blendMode: plus-lighter
+ RenderFlexibleBox {DIV} at (189,2) size 37x13 [color=#FFFFFF]
+ RenderBlock (anonymous) at (0,0) size 38x13
+ RenderText {#text} at (0,0) size 38x13
+ text run at (0,0) width 38: "-00:06"
+layer at (310,265) size 14x25
+ RenderFlexibleBox {DIV} at (302,20) size 14x25
+layer at (310,270) size 14x15 blendMode: plus-lighter
+ RenderButton {BUTTON} at (0,5) size 14x15 [color=#FFFFFF]
+layer at (340,270) size 14x15 blendMode: plus-lighter
+ RenderButton {BUTTON} at (332,25) size 14x15 [color=#FFFFFF]
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamediacontrolsplaybuttonupdateshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/media-controls-play-button-updates.html (0 => 190160)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/media-controls-play-button-updates.html (rev 0)
+++ trunk/LayoutTests/media/media-controls-play-button-updates.html 2015-09-23 11:07:15 UTC (rev 190160)
</span><span class="lines">@@ -0,0 +1,70 @@
</span><ins>+<!DOCTYPE html>
+<p>This tests if media controls play button is properly updated accroding to mouse clicks</p>
+<video controls></video>
+<script src=media-file.js></script>
+<script src=media-controls.js></script>
+<script>
+function timeLineValue()
+{
+ var timeline = mediaControlsElement(internals.shadowRoot(video).firstChild.firstChild, '-webkit-media-controls-timeline');
+ if (!timeline)
+ throw "Failed to find -webkit-media-controls-timeline";
+
+ return timeline.value;
+}
+
+function click()
+{
+ if (!window.testRunner)
+ return;
+
+ eventSender.mouseDown();
+ eventSender.mouseUp();
+}
+
+function canplaythrough()
+{
+ if (!window.testRunner)
+ return;
+
+ window.testRunner.waitUntilDone();
+
+ var playButtonCoords;
+ try {
+ playButtonCoords = mediaControlsButtonCoordinates(video, "play-button");
+ } catch (exception) {
+ window.testRunner.notifyDone();
+ return;
+ }
+
+ eventSender.mouseMoveTo(playButtonCoords[0], playButtonCoords[1]);
+ setTimeout(click, 0);
+}
+
+function pause()
+{
+ if (!window.testRunner)
+ return;
+
+ window.testRunner.notifyDone();
+}
+
+function playing()
+{
+ setTimeout(click, 0);
+}
+
+var video;
+var requirePixelDump = true;
+
+onload = function() {
+ findMediaElement();
+ video.src = findMediaFile("video", "content/test");
+
+ waitForEvent("canplaythrough", canplaythrough);
+ waitForEvent("playing", playing);
+ waitForEvent("pause", pause);
+ waitForEventAndFail("error");
+}
+</script>
+<script src=video-test.js></script>
</ins></span></pre></div>
<a id="trunkLayoutTestsplatformgtkmediamediacontrolsplaybuttonupdatesexpectedpng"></a>
<div class="binary"><h4>Added: trunk/LayoutTests/platform/gtk/media/media-controls-play-button-updates-expected.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/LayoutTests/platform/gtk/media/media-controls-play-button-updates-expected.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkLayoutTestsplatformgtkmediamediacontrolsplaybuttonupdatesexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/platform/gtk/media/media-controls-play-button-updates-expected.txt (0 => 190160)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/gtk/media/media-controls-play-button-updates-expected.txt (rev 0)
+++ trunk/LayoutTests/platform/gtk/media/media-controls-play-button-updates-expected.txt 2015-09-23 11:07:15 UTC (rev 190160)
</span><span class="lines">@@ -0,0 +1,41 @@
</span><ins>+layer at (0,0) size 800x600
+ RenderView at (0,0) size 800x600
+layer at (0,0) size 800x351
+ RenderBlock {HTML} at (0,0) size 800x351
+ RenderBody {BODY} at (8,16) size 784x327
+ RenderBlock {P} at (0,0) size 784x17
+ RenderText {#text} at (0,0) size 535x17
+ text run at (0,0) width 535: "This tests if media controls play button is properly updated accroding to mouse clicks"
+ RenderBlock (anonymous) at (0,33) size 784x243
+ RenderText {#text} at (0,0) size 0x0
+ RenderText {#text} at (0,0) size 0x0
+ RenderText {#text} at (0,0) size 0x0
+ RenderText {#text} at (0,0) size 0x0
+ RenderBlock {DIV} at (0,276) size 784x51
+ RenderText {#text} at (0,0) size 162x17
+ text run at (0,0) width 162: "EVENT(canplaythrough)"
+ RenderBR {BR} at (162,0) size 0x17
+ RenderText {#text} at (0,17) size 111x17
+ text run at (0,17) width 111: "EVENT(playing)"
+ RenderBR {BR} at (111,17) size 0x17
+ RenderText {#text} at (0,34) size 100x17
+ text run at (0,34) width 100: "EVENT(pause)"
+ RenderBR {BR} at (100,34) size 0x17
+layer at (8,49) size 320x240
+ RenderVideo {VIDEO} at (0,0) size 320x240
+layer at (8,49) size 320x240
+ RenderFlexibleBox {DIV} at (0,0) size 320x240
+ RenderBlock {DIV} at (0,200) size 320x40
+layer at (13,254) size 310x30
+ RenderFlexibleBox {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
+ RenderButton {BUTTON} at (9,0) size 30x30
+ RenderSlider {INPUT} at (49,11) size 93x8 [color=#E6E6E659]
+ RenderFlexibleBox {DIV} at (0,0) size 93x8 [border: (1px solid #E6E6E659)]
+ RenderBlock {DIV} at (1,-2) size 105x12
+ RenderBlock {DIV} at (-7,0) size 13x12 [color=#FFFFFF]
+ RenderBlock {DIV} at (157,0) size 74x30 [color=#FFFFFF]
+ RenderText {#text} at (0,7) size 74x15
+ text run at (0,7) width 74: "00:00 / 00:06"
+ RenderButton {BUTTON} at (239,0) size 30x30
+ RenderFlexibleBox {DIV} at (271,0) size 30x30
+ RenderButton {BUTTON} at (0,0) size 30x30
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (190159 => 190160)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2015-09-23 11:03:08 UTC (rev 190159)
+++ trunk/Source/WebCore/ChangeLog 2015-09-23 11:07:15 UTC (rev 190160)
</span><span class="lines">@@ -1,3 +1,24 @@
</span><ins>+2015-09-23 ChangSeok Oh <changseok.oh@collabora.com>
+
+ [GTK] playbutton in media controls is not changed when it is clicked.
+ https://bugs.webkit.org/show_bug.cgi?id=149113
+
+ Reviewed by Philippe Normand.
+
+ When the play button in media controls is clicked, a 'paused' class is added or removed
+ for the element to update its appearance. Although Document::recalcStyle is triggered
+ by that class attribute change, the play button is not changed since there is
+ no difference in styles whether having the 'paused' class or not. Gtk port
+ does not define the -webkit-media-controls-play-button.paused. To fix this,
+ -webkit-media-controls-play-button.paused is newly defined with a dummy style,
+ "position: relative;", which should not change the play button appearance,
+ but be clearly different in style.
+
+ Test: media/media-controls-play-button-updates.html
+
+ * css/mediaControlsGtk.css:
+ (video::-webkit-media-controls-play-button.paused):
+
</ins><span class="cx"> 2015-09-23 Youenn Fablet <youenn.fablet@crf.canon.fr>
</span><span class="cx">
</span><span class="cx"> [Streams API] Implement ReadableStream pipeThrough
</span></span></pre></div>
<a id="trunkSourceWebCorecssmediaControlsGtkcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/mediaControlsGtk.css (190159 => 190160)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/mediaControlsGtk.css 2015-09-23 11:03:08 UTC (rev 190159)
+++ trunk/Source/WebCore/css/mediaControlsGtk.css 2015-09-23 11:07:15 UTC (rev 190160)
</span><span class="lines">@@ -145,6 +145,12 @@
</span><span class="cx"> outline: none;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+/* paused classes for audio/video controls should be defined to make a difference in style from not having this class. Overwise a repaint would not happen. */
+audio::-webkit-media-controls-play-button.paused,
+video::-webkit-media-controls-play-button.paused {
+ position: relative;
+}
+
</ins><span class="cx"> audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
</span><span class="cx"> audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
</span><span class="cx"> -webkit-appearance: media-current-time-display;
</span></span></pre>
</div>
</div>
</body>
</html>