<!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>[192622] 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/192622">192622</a></dd>
<dt>Author</dt> <dd>jonlee@apple.com</dd>
<dt>Date</dt> <dd>2015-11-19 02:06:21 -0800 (Thu, 19 Nov 2015)</dd>
</dl>

<h3>Log Message</h3>
<pre>Add a test for media control dropoff
https://bugs.webkit.org/show_bug.cgi?id=151287
rdar://problem/23544666

Reviewed by Dean Jackson.

Source/WebCore:

Test: media/controls/inline-elements-dropoff-order.html

* Modules/mediacontrols/mediaControlsApple.css:
(audio::-webkit-media-controls-timeline-container.dropped): Override the
display:none since we want the container to remain visible but acting
as a flexible width space to push the other elements to the ends of the
inline flexbox. We will want to refactor the CSS rules so that all of the
components in the timeline are keyed off of the container's dropped class
rather than having each individual component have that class attached.
(audio::-webkit-media-controls-panel.hidden): Deleted. Consolidate a
couple rules.
* Modules/mediacontrols/mediaControlsApple.js:
(Controller.prototype.updateLayoutForDisplayedWidth): Also attach the
&quot;dropped&quot; class on the timeline box. Add the captions button for reporting
media control state.
* testing/Internals.cpp:
(WebCore::Internals::setMockMediaPlaybackTargetPickerState): Extend this to
also take &quot;DeviceNotAvailable&quot; to update the mock device's availability.

* testing/Internals.cpp: Update to use a reference to Page.
(WebCore::Internals::resetToConsistentState): Reset mock enabled setting for
each test.
* testing/Internals.h:
* testing/js/WebCoreTestSupport.cpp:
(WebCoreTestSupport::resetInternalsObject): Update to use a reference to Page.

LayoutTests:

The test takes a video element and resizes it to multiple widths. It
checks for the existence of the dropped or hidden class on each of the
media controls. The tests are run twice; once with wireless target
availability, and once without. If the platform does not support wireless
playback, it only goes through the tests once.

Test assumes that setMockMediaPlaybackTargetPickerEnabled is set to true at the beginning
of the test.

* media/controls/controls-test-helpers.js:
(ControlsTest.prototype.setup): Create the console box first before
checking to see the testRunner is available so that the failure
message appears when trying to run the test manually.
* media/controls/inline-elements-dropoff-order-expected.txt: Added.
* media/controls/inline-elements-dropoff-order.html: Added.
* platform/mac-mavericks/media/controls/inline-elements-dropoff-order-expected.txt: Added.
* platform/mac-yosemite/media/controls/inline-elements-dropoff-order-expected.txt: Added.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsmediacontrolscontrolstesthelpersjs">trunk/LayoutTests/media/controls/controls-test-helpers.js</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="#trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js</a></li>
<li><a href="#trunkSourceWebCoretestingInternalscpp">trunk/Source/WebCore/testing/Internals.cpp</a></li>
<li><a href="#trunkSourceWebCoretestingInternalsh">trunk/Source/WebCore/testing/Internals.h</a></li>
<li><a href="#trunkSourceWebCoretestingjsWebCoreTestSupportcpp">trunk/Source/WebCore/testing/js/WebCoreTestSupport.cpp</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsmediacontrolsinlineelementsdropofforderexpectedtxt">trunk/LayoutTests/media/controls/inline-elements-dropoff-order-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediacontrolsinlineelementsdropofforderhtml">trunk/LayoutTests/media/controls/inline-elements-dropoff-order.html</a></li>
<li>trunk/LayoutTests/platform/mac-mavericks/media/controls/</li>
<li><a href="#trunkLayoutTestsplatformmacmavericksmediacontrolsinlineelementsdropofforderexpectedtxt">trunk/LayoutTests/platform/mac-mavericks/media/controls/inline-elements-dropoff-order-expected.txt</a></li>
<li>trunk/LayoutTests/platform/mac-yosemite/media/</li>
<li>trunk/LayoutTests/platform/mac-yosemite/media/controls/</li>
<li><a href="#trunkLayoutTestsplatformmacyosemitemediacontrolsinlineelementsdropofforderexpectedtxt">trunk/LayoutTests/platform/mac-yosemite/media/controls/inline-elements-dropoff-order-expected.txt</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (192621 => 192622)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2015-11-19 09:21:47 UTC (rev 192621)
+++ trunk/LayoutTests/ChangeLog        2015-11-19 10:06:21 UTC (rev 192622)
</span><span class="lines">@@ -1,3 +1,29 @@
</span><ins>+2015-11-19  Jon Lee  &lt;jonlee@apple.com&gt;
+
+        Add a test for media control dropoff
+        https://bugs.webkit.org/show_bug.cgi?id=151287
+        rdar://problem/23544666
+
+        Reviewed by Dean Jackson.
+
+        The test takes a video element and resizes it to multiple widths. It
+        checks for the existence of the dropped or hidden class on each of the
+        media controls. The tests are run twice; once with wireless target
+        availability, and once without. If the platform does not support wireless
+        playback, it only goes through the tests once.
+
+        Test assumes that setMockMediaPlaybackTargetPickerEnabled is set to true at the beginning
+        of the test.
+
+        * media/controls/controls-test-helpers.js:
+        (ControlsTest.prototype.setup): Create the console box first before
+        checking to see the testRunner is available so that the failure
+        message appears when trying to run the test manually.
+        * media/controls/inline-elements-dropoff-order-expected.txt: Added.
+        * media/controls/inline-elements-dropoff-order.html: Added.
+        * platform/mac-mavericks/media/controls/inline-elements-dropoff-order-expected.txt: Added.
+        * platform/mac-yosemite/media/controls/inline-elements-dropoff-order-expected.txt: Added.
+
</ins><span class="cx"> 2015-11-19  Xabier Rodriguez Calvar  &lt;calvaris@igalia.com&gt;
</span><span class="cx"> 
</span><span class="cx">         [Streams API] Implement IsReadableStreamDisturbed according to spec
</span></span></pre></div>
<a id="trunkLayoutTestsmediacontrolscontrolstesthelpersjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/controls/controls-test-helpers.js (192621 => 192622)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/controls/controls-test-helpers.js        2015-11-19 09:21:47 UTC (rev 192621)
+++ trunk/LayoutTests/media/controls/controls-test-helpers.js        2015-11-19 10:06:21 UTC (rev 192622)
</span><span class="lines">@@ -87,15 +87,15 @@
</span><span class="cx"> 
</span><span class="cx">     setup()
</span><span class="cx">     {
</span><ins>+        this.console = document.createElement(&quot;div&quot;);
+        this.console.className = &quot;console&quot;;
+        document.body.appendChild(this.console);
+
</ins><span class="cx">         if (!window.testRunner) {
</span><span class="cx">             this.logFailure(&quot;Test requires DRT.&quot;);
</span><span class="cx">             return false;
</span><span class="cx">         }
</span><span class="cx"> 
</span><del>-        this.console = document.createElement(&quot;div&quot;);
-        this.console.className = &quot;console&quot;;
-        document.body.appendChild(this.console);
-
</del><span class="cx">         this.media = document.querySelector(&quot;video&quot;);
</span><span class="cx"> 
</span><span class="cx">         if (!this.media) {
</span></span></pre></div>
<a id="trunkLayoutTestsmediacontrolsinlineelementsdropofforderexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/controls/inline-elements-dropoff-order-expected.txt (0 => 192622)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/controls/inline-elements-dropoff-order-expected.txt                                (rev 0)
+++ trunk/LayoutTests/media/controls/inline-elements-dropoff-order-expected.txt        2015-11-19 10:06:21 UTC (rev 192622)
</span><span class="lines">@@ -0,0 +1,148 @@
</span><ins>+This tests that elements in the inline controls drop off when width is restricted, and are in the right place. It also tests that the wireless picker is hidden when no routes are available.
+
+This test only runs in run-webkit-tests!
+
+
+EVENT: canplaythrough
+PASS: We are using the apple idiom
+
+
+Without wireless target availability
+
+
+Testing video at width 310px
+
+PASS: Play Button is visible
+PASS: Rewind Button is visible
+PASS: Timeline Box is visible
+PASS: Mute Box is visible
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is visible
+PASS: Fullscreen Button is visible
+
+Testing video at width 160px
+
+PASS: Play Button is visible
+PASS: Rewind Button is visible
+PASS: Timeline Box is dropped
+PASS: Mute Box is visible
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is visible
+PASS: Fullscreen Button is visible
+
+Testing video at width 130px
+
+PASS: Play Button is visible
+PASS: Rewind Button is visible
+PASS: Timeline Box is dropped
+PASS: Mute Box is visible
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is dropped
+PASS: Fullscreen Button is visible
+
+Testing video at width 100px
+
+PASS: Play Button is visible
+PASS: Rewind Button is visible
+PASS: Timeline Box is dropped
+PASS: Mute Box is dropped
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is dropped
+PASS: Fullscreen Button is visible
+
+Testing video at width 70px
+
+PASS: Play Button is visible
+PASS: Rewind Button is dropped
+PASS: Timeline Box is dropped
+PASS: Mute Box is dropped
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is dropped
+PASS: Fullscreen Button is visible
+
+Testing video at width 30px
+
+PASS: Play Button is visible
+PASS: Rewind Button is dropped
+PASS: Timeline Box is dropped
+PASS: Mute Box is dropped
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is dropped
+PASS: Fullscreen Button is dropped
+
+
+With wireless target availability
+
+
+Testing video at width 350px
+
+PASS: Play Button is visible
+PASS: Rewind Button is visible
+PASS: Timeline Box is visible
+PASS: Mute Box is visible
+PASS: AppleTV Device Picker is visible
+PASS: Captions Button is visible
+PASS: Fullscreen Button is visible
+
+Testing video at width 200px
+
+PASS: Play Button is visible
+PASS: Rewind Button is visible
+PASS: Timeline Box is dropped
+PASS: Mute Box is visible
+PASS: AppleTV Device Picker is visible
+PASS: Captions Button is visible
+PASS: Fullscreen Button is visible
+
+Testing video at width 160px
+
+PASS: Play Button is visible
+PASS: Rewind Button is visible
+PASS: Timeline Box is dropped
+PASS: Mute Box is visible
+PASS: AppleTV Device Picker is dropped
+PASS: Captions Button is visible
+PASS: Fullscreen Button is visible
+
+Testing video at width 130px
+
+PASS: Play Button is visible
+PASS: Rewind Button is visible
+PASS: Timeline Box is dropped
+PASS: Mute Box is visible
+PASS: AppleTV Device Picker is dropped
+PASS: Captions Button is dropped
+PASS: Fullscreen Button is visible
+
+Testing video at width 100px
+
+PASS: Play Button is visible
+PASS: Rewind Button is visible
+PASS: Timeline Box is dropped
+PASS: Mute Box is dropped
+PASS: AppleTV Device Picker is dropped
+PASS: Captions Button is dropped
+PASS: Fullscreen Button is visible
+
+Testing video at width 70px
+
+PASS: Play Button is visible
+PASS: Rewind Button is dropped
+PASS: Timeline Box is dropped
+PASS: Mute Box is dropped
+PASS: AppleTV Device Picker is dropped
+PASS: Captions Button is dropped
+PASS: Fullscreen Button is visible
+
+Testing video at width 30px
+
+PASS: Play Button is visible
+PASS: Rewind Button is dropped
+PASS: Timeline Box is dropped
+PASS: Mute Box is dropped
+PASS: AppleTV Device Picker is dropped
+PASS: Captions Button is dropped
+PASS: Fullscreen Button is dropped
+
+Testing finished.
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediacontrolsinlineelementsdropofforderhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/controls/inline-elements-dropoff-order.html (0 => 192622)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/controls/inline-elements-dropoff-order.html                                (rev 0)
+++ trunk/LayoutTests/media/controls/inline-elements-dropoff-order.html        2015-11-19 10:06:21 UTC (rev 192622)
</span><span class="lines">@@ -0,0 +1,184 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+    &lt;head&gt;
+        &lt;script src=&quot;../media-file.js&quot;&gt;&lt;/script&gt;
+        &lt;script src=&quot;controls-test-helpers.js&quot;&gt;&lt;/script&gt;
+        &lt;script&gt;
+            var tester = new ControlsTest(&quot;../content/audio-describes-video&quot;)
+                .whenReady(setup)
+                .start();
+            var supportsWirelessTargets = !!internals.setMockMediaPlaybackTargetPickerEnabled;
+            var runNextStep, currentState, elementNames, testWidthsAndExpectedToBeDropped, testsFinished;
+
+            function setup()
+            {
+                currentState = tester.currentState;
+                tester.test(&quot;We are using the apple idiom&quot;)
+                    .value(currentState.idiom)
+                    .isEqualTo(&quot;apple&quot;);
+
+                if (supportsWirelessTargets)
+                    internals.setMockMediaPlaybackTargetPickerState(&quot;Wireless playback target&quot;, &quot;DeviceNotAvailable&quot;);
+
+                runNextStep = runNoAirPlayTests;
+
+                tester.media.addEventListener('webkitplaybacktargetavailabilitychanged', function() {
+                    setTimeout(runNextStep, 0);
+                });
+
+                elementNames = [&quot;Play Button&quot;, &quot;Rewind Button&quot;, &quot;Timeline Box&quot;, &quot;Mute Box&quot;, &quot;AppleTV Device Picker&quot;, &quot;Captions Button&quot;, &quot;Fullscreen Button&quot;];
+
+                if (!supportsWirelessTargets)
+                    setTimeout(runNextStep, 0);
+            }
+
+            function runNoAirPlayTests() {
+                tester.logBlankLine();
+                tester.startNewSection(&quot;Without wireless target availability&quot;);
+                testWidthsAndExpectedToBeDropped = [
+                    {
+                        width: 310,
+                        expectedToBeDropped: [],
+                        expectedToBeHidden: [&quot;AppleTV Device Picker&quot;]
+                    },
+                    {
+                        width: 160,
+                        expectedToBeDropped: [&quot;Timeline Box&quot;],
+                        expectedToBeHidden: [&quot;AppleTV Device Picker&quot;]
+                    },
+                    {
+                        width: 130,
+                        expectedToBeDropped: [&quot;Timeline Box&quot;, &quot;Captions Button&quot;],
+                        expectedToBeHidden: [&quot;AppleTV Device Picker&quot;]
+                    },
+                    {
+                        width: 100,
+                        expectedToBeDropped: [&quot;Timeline Box&quot;, &quot;Captions Button&quot;, &quot;Mute Box&quot;],
+                        expectedToBeHidden: [&quot;AppleTV Device Picker&quot;]
+                    },
+                    {
+                        width: 70,
+                        expectedToBeDropped: [&quot;Timeline Box&quot;, &quot;Captions Button&quot;, &quot;Mute Box&quot;, &quot;Rewind Button&quot;],
+                        expectedToBeHidden: [&quot;AppleTV Device Picker&quot;]
+                    },
+                    {
+                        width: 30,
+                        expectedToBeDropped: [&quot;Timeline Box&quot;, &quot;Captions Button&quot;, &quot;Mute Box&quot;, &quot;Rewind Button&quot;, &quot;Fullscreen Button&quot;],
+                        expectedToBeHidden: [&quot;AppleTV Device Picker&quot;]
+                    },
+                ];
+                testsFinished = function() {
+                    if (supportsWirelessTargets)
+                        runAirPlayTests();
+                    else
+                        tester.end();
+                };
+                setTimeout(runNextTest, 0);
+            }
+
+            function runAirPlayTests() {
+                tester.logBlankLine();
+                tester.startNewSection(&quot;With wireless target availability&quot;);
+
+                testWidthsAndExpectedToBeDropped = [
+                    {
+                        width: 350,
+                        expectedToBeDropped: [],
+                        expectedToBeHidden: []
+                    },
+                    {
+                        width: 200,
+                        expectedToBeDropped: [&quot;Timeline Box&quot;],
+                        expectedToBeHidden: []
+                    },
+                    {
+                        width: 160,
+                        expectedToBeDropped: [&quot;Timeline Box&quot;, &quot;AppleTV Device Picker&quot;],
+                        expectedToBeHidden: []
+                    },
+                    {
+                        width: 130,
+                        expectedToBeDropped: [&quot;Timeline Box&quot;, &quot;AppleTV Device Picker&quot;, &quot;Captions Button&quot;],
+                        expectedToBeHidden: []
+                    },
+                    {
+                        width: 100,
+                        expectedToBeDropped: [&quot;Timeline Box&quot;, &quot;AppleTV Device Picker&quot;, &quot;Captions Button&quot;, &quot;Mute Box&quot;],
+                        expectedToBeHidden: []
+                    },
+                    {
+                        width: 70,
+                        expectedToBeDropped: [&quot;Timeline Box&quot;, &quot;AppleTV Device Picker&quot;, &quot;Captions Button&quot;, &quot;Mute Box&quot;, &quot;Rewind Button&quot;],
+                        expectedToBeHidden: []
+                    },
+                    {
+                        width: 30,
+                        expectedToBeDropped: [&quot;Timeline Box&quot;, &quot;AppleTV Device Picker&quot;, &quot;Captions Button&quot;, &quot;Mute Box&quot;, &quot;Rewind Button&quot;, &quot;Fullscreen Button&quot;],
+                        expectedToBeHidden: []
+                    },
+                ];
+
+                internals.setMockMediaPlaybackTargetPickerState(&quot;Wireless playback target&quot;, &quot;DeviceAvailable&quot;);
+                // Start running the tests after we are told availability has changed.
+                runNextStep = runNextTest;
+
+                testsFinished = function() {
+                    tester.end();
+                };
+            }
+
+            function runNextTest() {
+                if (!testWidthsAndExpectedToBeDropped.length) {
+                    testsFinished();
+                    return;
+                }
+
+                nextTest = testWidthsAndExpectedToBeDropped.shift();
+                tester.media.style.width = nextTest.width + &quot;px&quot;;
+                setTimeout(testDroppedInlineElements, 0);
+            }
+
+            function testDroppedInlineElements() {
+                tester.startNewSection(`Testing video at width ${tester.media.style.width}`);
+                currentState = tester.currentState;
+                elementNames.forEach(function (name) {
+                    var elementState = tester.stateForControlsElement(name);
+
+                    function isElementInArray(elementName) {
+                        return elementName == name;
+                    }
+
+                    var isDropped = elementState.className.indexOf(&quot;dropped&quot;) &gt; -1;
+                    var isHidden = elementState.className.indexOf(&quot;hidden&quot;) &gt; -1;
+                    var expectedToBeDropped = nextTest.expectedToBeDropped.find(isElementInArray);
+                    var expectedToBeHidden = nextTest.expectedToBeHidden.find(isElementInArray);
+                    if (expectedToBeHidden) {
+                        tester.test(`${name} is hidden`)
+                            .value(isHidden)
+                            .isTrue();
+                    } else if (expectedToBeDropped) {
+                        tester.test(`${name} is dropped`)
+                            .value(isDropped)
+                            .isTrue();
+                    } else {
+                        tester.test(`${name} is visible`)
+                            .value(isDropped)
+                            .isFalse();
+                    }
+                });
+
+                setTimeout(runNextTest, 0);
+            }
+
+        &lt;/script&gt;
+        &lt;style&gt;
+            body { margin-left: 0; }
+            video { width: 310px; height: 80px; }
+        &lt;/style&gt;
+    &lt;/head&gt;
+    &lt;body&gt;
+        &lt;p&gt;This tests that elements in the inline controls drop off when width is restricted, and are in the right place. It also tests that the wireless picker is hidden when no routes are available.&lt;/p&gt;
+        &lt;p&gt;This test only runs in run-webkit-tests!&lt;/p&gt;
+        &lt;video controls&gt;&lt;/video&gt;
+    &lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsplatformmacmavericksmediacontrolsinlineelementsdropofforderexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/platform/mac-mavericks/media/controls/inline-elements-dropoff-order-expected.txt (0 => 192622)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/mac-mavericks/media/controls/inline-elements-dropoff-order-expected.txt                                (rev 0)
+++ trunk/LayoutTests/platform/mac-mavericks/media/controls/inline-elements-dropoff-order-expected.txt        2015-11-19 10:06:21 UTC (rev 192622)
</span><span class="lines">@@ -0,0 +1,74 @@
</span><ins>+This tests that elements in the inline controls drop off when width is restricted, and are in the right place. It also tests that the wireless picker is hidden when no routes are available.
+
+This test only runs in run-webkit-tests!
+
+
+EVENT: canplaythrough
+PASS: We are using the apple idiom
+
+
+Without wireless target availability
+
+
+Testing video at width 310px
+
+PASS: Play Button is visible
+PASS: Rewind Button is visible
+PASS: Timeline Box is visible
+PASS: Mute Box is visible
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is visible
+PASS: Fullscreen Button is visible
+
+Testing video at width 160px
+
+PASS: Play Button is visible
+PASS: Rewind Button is visible
+PASS: Timeline Box is dropped
+PASS: Mute Box is visible
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is visible
+PASS: Fullscreen Button is visible
+
+Testing video at width 130px
+
+PASS: Play Button is visible
+PASS: Rewind Button is visible
+PASS: Timeline Box is dropped
+PASS: Mute Box is visible
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is dropped
+PASS: Fullscreen Button is visible
+
+Testing video at width 100px
+
+PASS: Play Button is visible
+PASS: Rewind Button is visible
+PASS: Timeline Box is dropped
+PASS: Mute Box is dropped
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is dropped
+PASS: Fullscreen Button is visible
+
+Testing video at width 70px
+
+PASS: Play Button is visible
+PASS: Rewind Button is dropped
+PASS: Timeline Box is dropped
+PASS: Mute Box is dropped
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is dropped
+PASS: Fullscreen Button is visible
+
+Testing video at width 30px
+
+PASS: Play Button is visible
+PASS: Rewind Button is dropped
+PASS: Timeline Box is dropped
+PASS: Mute Box is dropped
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is dropped
+PASS: Fullscreen Button is dropped
+
+Testing finished.
+
</ins></span></pre></div>
<a id="trunkLayoutTestsplatformmacyosemitemediacontrolsinlineelementsdropofforderexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/platform/mac-yosemite/media/controls/inline-elements-dropoff-order-expected.txt (0 => 192622)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/mac-yosemite/media/controls/inline-elements-dropoff-order-expected.txt                                (rev 0)
+++ trunk/LayoutTests/platform/mac-yosemite/media/controls/inline-elements-dropoff-order-expected.txt        2015-11-19 10:06:21 UTC (rev 192622)
</span><span class="lines">@@ -0,0 +1,74 @@
</span><ins>+This tests that elements in the inline controls drop off when width is restricted, and are in the right place. It also tests that the wireless picker is hidden when no routes are available.
+
+This test only runs in run-webkit-tests!
+
+
+EVENT: canplaythrough
+PASS: We are using the apple idiom
+
+
+Without wireless target availability
+
+
+Testing video at width 310px
+
+PASS: Play Button is visible
+PASS: Rewind Button is visible
+PASS: Timeline Box is visible
+PASS: Mute Box is visible
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is visible
+PASS: Fullscreen Button is visible
+
+Testing video at width 160px
+
+PASS: Play Button is visible
+PASS: Rewind Button is visible
+PASS: Timeline Box is dropped
+PASS: Mute Box is visible
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is visible
+PASS: Fullscreen Button is visible
+
+Testing video at width 130px
+
+PASS: Play Button is visible
+PASS: Rewind Button is visible
+PASS: Timeline Box is dropped
+PASS: Mute Box is visible
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is dropped
+PASS: Fullscreen Button is visible
+
+Testing video at width 100px
+
+PASS: Play Button is visible
+PASS: Rewind Button is visible
+PASS: Timeline Box is dropped
+PASS: Mute Box is dropped
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is dropped
+PASS: Fullscreen Button is visible
+
+Testing video at width 70px
+
+PASS: Play Button is visible
+PASS: Rewind Button is dropped
+PASS: Timeline Box is dropped
+PASS: Mute Box is dropped
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is dropped
+PASS: Fullscreen Button is visible
+
+Testing video at width 30px
+
+PASS: Play Button is visible
+PASS: Rewind Button is dropped
+PASS: Timeline Box is dropped
+PASS: Mute Box is dropped
+PASS: AppleTV Device Picker is hidden
+PASS: Captions Button is dropped
+PASS: Fullscreen Button is dropped
+
+Testing finished.
+
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (192621 => 192622)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2015-11-19 09:21:47 UTC (rev 192621)
+++ trunk/Source/WebCore/ChangeLog        2015-11-19 10:06:21 UTC (rev 192622)
</span><span class="lines">@@ -1,3 +1,37 @@
</span><ins>+2015-11-19  Jon Lee  &lt;jonlee@apple.com&gt;
+
+        Add a test for media control dropoff
+        https://bugs.webkit.org/show_bug.cgi?id=151287
+        rdar://problem/23544666
+
+        Reviewed by Dean Jackson.
+
+        Test: media/controls/inline-elements-dropoff-order.html
+
+        * Modules/mediacontrols/mediaControlsApple.css:
+        (audio::-webkit-media-controls-timeline-container.dropped): Override the
+        display:none since we want the container to remain visible but acting
+        as a flexible width space to push the other elements to the ends of the
+        inline flexbox. We will want to refactor the CSS rules so that all of the
+        components in the timeline are keyed off of the container's dropped class
+        rather than having each individual component have that class attached.
+        (audio::-webkit-media-controls-panel.hidden): Deleted. Consolidate a
+        couple rules.
+        * Modules/mediacontrols/mediaControlsApple.js:
+        (Controller.prototype.updateLayoutForDisplayedWidth): Also attach the
+        &quot;dropped&quot; class on the timeline box. Add the captions button for reporting
+        media control state.
+        * testing/Internals.cpp:
+        (WebCore::Internals::setMockMediaPlaybackTargetPickerState): Extend this to
+        also take &quot;DeviceNotAvailable&quot; to update the mock device's availability.
+
+        * testing/Internals.cpp: Update to use a reference to Page.
+        (WebCore::Internals::resetToConsistentState): Reset mock enabled setting for
+        each test.
+        * testing/Internals.h:
+        * testing/js/WebCoreTestSupport.cpp:
+        (WebCoreTestSupport::resetInternalsObject): Update to use a reference to Page.
+
</ins><span class="cx"> 2015-11-19  Xabier Rodriguez Calvar  &lt;calvaris@igalia.com&gt;
</span><span class="cx"> 
</span><span class="cx">         [Streams API] Implement IsReadableStreamDisturbed according to spec
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (192621 => 192622)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css        2015-11-19 09:21:47 UTC (rev 192621)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css        2015-11-19 10:06:21 UTC (rev 192622)
</span><span class="lines">@@ -619,6 +619,11 @@
</span><span class="cx">     padding: 0;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+video::-webkit-media-controls-timeline-container.dropped,
+audio::-webkit-media-controls-timeline-container.dropped {
+    display: -webkit-flex !important;
+}
+
</ins><span class="cx"> video::-webkit-media-controls-panel .thumbnail-track,
</span><span class="cx"> audio::-webkit-media-controls-panel .thumbnail-track {
</span><span class="cx">     position: relative;
</span><span class="lines">@@ -657,10 +662,7 @@
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> video::-webkit-media-controls-panel.hidden,
</span><del>-audio::-webkit-media-controls-panel.hidden {
-    display: none;
-}
-
</del><ins>+audio::-webkit-media-controls-panel.hidden,
</ins><span class="cx"> video::-webkit-media-controls-panel .hidden,
</span><span class="cx"> audio::-webkit-media-controls-panel .hidden,
</span><span class="cx"> video::-webkit-media-controls-panel .dropped,
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (192621 => 192622)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js        2015-11-19 09:21:47 UTC (rev 192621)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js        2015-11-19 10:06:21 UTC (rev 192622)
</span><span class="lines">@@ -1501,6 +1501,7 @@
</span><span class="cx"> 
</span><span class="cx">         // Check if there is enough room for the scrubber.
</span><span class="cx">         var shouldDropTimeline = (visibleWidth - visibleButtonWidth) &lt; this.MinimumTimelineWidth;
</span><ins>+        this.controls.timelineBox.classList.toggle(this.ClassNames.dropped, shouldDropTimeline);
</ins><span class="cx">         this.controls.timeline.classList.toggle(this.ClassNames.dropped, shouldDropTimeline);
</span><span class="cx">         this.controls.currentTime.classList.toggle(this.ClassNames.dropped, shouldDropTimeline);
</span><span class="cx">         this.controls.thumbnailTrack.classList.toggle(this.ClassNames.dropped, shouldDropTimeline);
</span><span class="lines">@@ -2132,6 +2133,10 @@
</span><span class="cx">                 object: this.controls.muteBox
</span><span class="cx">             },
</span><span class="cx">             {
</span><ins>+                name: &quot;Captions Button&quot;,
+                object: this.controls.captionButton
+            },
+            {
</ins><span class="cx">                 name: &quot;Fullscreen Button&quot;,
</span><span class="cx">                 object: this.controls.fullscreenButton
</span><span class="cx">             },
</span></span></pre></div>
<a id="trunkSourceWebCoretestingInternalscpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/testing/Internals.cpp (192621 => 192622)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/testing/Internals.cpp        2015-11-19 09:21:47 UTC (rev 192621)
+++ trunk/Source/WebCore/testing/Internals.cpp        2015-11-19 10:06:21 UTC (rev 192622)
</span><span class="lines">@@ -348,22 +348,20 @@
</span><span class="cx"> {
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-void Internals::resetToConsistentState(Page* page)
</del><ins>+void Internals::resetToConsistentState(Page&amp; page)
</ins><span class="cx"> {
</span><del>-    ASSERT(page);
</del><ins>+    page.setPageScaleFactor(1, IntPoint(0, 0));
+    page.setPagination(Pagination());
</ins><span class="cx"> 
</span><del>-    page-&gt;setPageScaleFactor(1, IntPoint(0, 0));
-    page-&gt;setPagination(Pagination());
-
-    page-&gt;setDefersLoading(false);
</del><ins>+    page.setDefersLoading(false);
</ins><span class="cx">     
</span><del>-    page-&gt;mainFrame().setTextZoomFactor(1.0f);
</del><ins>+    page.mainFrame().setTextZoomFactor(1.0f);
</ins><span class="cx">     
</span><del>-    FrameView* mainFrameView = page-&gt;mainFrame().view();
</del><ins>+    FrameView* mainFrameView = page.mainFrame().view();
</ins><span class="cx">     if (mainFrameView) {
</span><span class="cx">         mainFrameView-&gt;setHeaderHeight(0);
</span><span class="cx">         mainFrameView-&gt;setFooterHeight(0);
</span><del>-        page-&gt;setTopContentInset(0);
</del><ins>+        page.setTopContentInset(0);
</ins><span class="cx">         mainFrameView-&gt;setUseFixedLayout(false);
</span><span class="cx">         mainFrameView-&gt;setFixedLayoutSize(IntSize());
</span><span class="cx">     }
</span><span class="lines">@@ -371,16 +369,16 @@
</span><span class="cx">     TextRun::setAllowsRoundingHacks(false);
</span><span class="cx">     WebCore::overrideUserPreferredLanguages(Vector&lt;String&gt;());
</span><span class="cx">     WebCore::Settings::setUsesOverlayScrollbars(false);
</span><del>-    page-&gt;inspectorController().setProfilerEnabled(false);
</del><ins>+    page.inspectorController().setProfilerEnabled(false);
</ins><span class="cx"> #if ENABLE(VIDEO_TRACK)
</span><del>-    page-&gt;group().captionPreferences()-&gt;setCaptionsStyleSheetOverride(emptyString());
-    page-&gt;group().captionPreferences()-&gt;setTestingMode(false);
</del><ins>+    page.group().captionPreferences()-&gt;setCaptionsStyleSheetOverride(emptyString());
+    page.group().captionPreferences()-&gt;setTestingMode(false);
</ins><span class="cx"> #endif
</span><del>-    if (!page-&gt;mainFrame().editor().isContinuousSpellCheckingEnabled())
-        page-&gt;mainFrame().editor().toggleContinuousSpellChecking();
-    if (page-&gt;mainFrame().editor().isOverwriteModeEnabled())
-        page-&gt;mainFrame().editor().toggleOverwriteModeEnabled();
-    page-&gt;mainFrame().loader().clearTestingOverrides();
</del><ins>+    if (!page.mainFrame().editor().isContinuousSpellCheckingEnabled())
+        page.mainFrame().editor().toggleContinuousSpellChecking();
+    if (page.mainFrame().editor().isOverwriteModeEnabled())
+        page.mainFrame().editor().toggleOverwriteModeEnabled();
+    page.mainFrame().loader().clearTestingOverrides();
</ins><span class="cx">     ApplicationCacheStorage::singleton().setDefaultOriginQuota(ApplicationCacheStorage::noQuota());
</span><span class="cx"> #if ENABLE(VIDEO)
</span><span class="cx">     PlatformMediaSessionManager::sharedManager().resetRestrictions();
</span><span class="lines">@@ -397,7 +395,11 @@
</span><span class="cx">     MockContentFilterSettings::reset();
</span><span class="cx"> #endif
</span><span class="cx"> 
</span><del>-    page-&gt;setShowAllPlugins(false);
</del><ins>+#if ENABLE(WIRELESS_PLAYBACK_TARGET)
+    page.setMockMediaPlaybackTargetPickerEnabled(true);
+#endif
+
+    page.setShowAllPlugins(false);
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> Internals::Internals(Document* document)
</span><span class="lines">@@ -2976,6 +2978,8 @@
</span><span class="cx"> 
</span><span class="cx">     if (equalIgnoringCase(deviceState, &quot;DeviceAvailable&quot;))
</span><span class="cx">         state = MediaPlaybackTargetContext::OutputDeviceAvailable;
</span><ins>+    else if (equalIgnoringCase(deviceState, &quot;DeviceNotAvailable&quot;))
+        state = MediaPlaybackTargetContext::Unavailable;
</ins><span class="cx">     else {
</span><span class="cx">         ec = INVALID_ACCESS_ERR;
</span><span class="cx">         return;
</span></span></pre></div>
<a id="trunkSourceWebCoretestingInternalsh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/testing/Internals.h (192621 => 192622)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/testing/Internals.h        2015-11-19 09:21:47 UTC (rev 192621)
+++ trunk/Source/WebCore/testing/Internals.h        2015-11-19 10:06:21 UTC (rev 192622)
</span><span class="lines">@@ -81,7 +81,7 @@
</span><span class="cx">     static Ref&lt;Internals&gt; create(Document*);
</span><span class="cx">     virtual ~Internals();
</span><span class="cx"> 
</span><del>-    static void resetToConsistentState(Page*);
</del><ins>+    static void resetToConsistentState(Page&amp;);
</ins><span class="cx"> 
</span><span class="cx">     String elementRenderTreeAsText(Element*, ExceptionCode&amp;);
</span><span class="cx">     bool hasPausedImageAnimations(Element*, ExceptionCode&amp;);
</span></span></pre></div>
<a id="trunkSourceWebCoretestingjsWebCoreTestSupportcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/testing/js/WebCoreTestSupport.cpp (192621 => 192622)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/testing/js/WebCoreTestSupport.cpp        2015-11-19 09:21:47 UTC (rev 192621)
+++ trunk/Source/WebCore/testing/js/WebCoreTestSupport.cpp        2015-11-19 10:06:21 UTC (rev 192622)
</span><span class="lines">@@ -61,7 +61,7 @@
</span><span class="cx">     JSDOMGlobalObject* globalObject = jsCast&lt;JSDOMGlobalObject*&gt;(exec-&gt;lexicalGlobalObject());
</span><span class="cx">     ScriptExecutionContext* scriptContext = globalObject-&gt;scriptExecutionContext();
</span><span class="cx">     Page* page = downcast&lt;Document&gt;(scriptContext)-&gt;frame()-&gt;page();
</span><del>-    Internals::resetToConsistentState(page);
</del><ins>+    Internals::resetToConsistentState(*page);
</ins><span class="cx">     InternalSettings::from(page)-&gt;resetToConsistentState();
</span><span class="cx"> }
</span><span class="cx"> 
</span></span></pre>
</div>
</div>

</body>
</html>