<!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>[213261] trunk/LayoutTests</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/213261">213261</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2017-03-01 20:37:55 -0800 (Wed, 01 Mar 2017)</dd>
</dl>

<h3>Log Message</h3>
<pre>[mac-wk1] LayoutTest media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html is a flaky timeout
https://bugs.webkit.org/show_bug.cgi?id=168934
&lt;rdar://problem/30798593&gt;

Patch by Antoine Quint &lt;graouts@apple.com&gt; on 2017-03-01
Reviewed by Jon Lee.

Use asynchronous assertions to determine when it's safe to test button styles. We do this across a family of tests
that are all essentially doing the same thing for various media controls configurations. Only one was reported as
flaky, but others would show up on the flakiness dashboard.

* media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-buttons-styles-expected.txt:
* media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-buttons-styles.html:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles-expected.txt:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles-expected.txt:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html:</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsiosinlinemediacontrolsiosinlinemediacontrolsbuttonsstylesexpectedtxt">trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-buttons-styles-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsiosinlinemediacontrolsiosinlinemediacontrolsbuttonsstyleshtml">trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-buttons-styles.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsbuttonsstylesexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsbuttonsstyleshtml">trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsbuttonsstylesexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsbuttonsstyleshtml">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolscompactbuttonsstylesexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolscompactbuttonsstyleshtml">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (213260 => 213261)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2017-03-02 04:34:33 UTC (rev 213260)
+++ trunk/LayoutTests/ChangeLog        2017-03-02 04:37:55 UTC (rev 213261)
</span><span class="lines">@@ -1,5 +1,26 @@
</span><span class="cx"> 2017-03-01  Antoine Quint  &lt;graouts@apple.com&gt;
</span><span class="cx"> 
</span><ins>+        [mac-wk1] LayoutTest media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html is a flaky timeout
+        https://bugs.webkit.org/show_bug.cgi?id=168934
+        &lt;rdar://problem/30798593&gt;
+
+        Reviewed by Jon Lee.
+
+        Use asynchronous assertions to determine when it's safe to test button styles. We do this across a family of tests
+        that are all essentially doing the same thing for various media controls configurations. Only one was reported as
+        flaky, but others would show up on the flakiness dashboard.
+
+        * media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-buttons-styles-expected.txt:
+        * media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-buttons-styles.html:
+        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles-expected.txt:
+        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles.html:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles-expected.txt:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html:
+
+2017-03-01  Antoine Quint  &lt;graouts@apple.com&gt;
+
</ins><span class="cx">         LayoutTest media/modern-media-controls/volume-down-support/volume-down-support.html is flaky
</span><span class="cx">         https://bugs.webkit.org/show_bug.cgi?id=168935
</span><span class="cx">         &lt;rdar://problem/30796699&gt;
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsiosinlinemediacontrolsiosinlinemediacontrolsbuttonsstylesexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-buttons-styles-expected.txt (213260 => 213261)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-buttons-styles-expected.txt        2017-03-02 04:34:33 UTC (rev 213260)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-buttons-styles-expected.txt        2017-03-02 04:37:55 UTC (rev 213261)
</span><span class="lines">@@ -3,48 +3,46 @@
</span><span class="cx"> On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
</span><span class="cx"> 
</span><span class="cx"> 
</span><del>-PASS buttonPositions.some(buttonPosition =&gt; buttonPosition[0].element.style.width == '') became false
</del><span class="cx"> 
</span><span class="cx"> PlayPauseButton
</span><del>-PASS rgba(style.backgroundColor).r is 0
-PASS rgba(style.backgroundColor).g is 0
-PASS rgba(style.backgroundColor).b is 0
-PASS rgba(style.backgroundColor).a is within 0.001 of 0
-PASS style.height is &quot;50px&quot;
-PASS style.webkitMaskPositionY is &quot;12px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;12px&quot;
+PASS rgba(getComputedStyle(button.element).backgroundColor).r is 0
+PASS rgba(getComputedStyle(button.element).backgroundColor).g is 0
+PASS rgba(getComputedStyle(button.element).backgroundColor).b is 0
+PASS rgba(getComputedStyle(button.element).backgroundColor).a is within 0.001 of 0
+PASS getComputedStyle(button.element).height is &quot;50px&quot;
</ins><span class="cx"> 
</span><span class="cx"> SkipBackButton
</span><del>-PASS rgba(style.backgroundColor).r is 0
-PASS rgba(style.backgroundColor).g is 0
-PASS rgba(style.backgroundColor).b is 0
-PASS rgba(style.backgroundColor).a is within 0.001 of 0
-PASS style.height is &quot;50px&quot;
-PASS style.webkitMaskPositionY is &quot;10px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;10px&quot;
+PASS rgba(getComputedStyle(button.element).backgroundColor).r is 0
+PASS rgba(getComputedStyle(button.element).backgroundColor).g is 0
+PASS rgba(getComputedStyle(button.element).backgroundColor).b is 0
+PASS rgba(getComputedStyle(button.element).backgroundColor).a is within 0.001 of 0
+PASS getComputedStyle(button.element).height is &quot;50px&quot;
</ins><span class="cx"> 
</span><span class="cx"> AirplayButton
</span><del>-PASS rgba(style.backgroundColor).r is 0
-PASS rgba(style.backgroundColor).g is 0
-PASS rgba(style.backgroundColor).b is 0
-PASS rgba(style.backgroundColor).a is within 0.001 of 0
-PASS style.height is &quot;50px&quot;
-PASS style.webkitMaskPositionY is &quot;13px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;13px&quot;
+PASS rgba(getComputedStyle(button.element).backgroundColor).r is 0
+PASS rgba(getComputedStyle(button.element).backgroundColor).g is 0
+PASS rgba(getComputedStyle(button.element).backgroundColor).b is 0
+PASS rgba(getComputedStyle(button.element).backgroundColor).a is within 0.001 of 0
+PASS getComputedStyle(button.element).height is &quot;50px&quot;
</ins><span class="cx"> 
</span><span class="cx"> PiPButton
</span><del>-PASS rgba(style.backgroundColor).r is 0
-PASS rgba(style.backgroundColor).g is 0
-PASS rgba(style.backgroundColor).b is 0
-PASS rgba(style.backgroundColor).a is within 0.001 of 0
-PASS style.height is &quot;50px&quot;
-PASS style.webkitMaskPositionY is &quot;13px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;13px&quot;
+PASS rgba(getComputedStyle(button.element).backgroundColor).r is 0
+PASS rgba(getComputedStyle(button.element).backgroundColor).g is 0
+PASS rgba(getComputedStyle(button.element).backgroundColor).b is 0
+PASS rgba(getComputedStyle(button.element).backgroundColor).a is within 0.001 of 0
+PASS getComputedStyle(button.element).height is &quot;50px&quot;
</ins><span class="cx"> 
</span><span class="cx"> FullscreenButton
</span><del>-PASS rgba(style.backgroundColor).r is 0
-PASS rgba(style.backgroundColor).g is 0
-PASS rgba(style.backgroundColor).b is 0
-PASS rgba(style.backgroundColor).a is within 0.001 of 0
-PASS style.height is &quot;50px&quot;
-PASS style.webkitMaskPositionY is &quot;13px&quot;
-
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;13px&quot;
+PASS rgba(getComputedStyle(button.element).backgroundColor).r is 0
+PASS rgba(getComputedStyle(button.element).backgroundColor).g is 0
+PASS rgba(getComputedStyle(button.element).backgroundColor).b is 0
+PASS rgba(getComputedStyle(button.element).backgroundColor).a is within 0.001 of 0
+PASS getComputedStyle(button.element).height is &quot;50px&quot;
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx"> 
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsiosinlinemediacontrolsiosinlinemediacontrolsbuttonsstyleshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-buttons-styles.html (213260 => 213261)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-buttons-styles.html        2017-03-02 04:34:33 UTC (rev 213260)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-buttons-styles.html        2017-03-02 04:37:55 UTC (rev 213261)
</span><span class="lines">@@ -19,23 +19,22 @@
</span><span class="cx">     [mediaControls.fullscreenButton, 13]
</span><span class="cx"> ];
</span><span class="cx"> 
</span><del>-let style;
-shouldBecomeEqual(&quot;buttonPositions.some(buttonPosition =&gt; buttonPosition[0].element.style.width == '')&quot;, &quot;false&quot;, () =&gt; {
-    requestAnimationFrame(() =&gt; {
-        for (let [button, y] of buttonPositions) {
-            debug(&quot;&quot;);
-            style = window.getComputedStyle(button.element);
-            debug(button.constructor.name);
-            shouldBeEqualToRGBAColor(&quot;style.backgroundColor&quot;, &quot;rgb(0, 0, 0)&quot;);
-            shouldBeEqualToString(&quot;style.height&quot;, &quot;50px&quot;);
-            shouldBeEqualToString(&quot;style.webkitMaskPositionY&quot;, `${y}px`);
-        }
-
-        debug(&quot;&quot;);
-        mediaControls.element.remove();
-        finishMediaControlsTest();
</del><ins>+let button, y;
+(function testButton(index)
+{
+    [button, y] = buttonPositions[index];
+    debug(&quot;&quot;);
+    debug(button.constructor.name);
+    shouldBecomeEqualToString(&quot;getComputedStyle(button.element).webkitMaskPositionY&quot;, `${y}px`, () =&gt; {
+        shouldBeEqualToRGBAColor(&quot;getComputedStyle(button.element).backgroundColor&quot;, &quot;rgb(0, 0, 0)&quot;);
+        shouldBeEqualToString(&quot;getComputedStyle(button.element).height&quot;, &quot;50px&quot;);
+        if (index === buttonPositions.length - 1) {
+            mediaControls.element.remove();
+            finishJSTest();
+        } else
+            testButton(index + 1);
</ins><span class="cx">     });
</span><del>-});
</del><ins>+})(0);
</ins><span class="cx"> 
</span><span class="cx"> &lt;/script&gt;
</span><span class="cx"> &lt;script src=&quot;../../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsbuttonsstylesexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles-expected.txt (213260 => 213261)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles-expected.txt        2017-03-02 04:34:33 UTC (rev 213260)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles-expected.txt        2017-03-02 04:37:55 UTC (rev 213261)
</span><span class="lines">@@ -3,43 +3,41 @@
</span><span class="cx"> On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
</span><span class="cx"> 
</span><span class="cx"> 
</span><del>-PASS buttonPositions.some(buttonPosition =&gt; buttonPosition[0].element.style.width == '') became false
</del><span class="cx"> 
</span><span class="cx"> RewindButton
</span><del>-PASS style.left is &quot;27px&quot;
-PASS style.webkitMaskPositionY is &quot;17px&quot;
-PASS style.height is &quot;44px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;17px&quot;
+PASS getComputedStyle(button.element).left is &quot;27px&quot;
+PASS getComputedStyle(button.element).height is &quot;44px&quot;
</ins><span class="cx"> 
</span><span class="cx"> PlayPauseButton
</span><del>-PASS style.left is &quot;78px&quot;
-PASS style.webkitMaskPositionY is &quot;12px&quot;
-PASS style.height is &quot;44px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;12px&quot;
+PASS getComputedStyle(button.element).left is &quot;78px&quot;
+PASS getComputedStyle(button.element).height is &quot;44px&quot;
</ins><span class="cx"> 
</span><span class="cx"> ForwardButton
</span><del>-PASS style.left is &quot;127px&quot;
-PASS style.webkitMaskPositionY is &quot;17px&quot;
-PASS style.height is &quot;44px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;17px&quot;
+PASS getComputedStyle(button.element).left is &quot;127px&quot;
+PASS getComputedStyle(button.element).height is &quot;44px&quot;
</ins><span class="cx"> 
</span><span class="cx"> AirplayButton
</span><del>-PASS style.left is &quot;12px&quot;
-PASS style.webkitMaskPositionY is &quot;18px&quot;
-PASS style.height is &quot;44px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;18px&quot;
+PASS getComputedStyle(button.element).left is &quot;12px&quot;
+PASS getComputedStyle(button.element).height is &quot;44px&quot;
</ins><span class="cx"> 
</span><span class="cx"> PiPButton
</span><del>-PASS style.left is &quot;44px&quot;
-PASS style.webkitMaskPositionY is &quot;18px&quot;
-PASS style.height is &quot;44px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;18px&quot;
+PASS getComputedStyle(button.element).left is &quot;44px&quot;
+PASS getComputedStyle(button.element).height is &quot;44px&quot;
</ins><span class="cx"> 
</span><span class="cx"> TracksButton
</span><del>-PASS style.left is &quot;79px&quot;
-PASS style.webkitMaskPositionY is &quot;18px&quot;
-PASS style.height is &quot;44px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;18px&quot;
+PASS getComputedStyle(button.element).left is &quot;79px&quot;
+PASS getComputedStyle(button.element).height is &quot;44px&quot;
</ins><span class="cx"> 
</span><span class="cx"> FullscreenButton
</span><del>-PASS style.left is &quot;111px&quot;
-PASS style.webkitMaskPositionY is &quot;18px&quot;
-PASS style.height is &quot;44px&quot;
-
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;18px&quot;
+PASS getComputedStyle(button.element).left is &quot;111px&quot;
+PASS getComputedStyle(button.element).height is &quot;44px&quot;
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx"> 
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosfullscreenmediacontrolsmacosfullscreenmediacontrolsbuttonsstyleshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles.html (213260 => 213261)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles.html        2017-03-02 04:34:33 UTC (rev 213260)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles.html        2017-03-02 04:37:55 UTC (rev 213261)
</span><span class="lines">@@ -21,23 +21,22 @@
</span><span class="cx">     [mediaControls.fullscreenButton, 111, 18]
</span><span class="cx"> ];
</span><span class="cx"> 
</span><del>-let style;
-shouldBecomeEqual(&quot;buttonPositions.some(buttonPosition =&gt; buttonPosition[0].element.style.width == '')&quot;, &quot;false&quot;, () =&gt; {
-    requestAnimationFrame(() =&gt; {
-        for (let [button, x, y, width] of buttonPositions) {
-            debug(&quot;&quot;);
-            style = window.getComputedStyle(button.element);
-            debug(button.constructor.name);
-            shouldBeEqualToString(&quot;style.left&quot;, `${x}px`);
-            shouldBeEqualToString(&quot;style.webkitMaskPositionY&quot;, `${y}px`);
-            shouldBeEqualToString(&quot;style.height&quot;, &quot;44px&quot;);
-        }
-
-        debug(&quot;&quot;);
-        mediaControls.element.remove();
-        finishMediaControlsTest();
</del><ins>+let button, x, y;
+(function testButton(index)
+{
+    [button, x, y, width] = buttonPositions[index];
+    debug(&quot;&quot;);
+    debug(button.constructor.name);
+    shouldBecomeEqualToString(&quot;getComputedStyle(button.element).webkitMaskPositionY&quot;, `${y}px`, () =&gt; {
+        shouldBeEqualToString(&quot;getComputedStyle(button.element).left&quot;, `${x}px`);
+        shouldBeEqualToString(&quot;getComputedStyle(button.element).height&quot;, &quot;44px&quot;);
+        if (index === buttonPositions.length - 1) {
+            mediaControls.element.remove();
+            finishJSTest();
+        } else
+            testButton(index + 1);
</ins><span class="cx">     });
</span><del>-});
</del><ins>+})(0);
</ins><span class="cx"> 
</span><span class="cx"> &lt;/script&gt;
</span><span class="cx"> &lt;script src=&quot;../../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsbuttonsstylesexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt (213260 => 213261)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt        2017-03-02 04:34:33 UTC (rev 213260)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt        2017-03-02 04:37:55 UTC (rev 213261)
</span><span class="lines">@@ -3,62 +3,62 @@
</span><span class="cx"> On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
</span><span class="cx"> 
</span><span class="cx"> 
</span><ins>+
</ins><span class="cx"> PlayPauseButton
</span><del>-PASS rgba(style.backgroundColor).r is 255
-PASS rgba(style.backgroundColor).g is 255
-PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
-PASS style.height is &quot;50px&quot;
-PASS style.webkitMaskPositionY is &quot;12px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;12px&quot;
+PASS rgba(getComputedStyle(button.element).backgroundColor).r is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).g is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).b is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).a is within 0.001 of 0.45
+PASS getComputedStyle(button.element).height is &quot;50px&quot;
</ins><span class="cx"> 
</span><span class="cx"> SkipBackButton
</span><del>-PASS rgba(style.backgroundColor).r is 255
-PASS rgba(style.backgroundColor).g is 255
-PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
-PASS style.height is &quot;50px&quot;
-PASS style.webkitMaskPositionY is &quot;10px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;10px&quot;
+PASS rgba(getComputedStyle(button.element).backgroundColor).r is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).g is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).b is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).a is within 0.001 of 0.45
+PASS getComputedStyle(button.element).height is &quot;50px&quot;
</ins><span class="cx"> 
</span><span class="cx"> MuteButton
</span><del>-PASS rgba(style.backgroundColor).r is 255
-PASS rgba(style.backgroundColor).g is 255
-PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
-PASS style.height is &quot;50px&quot;
-PASS style.webkitMaskPositionY is &quot;10px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;10px&quot;
+PASS rgba(getComputedStyle(button.element).backgroundColor).r is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).g is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).b is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).a is within 0.001 of 0.45
+PASS getComputedStyle(button.element).height is &quot;50px&quot;
</ins><span class="cx"> 
</span><span class="cx"> AirplayButton
</span><del>-PASS rgba(style.backgroundColor).r is 255
-PASS rgba(style.backgroundColor).g is 255
-PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
-PASS style.height is &quot;50px&quot;
-PASS style.webkitMaskPositionY is &quot;13px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;13px&quot;
+PASS rgba(getComputedStyle(button.element).backgroundColor).r is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).g is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).b is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).a is within 0.001 of 0.45
+PASS getComputedStyle(button.element).height is &quot;50px&quot;
</ins><span class="cx"> 
</span><span class="cx"> PiPButton
</span><del>-PASS rgba(style.backgroundColor).r is 255
-PASS rgba(style.backgroundColor).g is 255
-PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
-PASS style.height is &quot;50px&quot;
-PASS style.webkitMaskPositionY is &quot;13px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;13px&quot;
+PASS rgba(getComputedStyle(button.element).backgroundColor).r is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).g is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).b is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).a is within 0.001 of 0.45
+PASS getComputedStyle(button.element).height is &quot;50px&quot;
</ins><span class="cx"> 
</span><span class="cx"> TracksButton
</span><del>-PASS rgba(style.backgroundColor).r is 255
-PASS rgba(style.backgroundColor).g is 255
-PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
-PASS style.height is &quot;50px&quot;
-PASS style.webkitMaskPositionY is &quot;15px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;15px&quot;
+PASS rgba(getComputedStyle(button.element).backgroundColor).r is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).g is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).b is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).a is within 0.001 of 0.45
+PASS getComputedStyle(button.element).height is &quot;50px&quot;
</ins><span class="cx"> 
</span><span class="cx"> FullscreenButton
</span><del>-PASS rgba(style.backgroundColor).r is 255
-PASS rgba(style.backgroundColor).g is 255
-PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
-PASS style.height is &quot;50px&quot;
-PASS style.webkitMaskPositionY is &quot;13px&quot;
-
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;13px&quot;
+PASS rgba(getComputedStyle(button.element).backgroundColor).r is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).g is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).b is 255
+PASS rgba(getComputedStyle(button.element).backgroundColor).a is within 0.001 of 0.45
+PASS getComputedStyle(button.element).height is &quot;50px&quot;
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx"> 
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsbuttonsstyleshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html (213260 => 213261)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html        2017-03-02 04:34:33 UTC (rev 213260)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html        2017-03-02 04:37:55 UTC (rev 213261)
</span><span class="lines">@@ -9,6 +9,7 @@
</span><span class="cx"> window.jsTestIsAsync = true;
</span><span class="cx"> 
</span><span class="cx"> const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 300 });
</span><ins>+document.body.appendChild(mediaControls.element);
</ins><span class="cx"> 
</span><span class="cx"> const buttonPositions = [
</span><span class="cx">     [mediaControls.playPauseButton, 12],
</span><span class="lines">@@ -20,27 +21,23 @@
</span><span class="cx">     [mediaControls.fullscreenButton, 13]
</span><span class="cx"> ];
</span><span class="cx"> 
</span><del>-let style;
-scheduler.frameDidFire = function()
</del><ins>+let button, y;
+(function testButton(index)
</ins><span class="cx"> {
</span><del>-    document.body.appendChild(mediaControls.element);
</del><ins>+    [button, y] = buttonPositions[index];
+    debug(&quot;&quot;);
+    debug(button.constructor.name);
+    shouldBecomeEqualToString(&quot;getComputedStyle(button.element).webkitMaskPositionY&quot;, `${y}px`, () =&gt; {
+        shouldBeEqualToRGBAColor(&quot;getComputedStyle(button.element).backgroundColor&quot;, &quot;rgba(255, 255, 255, 0.45)&quot;);
+        shouldBeEqualToString(&quot;getComputedStyle(button.element).height&quot;, &quot;50px&quot;);
+        if (index === buttonPositions.length - 1) {
+            mediaControls.element.remove();
+            finishJSTest();
+        } else
+            testButton(index + 1);
+    });
+})(0);
</ins><span class="cx"> 
</span><del>-    if (buttonPositions.some(buttonPosition =&gt; buttonPosition[0].width == 0))
-        return;
-
-    for (let [button, y] of buttonPositions) {
-        style = window.getComputedStyle(button.element);
-        debug(button.constructor.name);
-        shouldBeEqualToRGBAColor(&quot;style.backgroundColor&quot;, &quot;rgba(255, 255, 255, 0.45)&quot;);
-        shouldBeEqualToString(&quot;style.height&quot;, &quot;50px&quot;);
-        shouldBeEqualToString(&quot;style.webkitMaskPositionY&quot;, `${y}px`);
-        debug(&quot;&quot;);
-    }
-
-    mediaControls.element.remove();
-    finishMediaControlsTest();
-};
-
</del><span class="cx"> &lt;/script&gt;
</span><span class="cx"> &lt;script src=&quot;../../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;
</span><span class="cx"> &lt;/body&gt;
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolscompactbuttonsstylesexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles-expected.txt (213260 => 213261)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles-expected.txt        2017-03-02 04:34:33 UTC (rev 213260)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles-expected.txt        2017-03-02 04:37:55 UTC (rev 213261)
</span><span class="lines">@@ -3,22 +3,22 @@
</span><span class="cx"> On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
</span><span class="cx"> 
</span><span class="cx"> 
</span><ins>+
</ins><span class="cx"> PlayPauseButton
</span><del>-PASS style.height is &quot;25px&quot;
-PASS style.webkitMaskPositionY is &quot;6px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;6px&quot;
+PASS getComputedStyle(button.element).height is &quot;25px&quot;
</ins><span class="cx"> 
</span><span class="cx"> SkipBackButton
</span><del>-PASS style.height is &quot;25px&quot;
-PASS style.webkitMaskPositionY is &quot;6px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;6px&quot;
+PASS getComputedStyle(button.element).height is &quot;25px&quot;
</ins><span class="cx"> 
</span><span class="cx"> MuteButton
</span><del>-PASS style.height is &quot;25px&quot;
-PASS style.webkitMaskPositionY is &quot;6px&quot;
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;6px&quot;
+PASS getComputedStyle(button.element).height is &quot;25px&quot;
</ins><span class="cx"> 
</span><span class="cx"> FullscreenButton
</span><del>-PASS style.height is &quot;25px&quot;
-PASS style.webkitMaskPositionY is &quot;6.5px&quot;
-
</del><ins>+PASS getComputedStyle(button.element).webkitMaskPositionY became &quot;6.5px&quot;
+PASS getComputedStyle(button.element).height is &quot;25px&quot;
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx"> 
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolscompactbuttonsstyleshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html (213260 => 213261)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html        2017-03-02 04:34:33 UTC (rev 213260)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html        2017-03-02 04:37:55 UTC (rev 213261)
</span><span class="lines">@@ -10,6 +10,7 @@
</span><span class="cx"> 
</span><span class="cx"> const mediaControls = new MacOSInlineMediaControls({ width: 240 });
</span><span class="cx"> mediaControls.layoutTraits = LayoutTraits.macOS | LayoutTraits.Compact;
</span><ins>+document.body.appendChild(mediaControls.element);
</ins><span class="cx"> 
</span><span class="cx"> const buttonPositions = [
</span><span class="cx">     [mediaControls.playPauseButton, 6],
</span><span class="lines">@@ -18,26 +19,22 @@
</span><span class="cx">     [mediaControls.fullscreenButton, 6.5]
</span><span class="cx"> ];
</span><span class="cx"> 
</span><del>-let style;
-scheduler.frameDidFire = function()
</del><ins>+let button, y;
+(function testButton(index)
</ins><span class="cx"> {
</span><del>-    document.body.appendChild(mediaControls.element);
</del><ins>+    [button, y] = buttonPositions[index];
+    debug(&quot;&quot;);
+    debug(button.constructor.name);
+    shouldBecomeEqualToString(&quot;getComputedStyle(button.element).webkitMaskPositionY&quot;, `${y}px`, () =&gt; {
+        shouldBeEqualToString(&quot;getComputedStyle(button.element).height&quot;, &quot;25px&quot;);
+        if (index === buttonPositions.length - 1) {
+            mediaControls.element.remove();
+            finishJSTest();
+        } else
+            testButton(index + 1);
+    });
+})(0);
</ins><span class="cx"> 
</span><del>-    if (buttonPositions.some(buttonPosition =&gt; buttonPosition[0].width == 0))
-        return;
-
-    for (let [button, y] of buttonPositions) {
-        style = window.getComputedStyle(button.element);
-        debug(button.constructor.name);
-        shouldBeEqualToString(&quot;style.height&quot;, &quot;25px&quot;);
-        shouldBeEqualToString(&quot;style.webkitMaskPositionY&quot;, `${y}px`);
-        debug(&quot;&quot;);
-    }
-
-    mediaControls.element.remove();
-    finishMediaControlsTest();
-};
-
</del><span class="cx"> &lt;/script&gt;
</span><span class="cx"> &lt;script src=&quot;../../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;
</span><span class="cx"> &lt;/body&gt;
</span></span></pre>
</div>
</div>

</body>
</html>