<!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>[189358] 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/189358">189358</a></dd>
<dt>Author</dt> <dd>dino@apple.com</dd>
<dt>Date</dt> <dd>2015-09-04 11:12:16 -0700 (Fri, 04 Sep 2015)</dd>
</dl>

<h3>Log Message</h3>
<pre>[mediacontrols] Expose bounding rectangles and computed style to testing
https://bugs.webkit.org/show_bug.cgi?id=148755
&lt;rdar://problems/22567757&gt;

Reviewed by Eric Carlson.

Source/WebCore:

Expose more information on the internal objects to the testing
framework, in particular the bounding client rectangle for an
element as well as its computed style.

These new features are tested by media/controls/statusDisplay*.

* Modules/mediacontrols/mediaControlsApple.js:
(Controller.prototype.getCurrentControlsStatus): Rearrage things so
that it iterates over a list of objects, adding the common things
as well as any extra property values.

LayoutTests:

Update tests to exercise the computed style and bounding rectangles.

* media/controls/controls-test-helpers.js:
(ControlsTest.prototype.isNotZero):
(ControlsTest):
* media/controls/statusDisplay-expected.txt:
* media/controls/statusDisplay.html:
* media/controls/statusDisplayBad-expected.txt:
* media/controls/statusDisplayBad.html:</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="#trunkLayoutTestsmediacontrolsstatusDisplayexpectedtxt">trunk/LayoutTests/media/controls/statusDisplay-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediacontrolsstatusDisplayhtml">trunk/LayoutTests/media/controls/statusDisplay.html</a></li>
<li><a href="#trunkLayoutTestsmediacontrolsstatusDisplayBadexpectedtxt">trunk/LayoutTests/media/controls/statusDisplayBad-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediacontrolsstatusDisplayBadhtml">trunk/LayoutTests/media/controls/statusDisplayBad.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (189357 => 189358)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2015-09-04 18:00:24 UTC (rev 189357)
+++ trunk/LayoutTests/ChangeLog        2015-09-04 18:12:16 UTC (rev 189358)
</span><span class="lines">@@ -1,3 +1,21 @@
</span><ins>+2015-09-03  Dean Jackson  &lt;dino@apple.com&gt;
+
+        [mediacontrols] Expose bounding rectangles and computed style to testing
+        https://bugs.webkit.org/show_bug.cgi?id=148755
+        &lt;rdar://problems/22567757&gt;
+
+        Reviewed by Eric Carlson.
+
+        Update tests to exercise the computed style and bounding rectangles.
+
+        * media/controls/controls-test-helpers.js:
+        (ControlsTest.prototype.isNotZero):
+        (ControlsTest):
+        * media/controls/statusDisplay-expected.txt:
+        * media/controls/statusDisplay.html:
+        * media/controls/statusDisplayBad-expected.txt:
+        * media/controls/statusDisplayBad.html:
+
</ins><span class="cx"> 2015-09-04  Alexey Proskuryakov  &lt;ap@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Add tests for different Unicode normalization forms in domain names
</span></span></pre></div>
<a id="trunkLayoutTestsmediacontrolscontrolstesthelpersjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/controls/controls-test-helpers.js (189357 => 189358)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/controls/controls-test-helpers.js        2015-09-04 18:00:24 UTC (rev 189357)
+++ trunk/LayoutTests/media/controls/controls-test-helpers.js        2015-09-04 18:12:16 UTC (rev 189358)
</span><span class="lines">@@ -167,4 +167,12 @@
</span><span class="cx">             this.logFailure(`${this.currentMessage} Expected a false value. Actual: &quot;${this.currentValue}&quot;`);
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    isNotZero()
+    {
+        if (this.currentValue)
+            this.logSuccess(this.currentMessage);
+        else
+            this.logFailure(`${this.currentMessage} Expected a non-zero value`);
+    }
+
</ins><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsmediacontrolsstatusDisplayexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/controls/statusDisplay-expected.txt (189357 => 189358)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/controls/statusDisplay-expected.txt        2015-09-04 18:00:24 UTC (rev 189357)
+++ trunk/LayoutTests/media/controls/statusDisplay-expected.txt        2015-09-04 18:12:16 UTC (rev 189358)
</span><span class="lines">@@ -11,6 +11,7 @@
</span><span class="cx"> PASS: Name is 'Status Display'
</span><span class="cx"> PASS: Has hidden class
</span><span class="cx"> PASS: Content is Empty
</span><ins>+PASS: CSS display: none
</ins><span class="cx"> 
</span><span class="cx"> Testing finished.
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkLayoutTestsmediacontrolsstatusDisplayhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/controls/statusDisplay.html (189357 => 189358)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/controls/statusDisplay.html        2015-09-04 18:00:24 UTC (rev 189357)
+++ trunk/LayoutTests/media/controls/statusDisplay.html        2015-09-04 18:12:16 UTC (rev 189358)
</span><span class="lines">@@ -27,9 +27,13 @@
</span><span class="cx">                     .isEqualTo(&quot;hidden&quot;);
</span><span class="cx"> 
</span><span class="cx">                 tester.test(&quot;Content is Empty&quot;)
</span><del>-                    .value(statusDisplayLabelState.content)
</del><ins>+                    .value(statusDisplayLabelState.textContent)
</ins><span class="cx">                     .isEmptyString();
</span><span class="cx"> 
</span><ins>+                tester.test(&quot;CSS display: none&quot;)
+                    .value(statusDisplayLabelState.computedStyle.display)
+                    .isEqualTo(&quot;none&quot;);
+
</ins><span class="cx">                 tester.end();
</span><span class="cx">             }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkLayoutTestsmediacontrolsstatusDisplayBadexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/controls/statusDisplayBad-expected.txt (189357 => 189358)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/controls/statusDisplayBad-expected.txt        2015-09-04 18:00:24 UTC (rev 189357)
+++ trunk/LayoutTests/media/controls/statusDisplayBad-expected.txt        2015-09-04 18:12:16 UTC (rev 189358)
</span><span class="lines">@@ -11,6 +11,8 @@
</span><span class="cx"> PASS: Name is 'Status Display'
</span><span class="cx"> PASS: Has empty class
</span><span class="cx"> PASS: Content is 'Error'
</span><ins>+PASS: CSS display: block
+PASS: Displayed bounds is non-zero
</ins><span class="cx"> 
</span><span class="cx"> Testing finished.
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkLayoutTestsmediacontrolsstatusDisplayBadhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/controls/statusDisplayBad.html (189357 => 189358)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/controls/statusDisplayBad.html        2015-09-04 18:00:24 UTC (rev 189357)
+++ trunk/LayoutTests/media/controls/statusDisplayBad.html        2015-09-04 18:12:16 UTC (rev 189358)
</span><span class="lines">@@ -27,9 +27,17 @@
</span><span class="cx">                     .isEmptyString();
</span><span class="cx"> 
</span><span class="cx">                 tester.test(&quot;Content is 'Error'&quot;)
</span><del>-                    .value(statusDisplayLabelState.content)
</del><ins>+                    .value(statusDisplayLabelState.textContent)
</ins><span class="cx">                     .isEqualTo(&quot;Error&quot;);
</span><span class="cx"> 
</span><ins>+                tester.test(&quot;CSS display: block&quot;)
+                    .value(statusDisplayLabelState.computedStyle.display)
+                    .isEqualTo(&quot;block&quot;);
+
+                tester.test(&quot;Displayed bounds is non-zero&quot;)
+                    .value(statusDisplayLabelState.bounds.width)
+                    .isNotZero();
+
</ins><span class="cx">                 tester.end();
</span><span class="cx">             }
</span><span class="cx">         &lt;/script&gt;
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (189357 => 189358)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2015-09-04 18:00:24 UTC (rev 189357)
+++ trunk/Source/WebCore/ChangeLog        2015-09-04 18:12:16 UTC (rev 189358)
</span><span class="lines">@@ -1,3 +1,22 @@
</span><ins>+2015-09-03  Dean Jackson  &lt;dino@apple.com&gt;
+
+        [mediacontrols] Expose bounding rectangles and computed style to testing
+        https://bugs.webkit.org/show_bug.cgi?id=148755
+        &lt;rdar://problems/22567757&gt;
+
+        Reviewed by Eric Carlson.
+
+        Expose more information on the internal objects to the testing
+        framework, in particular the bounding client rectangle for an
+        element as well as its computed style.
+
+        These new features are tested by media/controls/statusDisplay*.
+
+        * Modules/mediacontrols/mediaControlsApple.js:
+        (Controller.prototype.getCurrentControlsStatus): Rearrage things so
+        that it iterates over a list of objects, adding the common things
+        as well as any extra property values.
+
</ins><span class="cx"> 2015-09-04  Chris Dumez  &lt;cdumez@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Document.body should return the first body / frameset child of the html element
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (189357 => 189358)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js        2015-09-04 18:00:24 UTC (rev 189357)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js        2015-09-04 18:12:16 UTC (rev 189358)
</span><span class="lines">@@ -2096,22 +2096,50 @@
</span><span class="cx"> 
</span><span class="cx">     getCurrentControlsStatus: function ()
</span><span class="cx">     {
</span><del>-        return JSON.stringify({
</del><ins>+        var result = {
</ins><span class="cx">             idiom: this.idiom,
</span><del>-            status: &quot;ok&quot;,
-            elements: [
-                {
-                    name: &quot;Show Controls&quot;,
-                    className: this.showControlsButton.className,
-                    hidden: this.showControlsButton.hidden
-                },
-                {
-                    name: &quot;Status Display&quot;,
-                    className: this.controls.statusDisplay.className,
-                    content: this.controls.statusDisplay.textContent
-                }
-            ]
</del><ins>+            status: &quot;ok&quot;
+        };
+
+        var elements = [
+            {
+                name: &quot;Show Controls&quot;,
+                object: this.showControlsButton,
+                extraProperties: [&quot;hidden&quot;]
+            },
+            {
+                name: &quot;Status Display&quot;,
+                object: this.controls.statusDisplay,
+                styleValues: [&quot;display&quot;],
+                extraProperties: [&quot;textContent&quot;]
+            }
+        ];
+
+        elements.forEach(function (element) {
+            var obj = element.object;
+            delete element.object;
+
+            element.computedStyle = {};
+            if (element.styleValues) {
+                var computedStyle = window.getComputedStyle(obj);
+                element.styleValues.forEach(function (propertyName) {
+                    element.computedStyle[propertyName] = computedStyle[propertyName];
+                });
+            }
+            delete element.styleValues;
+
+            element.bounds = obj.getBoundingClientRect();
+            element.className = obj.className;
+
+            element.extraProperties.forEach(function (property) {
+                element[property] = obj[property];
+            });
+            delete element.extraProperties;
</ins><span class="cx">         });
</span><ins>+
+        result.elements = elements;
+
+        return JSON.stringify(result);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx"> };
</span></span></pre>
</div>
</div>

</body>
</html>