<!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>[209607] 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/209607">209607</a></dd>
<dt>Author</dt> <dd>graouts@webkit.org</dd>
<dt>Date</dt> <dd>2016-12-09 07:31:24 -0800 (Fri, 09 Dec 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[Modern Media Controls] Remaining time label first appears way to the left
https://bugs.webkit.org/show_bug.cgi?id=165637
Reviewed by Dean Jackson.
Source/WebCore:
We would sometimes see the remaining time label be laid out in an incorrect position
when a video would start playing. This happened because the time label was being committed
from a previous value before, in the same frame, we would call the layout() function
of MacOSInlineMediaControls. This would set the newly computed location for the
remaining time label, but because we would reset the list of dirty properties after
calling all layout functions, the new value set in MacOSInlineMediaControls.layout()
would be disregarded and the wrong, committed value would persist until it was reset
in a much later frame.
We now correctly clear the list of dirty nodes before laying them out, giving all nodes
a chance to become dirty again during layout, and updated again in the next frame.
Test: media/modern-media-controls/layout-node/node-made-dirty-during-layout.html
* Modules/modern-media-controls/controls/layout-node.js:
(performScheduledLayout):
LayoutTests:
Add a new test that checks that marking a property as dirty during a layout correctly commits
that property on the next frame.
* media/modern-media-controls/layout-node/node-made-dirty-during-layout-expected.txt: Added.
* media/modern-media-controls/layout-node/node-made-dirty-during-layout.html: 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="#trunkSourceWebCoreModulesmodernmediacontrolscontrolslayoutnodejs">trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-node.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolslayoutnodenodemadedirtyduringlayoutexpectedtxt">trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-layout-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolslayoutnodenodemadedirtyduringlayouthtml">trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-layout.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (209606 => 209607)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-12-09 15:30:34 UTC (rev 209606)
+++ trunk/LayoutTests/ChangeLog 2016-12-09 15:31:24 UTC (rev 209607)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+2016-12-09 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Remaining time label first appears way to the left
+ https://bugs.webkit.org/show_bug.cgi?id=165637
+
+ Reviewed by Dean Jackson.
+
+ Add a new test that checks that marking a property as dirty during a layout correctly commits
+ that property on the next frame.
+
+ * media/modern-media-controls/layout-node/node-made-dirty-during-layout-expected.txt: Added.
+ * media/modern-media-controls/layout-node/node-made-dirty-during-layout.html: Added.
+
</ins><span class="cx"> 2016-12-08 Jiewen Tan <jiewen_tan@apple.com>
</span><span class="cx">
</span><span class="cx"> [WebCrypto] Remove NoInterfaceObject attribute from SubtleCrypto Interface
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolslayoutnodenodemadedirtyduringlayoutexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-layout-expected.txt (0 => 209607)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-layout-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-layout-expected.txt 2016-12-09 15:31:24 UTC (rev 209607)
</span><span class="lines">@@ -0,0 +1,11 @@
</span><ins>+Testing the LayoutNode.y property.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS node.element.style.left is "20px"
+PASS node.element.style.left is "10px"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolslayoutnodenodemadedirtyduringlayouthtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-layout.html (0 => 209607)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-layout.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-layout.html 2016-12-09 15:31:24 UTC (rev 209607)
</span><span class="lines">@@ -0,0 +1,44 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
+<script type="text/javascript">
+
+description("Testing the <code>LayoutNode.y</code> property.");
+
+window.jsTestIsAsync = true;
+
+class CustomNode extends LayoutNode
+{
+
+ layout()
+ {
+ super.layout();
+
+ this.x = 10;
+ }
+
+}
+
+const node = new CustomNode;
+node.x = 20;
+
+let numberOfFrames = 0;
+scheduler.frameDidFire = function()
+{
+ numberOfFrames++;
+ if (numberOfFrames == 1)
+ shouldBeEqualToString("node.element.style.left", "20px");
+ else if (numberOfFrames == 2) {
+ shouldBeEqualToString("node.element.style.left", "10px");
+ finishJSTest();
+ }
+};
+
+// Half a second should be sufficient for this test to complete.
+setTimeout(() => {
+ debug("FAIL: Test timed out.");
+ finishJSTest();
+}, 500);
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (209606 => 209607)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-12-09 15:30:34 UTC (rev 209606)
+++ trunk/Source/WebCore/ChangeLog 2016-12-09 15:31:24 UTC (rev 209607)
</span><span class="lines">@@ -1,3 +1,27 @@
</span><ins>+2016-12-09 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Remaining time label first appears way to the left
+ https://bugs.webkit.org/show_bug.cgi?id=165637
+
+ Reviewed by Dean Jackson.
+
+ We would sometimes see the remaining time label be laid out in an incorrect position
+ when a video would start playing. This happened because the time label was being committed
+ from a previous value before, in the same frame, we would call the layout() function
+ of MacOSInlineMediaControls. This would set the newly computed location for the
+ remaining time label, but because we would reset the list of dirty properties after
+ calling all layout functions, the new value set in MacOSInlineMediaControls.layout()
+ would be disregarded and the wrong, committed value would persist until it was reset
+ in a much later frame.
+
+ We now correctly clear the list of dirty nodes before laying them out, giving all nodes
+ a chance to become dirty again during layout, and updated again in the next frame.
+
+ Test: media/modern-media-controls/layout-node/node-made-dirty-during-layout.html
+
+ * Modules/modern-media-controls/controls/layout-node.js:
+ (performScheduledLayout):
+
</ins><span class="cx"> 2016-12-09 Per Arne Vollan <pvollan@apple.com>
</span><span class="cx">
</span><span class="cx"> Fix compile errors on Windows when building with .proj files.
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolslayoutnodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-node.js (209606 => 209607)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-node.js 2016-12-09 15:30:34 UTC (rev 209606)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-node.js 2016-12-09 15:31:24 UTC (rev 209607)
</span><span class="lines">@@ -288,12 +288,12 @@
</span><span class="cx">
</span><span class="cx"> function performScheduledLayout()
</span><span class="cx"> {
</span><del>- dirtyNodes.forEach(node => {
- node.needsLayout = false;
</del><ins>+ const previousDirtyNodes = Array.from(dirtyNodes);
+ dirtyNodes.clear();
+ previousDirtyNodes.forEach(node => {
+ node._needsLayout = false;
</ins><span class="cx"> node.layout();
</span><span class="cx"> });
</span><del>- dirtyNodes.clear();
- scheduler.unscheduleLayout(performScheduledLayout);
</del><span class="cx">
</span><span class="cx"> nodesRequiringChildrenUpdate.forEach(node => node._updateChildren());
</span><span class="cx"> nodesRequiringChildrenUpdate.clear();
</span></span></pre>
</div>
</div>
</body>
</html>