<!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>[207024] 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/207024">207024</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-10-10 14:17:47 -0700 (Mon, 10 Oct 2016)</dd>
</dl>

<h3>Log Message</h3>
<pre>[Modern Media Controls] Placards
https://bugs.webkit.org/show_bug.cgi?id=163110
&lt;rdar://problem/28669342&gt;

Patch by Antoine Quint &lt;graouts@apple.com&gt; on 2016-10-10
Reviewed by Dean Jackson.

Source/WebCore:

Inline media controls need to display placards when the video is no longer playing inline,
such as when the video is playing fullscreen or via AirPlay. To that end, we introduce a
new Placard class and two subclasses for display during fullscreen or AirPlay playback.
Note that localization will be done in a later patch.

Tests: media/modern-media-controls/airplay-placard/airplay-placard.html
       media/modern-media-controls/pip-placard/pip-placard.html
       media/modern-media-controls/placard/placard.html

* Modules/modern-media-controls/controls/airplay-placard.js:
(AirplayPlacard):
* Modules/modern-media-controls/controls/icon-service.js:
* Modules/modern-media-controls/controls/pip-placard.js:
(PiPPlacard):
* Modules/modern-media-controls/controls/placard.css:
(.placard):
(.placard .container):
(.placard .icon):
(.placard .title,):
(.placard .title):
(.placard .description):
* Modules/modern-media-controls/controls/placard.js:
(Placard.):
* Modules/modern-media-controls/images/iOS/airplay-placard@1x.png: Added.
* Modules/modern-media-controls/images/iOS/airplay-placard@2x.png: Added.
* Modules/modern-media-controls/images/iOS/airplay-placard@3x.png: Added.
* Modules/modern-media-controls/images/iOS/pip-placard@1x.png: Added.
* Modules/modern-media-controls/images/iOS/pip-placard@2x.png: Added.
* Modules/modern-media-controls/images/iOS/pip-placard@3x.png: Added.
* Modules/modern-media-controls/images/macOS/airplay-placard@1x.png: Added.
* Modules/modern-media-controls/images/macOS/airplay-placard@2x.png: Added.
* Modules/modern-media-controls/images/macOS/pip-placard@1x.png: Added.
* Modules/modern-media-controls/images/macOS/pip-placard@2x.png: Added.

LayoutTests:

Testing the properties of the new Placard class and its subclasses.

* media/modern-media-controls/airplay-placard/airplay-placard-expected.txt: Added.
* media/modern-media-controls/airplay-placard/airplay-placard.html: Added.
* media/modern-media-controls/pip-placard/pip-placard-expected.txt: Added.
* media/modern-media-controls/pip-placard/pip-placard.html: Added.
* media/modern-media-controls/placard/placard-expected.txt: Added.
* media/modern-media-controls/placard/placard.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="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsiconservicejs">trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li>trunk/LayoutTests/media/modern-media-controls/airplay-placard/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsairplayplacardairplayplacardexpectedtxt">trunk/LayoutTests/media/modern-media-controls/airplay-placard/airplay-placard-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsairplayplacardairplayplacardhtml">trunk/LayoutTests/media/modern-media-controls/airplay-placard/airplay-placard.html</a></li>
<li>trunk/LayoutTests/media/modern-media-controls/pip-placard/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolspipplacardpipplacardexpectedtxt">trunk/LayoutTests/media/modern-media-controls/pip-placard/pip-placard-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolspipplacardpipplacardhtml">trunk/LayoutTests/media/modern-media-controls/pip-placard/pip-placard.html</a></li>
<li>trunk/LayoutTests/media/modern-media-controls/placard/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsplacardplacardexpectedtxt">trunk/LayoutTests/media/modern-media-controls/placard/placard-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsplacardplacardhtml">trunk/LayoutTests/media/modern-media-controls/placard/placard.html</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsairplayplacardjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolspipplacardjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsplacardcss">trunk/Source/WebCore/Modules/modern-media-controls/controls/placard.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsplacardjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/placard.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSairplayplacard1xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@1x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSairplayplacard2xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@2x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSairplayplacard3xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@3x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSpipplacard1xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@1x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSpipplacard2xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@2x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSpipplacard3xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@3x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSairplayplacard1xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@1x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSairplayplacard2xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@2x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSpipplacard1xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@1x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSpipplacard2xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@2x.png</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (207023 => 207024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2016-10-10 21:13:26 UTC (rev 207023)
+++ trunk/LayoutTests/ChangeLog        2016-10-10 21:17:47 UTC (rev 207024)
</span><span class="lines">@@ -1,3 +1,20 @@
</span><ins>+2016-10-10  Antoine Quint  &lt;graouts@apple.com&gt;
+
+        [Modern Media Controls] Placards
+        https://bugs.webkit.org/show_bug.cgi?id=163110
+        &lt;rdar://problem/28669342&gt;
+
+        Reviewed by Dean Jackson.
+
+        Testing the properties of the new Placard class and its subclasses.
+
+        * media/modern-media-controls/airplay-placard/airplay-placard-expected.txt: Added.
+        * media/modern-media-controls/airplay-placard/airplay-placard.html: Added.
+        * media/modern-media-controls/pip-placard/pip-placard-expected.txt: Added.
+        * media/modern-media-controls/pip-placard/pip-placard.html: Added.
+        * media/modern-media-controls/placard/placard-expected.txt: Added.
+        * media/modern-media-controls/placard/placard.html: Added.
+
</ins><span class="cx"> 2016-10-10  Ryan Haddad  &lt;ryanhaddad@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Marking fast/replaced/preferred-widths.html as flaky on mac.
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsairplayplacardairplayplacardexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/airplay-placard/airplay-placard-expected.txt (0 => 207024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/airplay-placard/airplay-placard-expected.txt                                (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/airplay-placard/airplay-placard-expected.txt        2016-10-10 21:17:47 UTC (rev 207024)
</span><span class="lines">@@ -0,0 +1,13 @@
</span><ins>+Testing the AirplayPlacard class.
+
+On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
+
+
+Placard with all parameters
+PASS placard.children[0].children[0].iconName is Icons.AirplayPlacard
+PASS placard.children[0].children[1].element.innerText is &quot;AirPlay&quot;
+PASS placard.children[0].children[2].element.innerText is &quot;This video is playing on your Apple TV&quot;
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsairplayplacardairplayplacardhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/airplay-placard/airplay-placard.html (0 => 207024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/airplay-placard/airplay-placard.html                                (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/airplay-placard/airplay-placard.html        2016-10-10 21:17:47 UTC (rev 207024)
</span><span class="lines">@@ -0,0 +1,29 @@
</span><ins>+&lt;link rel=&quot;stylesheet&quot; href=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/button.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
+&lt;link rel=&quot;stylesheet&quot; href=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
+&lt;link rel=&quot;stylesheet&quot; href=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
+&lt;script src=&quot;../../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-service.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;body&gt;
+&lt;script type=&quot;text/javascript&quot;&gt;
+
+description(&quot;Testing the &lt;code&gt;AirplayPlacard&lt;/code&gt; class.&quot;);
+
+iconService.directoryPath = &quot;../../../../Source/WebCore/Modules/modern-media-controls/images&quot;;
+
+debug(&quot;Placard with all parameters&quot;);
+const placard = new AirplayPlacard({ layoutTraits: LayoutTraits.macOS });
+
+shouldBe(&quot;placard.children[0].children[0].iconName&quot;, &quot;Icons.AirplayPlacard&quot;);
+shouldBeEqualToString(&quot;placard.children[0].children[1].element.innerText&quot;, &quot;AirPlay&quot;);
+shouldBeEqualToString(&quot;placard.children[0].children[2].element.innerText&quot;, &quot;This video is playing on your Apple TV&quot;);
+
+&lt;/script&gt;
+&lt;script src=&quot;../../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;
+&lt;/body&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolspipplacardpipplacardexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/pip-placard/pip-placard-expected.txt (0 => 207024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/pip-placard/pip-placard-expected.txt                                (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/pip-placard/pip-placard-expected.txt        2016-10-10 21:17:47 UTC (rev 207024)
</span><span class="lines">@@ -0,0 +1,12 @@
</span><ins>+Testing the PiPPlacard class.
+
+On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
+
+
+Placard with all parameters
+PASS placard.children[0].children[0].iconName is Icons.PiPPlacard
+PASS placard.children[0].children[1].element.innerText is &quot;This video is playing in Picture in Picture&quot;
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolspipplacardpipplacardhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/pip-placard/pip-placard.html (0 => 207024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/pip-placard/pip-placard.html                                (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/pip-placard/pip-placard.html        2016-10-10 21:17:47 UTC (rev 207024)
</span><span class="lines">@@ -0,0 +1,28 @@
</span><ins>+&lt;link rel=&quot;stylesheet&quot; href=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/button.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
+&lt;link rel=&quot;stylesheet&quot; href=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
+&lt;link rel=&quot;stylesheet&quot; href=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
+&lt;script src=&quot;../../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-service.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;body&gt;
+&lt;script type=&quot;text/javascript&quot;&gt;
+
+description(&quot;Testing the &lt;code&gt;PiPPlacard&lt;/code&gt; class.&quot;);
+
+iconService.directoryPath = &quot;../../../../Source/WebCore/Modules/modern-media-controls/images&quot;;
+
+debug(&quot;Placard with all parameters&quot;);
+const placard = new PiPPlacard({ layoutTraits: LayoutTraits.macOS });
+
+shouldBe(&quot;placard.children[0].children[0].iconName&quot;, &quot;Icons.PiPPlacard&quot;);
+shouldBeEqualToString(&quot;placard.children[0].children[1].element.innerText&quot;, &quot;This video is playing in Picture in Picture&quot;);
+
+&lt;/script&gt;
+&lt;script src=&quot;../../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;
+&lt;/body&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsplacardplacardexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/placard/placard-expected.txt (0 => 207024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/placard/placard-expected.txt                                (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/placard/placard-expected.txt        2016-10-10 21:17:47 UTC (rev 207024)
</span><span class="lines">@@ -0,0 +1,43 @@
</span><ins>+Testing the Placard class.
+
+On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
+
+
+Placard with all parameters
+PASS placard.element.localName is &quot;div&quot;
+PASS placard.element.className is &quot;placard&quot;
+PASS placard.children.length is 1
+PASS placard.children[0].element.localName is &quot;div&quot;
+PASS placard.children[0].element.className is &quot;container&quot;
+PASS placard.children[0].children.length is 3
+PASS placard.children[0].children[0] instanceof IconButton is true
+PASS placard.children[0].children[0].iconName is Icons.AirplayPlacard
+PASS placard.children[0].children[1] instanceof LayoutNode is true
+PASS placard.children[0].children[1].element.localName is &quot;div&quot;
+PASS placard.children[0].children[1].element.className is &quot;title&quot;
+PASS placard.children[0].children[1].element.innerText is &quot;My title&quot;
+PASS placard.children[0].children[2] instanceof LayoutNode is true
+PASS placard.children[0].children[2].element.localName is &quot;div&quot;
+PASS placard.children[0].children[2].element.className is &quot;description&quot;
+PASS placard.children[0].children[2].element.innerText is &quot;My description&quot;
+
+Placard without any parameter
+PASS defaultPlacard.children[0].children.length is 0
+
+Placard with only a description
+PASS onlyDescriptionPlacard.children[0].children.length is 1
+PASS onlyDescriptionPlacard.children[0].children[0] instanceof LayoutNode is true
+PASS onlyDescriptionPlacard.children[0].children[0].element.className is &quot;description&quot;
+
+Placard with only a title
+PASS onlyTitlePlacard.children[0].children.length is 1
+PASS onlyTitlePlacard.children[0].children[0] instanceof LayoutNode is true
+PASS onlyTitlePlacard.children[0].children[0].element.className is &quot;title&quot;
+
+Placard with only an icon
+PASS onlyIconPlacard.children[0].children.length is 1
+PASS onlyIconPlacard.children[0].children[0] instanceof IconButton is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsplacardplacardhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/placard/placard.html (0 => 207024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/placard/placard.html                                (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/placard/placard.html        2016-10-10 21:17:47 UTC (rev 207024)
</span><span class="lines">@@ -0,0 +1,71 @@
</span><ins>+&lt;link rel=&quot;stylesheet&quot; href=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/button.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
+&lt;link rel=&quot;stylesheet&quot; href=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
+&lt;link rel=&quot;stylesheet&quot; href=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
+&lt;script src=&quot;../../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-service.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;body&gt;
+&lt;script type=&quot;text/javascript&quot;&gt;
+
+description(&quot;Testing the &lt;code&gt;Placard&lt;/code&gt; class.&quot;);
+
+iconService.directoryPath = &quot;../../../../Source/WebCore/Modules/modern-media-controls/images&quot;;
+
+debug(&quot;Placard with all parameters&quot;);
+const placard = new Placard({
+    iconName: Icons.AirplayPlacard,
+    title: &quot;My title&quot;,
+    description: &quot;My description&quot;,
+    layoutDelegate: { layoutTraits: LayoutTraits.macOS }
+});
+
+shouldBeEqualToString(&quot;placard.element.localName&quot;, &quot;div&quot;);
+shouldBeEqualToString(&quot;placard.element.className&quot;, &quot;placard&quot;);
+shouldBe(&quot;placard.children.length&quot;, &quot;1&quot;);
+shouldBeEqualToString(&quot;placard.children[0].element.localName&quot;, &quot;div&quot;);
+shouldBeEqualToString(&quot;placard.children[0].element.className&quot;, &quot;container&quot;);
+shouldBe(&quot;placard.children[0].children.length&quot;, &quot;3&quot;);
+shouldBeTrue(&quot;placard.children[0].children[0] instanceof IconButton&quot;);
+shouldBe(&quot;placard.children[0].children[0].iconName&quot;, &quot;Icons.AirplayPlacard&quot;);
+shouldBeTrue(&quot;placard.children[0].children[1] instanceof LayoutNode&quot;);
+shouldBeEqualToString(&quot;placard.children[0].children[1].element.localName&quot;, &quot;div&quot;);
+shouldBeEqualToString(&quot;placard.children[0].children[1].element.className&quot;, &quot;title&quot;);
+shouldBeEqualToString(&quot;placard.children[0].children[1].element.innerText&quot;, &quot;My title&quot;);
+shouldBeTrue(&quot;placard.children[0].children[2] instanceof LayoutNode&quot;);
+shouldBeEqualToString(&quot;placard.children[0].children[2].element.localName&quot;, &quot;div&quot;);
+shouldBeEqualToString(&quot;placard.children[0].children[2].element.className&quot;, &quot;description&quot;);
+shouldBeEqualToString(&quot;placard.children[0].children[2].element.innerText&quot;, &quot;My description&quot;);
+
+debug(&quot;&quot;);
+debug(&quot;Placard without any parameter&quot;);
+const defaultPlacard = new Placard;
+shouldBe(&quot;defaultPlacard.children[0].children.length&quot;, &quot;0&quot;);
+
+debug(&quot;&quot;);
+debug(&quot;Placard with only a description&quot;);
+const onlyDescriptionPlacard = new Placard({ description: &quot;My description&quot; });
+shouldBe(&quot;onlyDescriptionPlacard.children[0].children.length&quot;, &quot;1&quot;);
+shouldBeTrue(&quot;onlyDescriptionPlacard.children[0].children[0] instanceof LayoutNode&quot;);
+shouldBeEqualToString(&quot;onlyDescriptionPlacard.children[0].children[0].element.className&quot;, &quot;description&quot;);
+
+debug(&quot;&quot;);
+debug(&quot;Placard with only a title&quot;);
+const onlyTitlePlacard = new Placard({ title: &quot;My title&quot; });
+shouldBe(&quot;onlyTitlePlacard.children[0].children.length&quot;, &quot;1&quot;);
+shouldBeTrue(&quot;onlyTitlePlacard.children[0].children[0] instanceof LayoutNode&quot;);
+shouldBeEqualToString(&quot;onlyTitlePlacard.children[0].children[0].element.className&quot;, &quot;title&quot;);
+
+debug(&quot;&quot;);
+debug(&quot;Placard with only an icon&quot;);
+const onlyIconPlacard = new Placard({ iconName: Icons.AirplayPlacard, layoutDelegate: { layoutTraits: LayoutTraits.macOS } });
+shouldBe(&quot;onlyIconPlacard.children[0].children.length&quot;, &quot;1&quot;);
+shouldBeTrue(&quot;onlyIconPlacard.children[0].children[0] instanceof IconButton&quot;);
+
+&lt;/script&gt;
+&lt;script src=&quot;../../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;
+&lt;/body&gt;
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (207023 => 207024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2016-10-10 21:13:26 UTC (rev 207023)
+++ trunk/Source/WebCore/ChangeLog        2016-10-10 21:17:47 UTC (rev 207024)
</span><span class="lines">@@ -1,3 +1,45 @@
</span><ins>+2016-10-10  Antoine Quint  &lt;graouts@apple.com&gt;
+
+        [Modern Media Controls] Placards
+        https://bugs.webkit.org/show_bug.cgi?id=163110
+        &lt;rdar://problem/28669342&gt;
+
+        Reviewed by Dean Jackson.
+
+        Inline media controls need to display placards when the video is no longer playing inline,
+        such as when the video is playing fullscreen or via AirPlay. To that end, we introduce a
+        new Placard class and two subclasses for display during fullscreen or AirPlay playback.
+        Note that localization will be done in a later patch.
+
+        Tests: media/modern-media-controls/airplay-placard/airplay-placard.html
+               media/modern-media-controls/pip-placard/pip-placard.html
+               media/modern-media-controls/placard/placard.html
+
+        * Modules/modern-media-controls/controls/airplay-placard.js:
+        (AirplayPlacard):
+        * Modules/modern-media-controls/controls/icon-service.js:
+        * Modules/modern-media-controls/controls/pip-placard.js:
+        (PiPPlacard):
+        * Modules/modern-media-controls/controls/placard.css:
+        (.placard):
+        (.placard .container):
+        (.placard .icon):
+        (.placard .title,):
+        (.placard .title):
+        (.placard .description):
+        * Modules/modern-media-controls/controls/placard.js:
+        (Placard.):
+        * Modules/modern-media-controls/images/iOS/airplay-placard@1x.png: Added.
+        * Modules/modern-media-controls/images/iOS/airplay-placard@2x.png: Added.
+        * Modules/modern-media-controls/images/iOS/airplay-placard@3x.png: Added.
+        * Modules/modern-media-controls/images/iOS/pip-placard@1x.png: Added.
+        * Modules/modern-media-controls/images/iOS/pip-placard@2x.png: Added.
+        * Modules/modern-media-controls/images/iOS/pip-placard@3x.png: Added.
+        * Modules/modern-media-controls/images/macOS/airplay-placard@1x.png: Added.
+        * Modules/modern-media-controls/images/macOS/airplay-placard@2x.png: Added.
+        * Modules/modern-media-controls/images/macOS/pip-placard@1x.png: Added.
+        * Modules/modern-media-controls/images/macOS/pip-placard@2x.png: Added.
+
</ins><span class="cx"> 2016-10-10  Chris Dumez  &lt;cdumez@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Add support for Navigator.languages attribute
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsairplayplacardjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js (0 => 207024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js                                (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js        2016-10-10 21:17:47 UTC (rev 207024)
</span><span class="lines">@@ -0,0 +1,39 @@
</span><ins>+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+class AirplayPlacard extends Placard
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            iconName: Icons.AirplayPlacard,
+            title: &quot;AirPlay&quot;,
+            description: &quot;This video is playing on your Apple TV&quot;,
+            layoutDelegate
+        });
+    }
+
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsiconservicejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js (207023 => 207024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js        2016-10-10 21:13:26 UTC (rev 207023)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js        2016-10-10 21:17:47 UTC (rev 207024)
</span><span class="lines">@@ -25,11 +25,13 @@
</span><span class="cx"> 
</span><span class="cx"> const Icons = {
</span><span class="cx">     Airplay         : &quot;airplay&quot;,
</span><ins>+    AirplayPlacard  : &quot;airplay-placard&quot;,
</ins><span class="cx">     EnterFullscreen : &quot;enter-fullscreen&quot;,
</span><span class="cx">     EnterPiP        : &quot;pip-in&quot;,
</span><span class="cx">     ExitFullscreen  : &quot;exit-fullscreen&quot;,
</span><span class="cx">     Forward         : &quot;forward&quot;,
</span><span class="cx">     Pause           : &quot;pause&quot;,
</span><ins>+    PiPPlacard      : &quot;pip-placard&quot;,
</ins><span class="cx">     Play            : &quot;play&quot;,
</span><span class="cx">     Rewind          : &quot;rewind&quot;,
</span><span class="cx">     ScaleToFill     : &quot;scale-to-fill&quot;,
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolspipplacardjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js (0 => 207024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js                                (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js        2016-10-10 21:17:47 UTC (rev 207024)
</span><span class="lines">@@ -0,0 +1,38 @@
</span><ins>+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+class PiPPlacard extends Placard
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            iconName: Icons.PiPPlacard,
+            description: &quot;This video is playing in Picture in Picture&quot;,
+            layoutDelegate
+        });
+    }
+
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsplacardcss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/placard.css (0 => 207024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/placard.css                                (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/placard.css        2016-10-10 21:17:47 UTC (rev 207024)
</span><span class="lines">@@ -0,0 +1,70 @@
</span><ins>+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.placard {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+
+    background-color: black;
+    color: rgb(164, 164, 164);
+    
+    font-family: -apple-system;
+}
+
+.placard .container {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    max-width: 402px;
+
+    transform: translate(-50%, -50%);
+}
+
+.placard .icon {
+    position: relative;
+    left: 50%;
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgb(164, 164, 164) !important;
+
+    margin-bottom: 10px;
+
+    transform: translateX(-50%);
+}
+
+.placard .title,
+.placard .description {
+    text-align: center;
+}
+
+.placard .title {
+    font-size: 20px;
+}
+
+.placard .description {
+    font-size: 13px;
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsplacardjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/placard.js (0 => 207024)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/placard.js                                (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/placard.js        2016-10-10 21:17:47 UTC (rev 207024)
</span><span class="lines">@@ -0,0 +1,48 @@
</span><ins>+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+class Placard extends LayoutItem
+{
+
+    constructor({ iconName = null, title = &quot;&quot;, description = &quot;&quot;, layoutDelegate = null } = {})
+    {
+        super({
+            element: `&lt;div class=&quot;placard&quot;&gt;&lt;/div&gt;`,
+            layoutDelegate
+        });
+
+        const container = this.addChild(new LayoutNode(`&lt;div class=&quot;container&quot;&gt;&lt;/div&gt;`));
+        
+        if (iconName)
+            container.addChild(new IconButton(this)).iconName = iconName;
+
+        if (!!title)
+            container.addChild(new LayoutNode(`&lt;div class=&quot;title&quot;&gt;${title}&lt;/div&gt;`));
+
+        if (!!description)
+            container.addChild(new LayoutNode(`&lt;div class=&quot;description&quot;&gt;${description}&lt;/div&gt;`));
+    }
+
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSairplayplacard1xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@1x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@1x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@1x.png        2016-10-10 21:13:26 UTC (rev 207023)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@1x.png        2016-10-10 21:17:47 UTC (rev 207024)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@1x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSairplayplacard2xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@2x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@2x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@2x.png        2016-10-10 21:13:26 UTC (rev 207023)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@2x.png        2016-10-10 21:17:47 UTC (rev 207024)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@2x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSairplayplacard3xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@3x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@3x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@3x.png        2016-10-10 21:13:26 UTC (rev 207023)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@3x.png        2016-10-10 21:17:47 UTC (rev 207024)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@3x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSpipplacard1xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@1x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@1x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@1x.png        2016-10-10 21:13:26 UTC (rev 207023)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@1x.png        2016-10-10 21:17:47 UTC (rev 207024)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@1x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSpipplacard2xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@2x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@2x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@2x.png        2016-10-10 21:13:26 UTC (rev 207023)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@2x.png        2016-10-10 21:17:47 UTC (rev 207024)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@2x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSpipplacard3xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@3x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@3x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@3x.png        2016-10-10 21:13:26 UTC (rev 207023)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@3x.png        2016-10-10 21:17:47 UTC (rev 207024)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@3x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSairplayplacard1xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@1x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@1x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@1x.png        2016-10-10 21:13:26 UTC (rev 207023)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@1x.png        2016-10-10 21:17:47 UTC (rev 207024)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@1x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSairplayplacard2xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@2x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@2x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@2x.png        2016-10-10 21:13:26 UTC (rev 207023)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@2x.png        2016-10-10 21:17:47 UTC (rev 207024)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@2x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSpipplacard1xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@1x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@1x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@1x.png        2016-10-10 21:13:26 UTC (rev 207023)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@1x.png        2016-10-10 21:17:47 UTC (rev 207024)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@1x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSpipplacard2xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@2x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@2x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@2x.png        2016-10-10 21:13:26 UTC (rev 207023)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@2x.png        2016-10-10 21:17:47 UTC (rev 207024)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@2x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span></div>

</body>
</html>