Bug 1222737 - Modified tests for computed properties; r?pbro
Added extra space to the : separator to match the old behavior and reduce failed tests.
Refactored the test file slightly for better flexibility regarding multiple test cases and tests.
Added new test case to assert the problem described and to account for expanded properties
MozReview-Commit-ID: 9Gh1fgorseK
--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -997,17 +997,17 @@ PropertyView.prototype = {
this.nameNode.textContent = this.nameNode.title = this.name;
// Make it hand over the focus to the container
this.onFocus = () => this.element.focus();
this.nameNode.addEventListener("click", this.onFocus);
// Build the style name ":" separator
let nameSeparator = doc.createElementNS(HTML_NS, "span");
nameSeparator.setAttribute("class", "visually-hidden");
- nameSeparator.textContent = ":";
+ nameSeparator.textContent = ": ";
this.nameNode.appendChild(nameSeparator);
nameContainer.appendChild(this.nameNode);
let valueContainer = doc.createElementNS(HTML_NS, "span");
valueContainer.className = "property-value-container";
this.element.appendChild(valueContainer);
--- a/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles.js
+++ b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles.js
@@ -3,48 +3,83 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that properties can be selected and copied from the computed view.
const osString = Services.appinfo.OS;
-const TEST_URI = `
- <style type="text/css">
- span {
- font-variant-caps: small-caps;
- color: #000000;
- }
- .nomatches {
- color: #ff0000;
+const TEST_DATA = [
+ {
+ uri: `
+ <style type="text/css">
+ span {
+ font-variant-caps: small-caps;
+ color: #000000;
+ }
+ .nomatches {
+ color: #ff0000;
+ }
+ </style>
+ <div id="first" style="margin: 10em;
+ font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
+ <h1>Some header text</h1>
+ <p id="salutation" style="font-size: 12pt">hi.</p>
+ <p id="body" style="font-size: 12pt">I am a test-case. This text exists
+ solely to provide some things to <span style="color: yellow">
+ highlight</span> and <span style="font-weight: bold">count</span>
+ style list-items in the box at right. If you are reading this,
+ you should go do something else instead. Maybe read a book. Or better
+ yet, write some test-cases for another bit of code.
+ <span style="font-style: italic">some text</span></p>
+ <p id="closing">more text</p>
+ <p>even more text</p>
+ </div>
+ `,
+ test: function* () {
+ let {inspector, view} = yield openComputedView();
+ yield selectNode("span", inspector);
+ yield checkCopySelection(view);
+
+ let expectedPattern = "color: rgb\\(255, 255, 0\\);[\\r\\n]+" +
+ "font-family: helvetica,sans-serif;[\\r\\n]+" +
+ "font-size: 16px;[\\r\\n]+" +
+ "font-variant-caps: small-caps;[\\r\\n]*";
+ yield checkSelectAll(view, expectedPattern);
}
- </style>
- <div id="first" style="margin: 10em;
- font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
- <h1>Some header text</h1>
- <p id="salutation" style="font-size: 12pt">hi.</p>
- <p id="body" style="font-size: 12pt">I am a test-case. This text exists
- solely to provide some things to <span style="color: yellow">
- highlight</span> and <span style="font-weight: bold">count</span>
- style list-items in the box at right. If you are reading this,
- you should go do something else instead. Maybe read a book. Or better
- yet, write some test-cases for another bit of code.
- <span style="font-style: italic">some text</span></p>
- <p id="closing">more text</p>
- <p>even more text</p>
- </div>
-`;
+ },
+ {
+ uri: `<div style="text-align:left;width:25px;">Hello world</div>`,
+ test: function* () {
+ let {inspector, view} = yield openComputedView();
+ yield selectNode("div", inspector);
+
+ let expectedPattern = "text-align: left;[\\r\\n]+" +
+ "width: 25px;[\\r\\n]*";
+ yield checkSelectAll(view, expectedPattern);
+
+ expectedPattern = "text-align: left;[\\r\\n]+" +
+ "element[\\r\\n]+" +
+ "this.style[\\r\\n]+" +
+ "left[\\r\\n]+" +
+ "width: 25px;[\\r\\n]+" +
+ "element[\\r\\n]+" +
+ "this.style[\\r\\n]+" +
+ "25px[\\r\\n]*";
+ yield checkExpandSelectAll(view, expectedPattern);
+ }
+ }
+];
add_task(function* () {
- yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
- let {inspector, view} = yield openComputedView();
- yield selectNode("span", inspector);
- yield checkCopySelection(view);
- yield checkSelectAll(view);
+ for (let {uri, test} of TEST_DATA) {
+ yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(uri));
+ yield test();
+ }
});
function* checkCopySelection(view) {
info("Testing selection copy");
let contentDocument = view.styleDocument;
let props = contentDocument.querySelectorAll(".property-view");
ok(props, "captain, we have the property-view nodes");
@@ -64,29 +99,47 @@ function* checkCopySelection(view) {
try {
yield waitForClipboardPromise(() => fireCopyEvent(props[0]),
() => checkClipboardData(expectedPattern));
} catch (e) {
failedClipboard(expectedPattern);
}
}
-function* checkSelectAll(view) {
+function* checkSelectAll(view, expectedPattern) {
info("Testing select-all copy");
let contentDoc = view.styleDocument;
let prop = contentDoc.querySelector(".property-view");
info("Checking that _onSelectAll() then copy returns the correct " +
"clipboard value");
view._contextmenu._onSelectAll();
- let expectedPattern = "color: rgb\\(255, 255, 0\\);[\\r\\n]+" +
- "font-family: helvetica,sans-serif;[\\r\\n]+" +
- "font-size: 16px;[\\r\\n]+" +
- "font-variant-caps: small-caps;[\\r\\n]*";
+
+ try {
+ yield waitForClipboardPromise(() => fireCopyEvent(prop),
+ () => checkClipboardData(expectedPattern));
+ } catch (e) {
+ failedClipboard(expectedPattern);
+ }
+}
+
+function* checkExpandSelectAll (view, expectedPattern) {
+ info("Testing expand then select all copy");
+
+ let contentDoc = view.styleDocument;
+ let prop = contentDoc.querySelector(".property-view");
+
+ info("Expanding computed view properties");
+ yield expandComputedViewPropertyByIndex(view, 0);
+ yield expandComputedViewPropertyByIndex(view, 1);
+
+ info("Checking that _onSelectAll() then copy returns the correct " +
+ "clipboard value");
+ view._contextmenu._onSelectAll();
try {
yield waitForClipboardPromise(() => fireCopyEvent(prop),
() => checkClipboardData(expectedPattern));
} catch (e) {
failedClipboard(expectedPattern);
}
}