wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 1197048 - Part 2: Reduce test code duplication in search filter unit tests r=pbro

Browse Source
This commit is contained in:
Gabriel Luong 2015-08-24 22:59:26 -07:00
parent a839946960
commit 2d56c0938e
30 changed files with 563 additions and 1237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
browser/devtools/styleinspector/test/browser.ini
View File

@ -149,11 +149,6 @@ skip-if = e10s # Bug 1090340
[browser_ruleview_search-filter-computed-list_02.js]
[browser_ruleview_search-filter-computed-list_03.js]
[browser_ruleview_search-filter-computed-list_04.js]
[browser_ruleview_search-filter-computed-list_05.js]
[browser_ruleview_search-filter-computed-list_06.js]
[browser_ruleview_search-filter-computed-list_07.js]
[browser_ruleview_search-filter-computed-list_08.js]
[browser_ruleview_search-filter-computed-list_clear.js]
[browser_ruleview_search-filter-computed-list_expander.js]
[browser_ruleview_search-filter_01.js]
[browser_ruleview_search-filter_02.js]
@ -165,13 +160,6 @@ skip-if = e10s # Bug 1090340
[browser_ruleview_search-filter_08.js]
[browser_ruleview_search-filter_09.js]
[browser_ruleview_search-filter_10.js]
[browser_ruleview_search-filter_11.js]
[browser_ruleview_search-filter_12.js]
[browser_ruleview_search-filter_13.js]
[browser_ruleview_search-filter_14.js]
[browser_ruleview_search-filter_15.js]
[browser_ruleview_search-filter_16.js]
[browser_ruleview_search-filter_clear.js]
[browser_ruleview_search-filter_context-menu.js]
[browser_ruleview_search-filter_escape-keypress.js]
[browser_ruleview_select-and-copy-styles.js]

148
browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_01.js
View File

@ -4,10 +4,8 @@
"use strict";
// Tests that the rule view search filter works properly in the computed list
// for property values.
const SEARCH = "0px";
// Tests that the rule view search filter and clear button works properly in
// the computed list.
const TEST_URI = `
<style type="text/css">
@ -21,6 +19,64 @@ const TEST_URI = `
<h1 id="testid" class="testclass">Styled Node</h1>
`;
const TEST_DATA = [
{
desc: "Tests that the search filter works properly in the computed list for property names",
search: "margin",
isExpanderOpen: false,
isFilterOpen: false,
isMarginHighlighted: true,
isMarginTopHighlighted: true,
isMarginRightHighlighted: true,
isMarginBottomHighlighted: true,
isMarginLeftHighlighted: true
},
{
desc: "Tests that the search filter works properly in the computed list for property values",
search: "0px",
isExpanderOpen: false,
isFilterOpen: false,
isMarginHighlighted: true,
isMarginTopHighlighted: false,
isMarginRightHighlighted: true,
isMarginBottomHighlighted: false,
isMarginLeftHighlighted: true
},
{
desc: "Tests that the search filter works properly in the computed list for property line input",
search: "margin-top:4px",
isExpanderOpen: true,
isFilterOpen: true,
isMarginHighlighted: false,
isMarginTopHighlighted: true,
isMarginRightHighlighted: false,
isMarginBottomHighlighted: false,
isMarginLeftHighlighted: false
},
{
desc: "Tests that the search filter works properly in the computed list for parsed name",
search: "margin-top:",
isExpanderOpen: true,
isFilterOpen: true,
isMarginHighlighted: false,
isMarginTopHighlighted: true,
isMarginRightHighlighted: false,
isMarginBottomHighlighted: false,
isMarginLeftHighlighted: false
},
{
desc: "Tests that the search filter works properly in the computed list for parsed property value",
search: ":4px",
isExpanderOpen: false,
isFilterOpen: false,
isMarginHighlighted: true,
isMarginTopHighlighted: true,
isMarginRightHighlighted: false,
isMarginBottomHighlighted: true,
isMarginLeftHighlighted: false
}
];
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
@ -28,38 +84,68 @@ add_task(function*() {
yield testAddTextInFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
function* testAddTextInFilter(inspector, view) {
for (let data of TEST_DATA) {
info(data.desc);
yield setSearchFilter(view, data.search);
yield checkRules(view, data);
yield clearSearchAndCheckRules(view);
}
}
function* checkRules(view, data) {
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
is(view.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(view, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
let ruleEditor = rule.textProps[0].editor;
let computed = ruleEditor.computed;
let rule = getRuleViewRuleEditor(view, 1).rule;
let textPropEditor = rule.textProps[0].editor;
let computed = textPropEditor.computed;
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(!ruleEditor.expander.getAttribute("open"), "Expander is closed.");
ok(ruleEditor.container.classList.contains("ruleview-highlight"),
"margin text property is correctly highlighted.");
ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
is(!!textPropEditor.expander.getAttribute("open"), data.isExpanderOpen,
"Got correct expander state.");
is(computed.hasAttribute("filter-open"), data.isFilterOpen,
"Got correct expanded state for margin computed list.");
is(textPropEditor.container.classList.contains("ruleview-highlight"),
data.isMarginHighlighted,
"Got correct highlight for margin text property.");
ok(!computed.children[0].classList.contains("ruleview-highlight"),
"margin-top computed property is not highlighted.");
ok(computed.children[1].classList.contains("ruleview-highlight"),
"margin-right computed property is correctly highlighted.");
ok(!computed.children[2].classList.contains("ruleview-highlight"),
"margin-bottom computed property is not highlighted.");
ok(computed.children[3].classList.contains("ruleview-highlight"),
"margin-left computed property is correctly highlighted.");
is(computed.children[0].classList.contains("ruleview-highlight"),
data.isMarginTopHighlighted,
"Got correct highlight for margin-top computed property.");
is(computed.children[1].classList.contains("ruleview-highlight"),
data.isMarginRightHighlighted,
"Got correct highlight for margin-right computed property.");
is(computed.children[2].classList.contains("ruleview-highlight"),
data.isMarginBottomHighlighted,
"Got correct highlight for margin-bottom computed property.");
is(computed.children[3].classList.contains("ruleview-highlight"),
data.isMarginLeftHighlighted,
"Got correct highlight for margin-left computed property.");
}
function* clearSearchAndCheckRules(view) {
let win = view.styleWindow;
let searchField = view.searchField;
let searchClearButton = view.searchClearButton;
let rule = getRuleViewRuleEditor(view, 1).rule;
let textPropEditor = rule.textProps[0].editor;
let computed = textPropEditor.computed;
info("Clearing the search filter");
EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
yield view.inspector.once("ruleview-filtered");
info("Check the search filter is cleared and no rules are highlighted");
is(view.element.children.length, 3, "Should have 3 rules.");
ok(!searchField.value, "Search filter is cleared");
ok(!view.styleDocument.querySelectorAll(".ruleview-highlight").length,
"No rules are higlighted");
ok(!textPropEditor.expander.getAttribute("open"), "Expander is closed.");
ok(!computed.hasAttribute("filter-open"),
"margin computed list is closed.");
}

58
browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_02.js
View File

@ -5,9 +5,9 @@
"use strict";
// Tests that the rule view search filter works properly in the computed list
// for property names.
// when modifying the existing search filter value
const SEARCH = "margin";
const SEARCH = "margin-";
const TEST_URI = `
<style type="text/css">
@ -26,25 +26,53 @@ add_task(function*() {
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testAddTextInFilter(inspector, view);
yield testRemoveTextInFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
function* testAddTextInFilter(inspector, view) {
yield setSearchFilter(view, SEARCH);
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
is(view.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(view, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
let rule = getRuleViewRuleEditor(view, 1).rule;
let ruleEditor = rule.textProps[0].editor;
let computed = ruleEditor.computed;
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
ok(!ruleEditor.container.classList.contains("ruleview-highlight"),
"margin text property is not highlighted.");
ok(computed.hasAttribute("filter-open"), "margin computed list is open.");
ok(computed.children[0].classList.contains("ruleview-highlight"),
"margin-top computed property is correctly highlighted.");
ok(computed.children[1].classList.contains("ruleview-highlight"),
"margin-right computed property is correctly highlighted.");
ok(computed.children[2].classList.contains("ruleview-highlight"),
"margin-bottom computed property is correctly highlighted.");
ok(computed.children[3].classList.contains("ruleview-highlight"),
"margin-left computed property is correctly highlighted.");
}
function* testRemoveTextInFilter(inspector, view) {
info("Press backspace and set filter text to \"margin\"");
let win = view.styleWindow;
let searchField = view.searchField;
searchField.focus();
EventUtils.synthesizeKey("VK_BACK_SPACE", {}, win);
yield inspector.once("ruleview-filtered");
info("Check that the correct rules are visible");
is(view.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(view, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(view, 1).rule;
let ruleEditor = rule.textProps[0].editor;
let computed = ruleEditor.computed;

46
browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_03.js
View File

@ -5,61 +5,43 @@
"use strict";
// Tests that the rule view search filter works properly in the computed list
// for property line input.
// for color values.
const SEARCH = "margin-top:4px";
const SEARCH = "background-color: #F3F3F3";
const TEST_URI = `
<style type="text/css">
#testid {
margin: 4px 0px;
}
.testclass {
background-color: red;
background: #F3F3F3 none repeat scroll 0% 0%;
}
</style>
<h1 id="testid" class="testclass">Styled Node</h1>
<div class="testclass">Styled Node</h1>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield selectNode(".testclass", inspector);
yield testAddTextInFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
function* testAddTextInFilter(inspector, view) {
yield setSearchFilter(view, SEARCH);
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
is(view.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(view, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
let rule = getRuleViewRuleEditor(view, 1).rule;
let ruleEditor = rule.textProps[0].editor;
let computed = ruleEditor.computed;
is(rule.selectorText, "#testid", "Second rule is #testid.");
is(rule.selectorText, ".testclass", "Second rule is .testclass.");
ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
ok(!ruleEditor.container.classList.contains("ruleview-highlight"),
"margin text property is not highlighted.");
ok(computed.hasAttribute("filter-open"), "margin computed list is open.");
"background property is not highlighted.");
ok(computed.hasAttribute("filter-open"), "background computed list is open.");
ok(computed.children[0].classList.contains("ruleview-highlight"),
"margin-top computed property is not highlighted.");
ok(!computed.children[1].classList.contains("ruleview-highlight"),
"margin-right computed property is not highlighted.");
ok(!computed.children[2].classList.contains("ruleview-highlight"),
"margin-bottom computed property is not highlighted.");
ok(!computed.children[3].classList.contains("ruleview-highlight"),
"margin-left computed property is not highlighted.");
"background-color computed property is highlighted.");
}

72
browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_04.js
View File

@ -5,61 +5,59 @@
"use strict";
// Tests that the rule view search filter works properly in the computed list
// for parsed property value.
// for newly modified property values.
const SEARCH = ":4px";
const SEARCH = "0px";
const TEST_URI = `
<style type="text/css">
<style type='text/css'>
#testid {
margin: 4px 0px;
}
.testclass {
background-color: red;
margin: 4px;
top: 0px;
}
</style>
<h1 id="testid" class="testclass">Styled Node</h1>
<h1 id='testid'>Styled Node</h1>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testAddTextInFilter(inspector, view);
yield testModifyPropertyValueFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
function* testModifyPropertyValueFilter(inspector, view) {
yield setSearchFilter(view, SEARCH);
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
let rule = getRuleViewRuleEditor(view, 1).rule;
let propEditor = rule.textProps[0].editor;
let computed = propEditor.computed;
let editor = yield focusEditableField(view, propEditor.valueSpan);
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
let ruleEditor = rule.textProps[0].editor;
let computed = ruleEditor.computed;
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(!ruleEditor.expander.getAttribute("open"), "Expander is closed.");
ok(ruleEditor.container.classList.contains("ruleview-highlight"),
ok(!propEditor.container.classList.contains("ruleview-highlight"),
"margin text property is not highlighted.");
ok(rule.textProps[1].editor.container.classList
.contains("ruleview-highlight"),
"top text property is correctly highlighted.");
let onBlur = once(editor.input, "blur");
let onModification = rule._applyingModifications;
EventUtils.sendString("4px 0px", view.styleWindow);
EventUtils.synthesizeKey("VK_RETURN", {});
yield onBlur;
yield onModification;
ok(propEditor.container.classList.contains("ruleview-highlight"),
"margin text property is correctly highlighted.");
ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
ok(computed.children[0].classList.contains("ruleview-highlight"),
"margin-top computed property is correctly highlighted.");
ok(!computed.children[1].classList.contains("ruleview-highlight"),
"margin-right computed property is not highlighted.");
ok(computed.children[2].classList.contains("ruleview-highlight"),
"margin-bottom computed property is correctly highlighted.");
ok(!computed.children[3].classList.contains("ruleview-highlight"),
"margin-left computed property is not highlighted.");
ok(!computed.children[0].classList.contains("ruleview-highlight"),
"margin-top computed property is not highlighted.");
ok(computed.children[1].classList.contains("ruleview-highlight"),
"margin-right computed property is correctly highlighted.");
ok(!computed.children[2].classList.contains("ruleview-highlight"),
"margin-bottom computed property is not highlighted.");
ok(computed.children[3].classList.contains("ruleview-highlight"),
"margin-left computed property is correctly highlighted.");
}

65
browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_05.js
View File

@ -1,65 +0,0 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the rule view search filter works properly in the computed list
// for parsed property name.
const SEARCH = "margin-top:";
const TEST_URI = `
<style type="text/css">
#testid {
margin: 4px 0px;
}
.testclass {
background-color: red;
}
</style>
<h1 id="testid" class="testclass">Styled Node</h1>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testAddTextInFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
let ruleEditor = rule.textProps[0].editor;
let computed = ruleEditor.computed;
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
ok(!ruleEditor.container.classList.contains("ruleview-highlight"),
"margin text property is not highlighted.");
ok(computed.hasAttribute("filter-open"), "margin computed list is open.");
ok(computed.children[0].classList.contains("ruleview-highlight"),
"margin-top computed property is correctly highlighted.");
ok(!computed.children[1].classList.contains("ruleview-highlight"),
"margin-right computed property is not highlighted.");
ok(!computed.children[2].classList.contains("ruleview-highlight"),
"margin-bottom computed property is not highlighted.");
ok(!computed.children[3].classList.contains("ruleview-highlight"),
"margin-left computed property is not highlighted.");
}

101
browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_06.js
View File

@ -1,101 +0,0 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the rule view search filter works properly in the computed list
// when modifying the existing search filter value
const SEARCH = "margin-";
const TEST_URI = `
<style type="text/css">
#testid {
margin: 4px 0px;
}
.testclass {
background-color: red;
}
</style>
<h1 id="testid" class="testclass">Styled Node</h1>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testAddTextInFilter(inspector, view);
yield testRemoveTextInFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
let ruleEditor = rule.textProps[0].editor;
let computed = ruleEditor.computed;
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
ok(!ruleEditor.container.classList.contains("ruleview-highlight"),
"margin text property is not highlighted.");
ok(computed.hasAttribute("filter-open"), "margin computed list is open.");
ok(computed.children[0].classList.contains("ruleview-highlight"),
"margin-top computed property is correctly highlighted.");
ok(computed.children[1].classList.contains("ruleview-highlight"),
"margin-right computed property is correctly highlighted.");
ok(computed.children[2].classList.contains("ruleview-highlight"),
"margin-bottom computed property is correctly highlighted.");
ok(computed.children[3].classList.contains("ruleview-highlight"),
"margin-left computed property is correctly highlighted.");
}
function* testRemoveTextInFilter(inspector, ruleView) {
info("Press backspace and set filter text to \"margin\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
searchField.focus();
EventUtils.synthesizeKey("VK_BACK_SPACE", {}, win);
yield inspector.once("ruleview-filtered");
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
let ruleEditor = rule.textProps[0].editor;
let computed = ruleEditor.computed;
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(!ruleEditor.expander.getAttribute("open"), "Expander is closed.");
ok(ruleEditor.container.classList.contains("ruleview-highlight"),
"margin text property is correctly highlighted.");
ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
ok(computed.children[0].classList.contains("ruleview-highlight"),
"margin-top computed property is correctly highlighted.");
ok(computed.children[1].classList.contains("ruleview-highlight"),
"margin-right computed property is correctly highlighted.");
ok(computed.children[2].classList.contains("ruleview-highlight"),
"margin-bottom computed property is correctly highlighted.");
ok(computed.children[3].classList.contains("ruleview-highlight"),
"margin-left computed property is correctly highlighted.");
}

55
browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_07.js
View File

@ -1,55 +0,0 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the rule view search filter works properly in the computed list
// for color values.
const SEARCH = "background-color: #F3F3F3";
const TEST_URI = `
<style type="text/css">
.testclass {
background: #F3F3F3 none repeat scroll 0% 0%;
}
</style>
<div class="testclass">Styled Node</h1>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode(".testclass", inspector);
yield testAddTextInFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
let ruleEditor = rule.textProps[0].editor;
let computed = ruleEditor.computed;
is(rule.selectorText, ".testclass", "Second rule is .testclass.");
ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
ok(!ruleEditor.container.classList.contains("ruleview-highlight"),
"background property is not highlighted.");
ok(computed.hasAttribute("filter-open"), "background computed list is open.");
ok(computed.children[0].classList.contains("ruleview-highlight"),
"background-color computed property is highlighted.");
}

70
browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_08.js
View File

@ -1,70 +0,0 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the rule view search filter works properly in the computed list
// for newly modified property values.
const SEARCH = "0px";
const TEST_URI = `
<style type='text/css'>
#testid {
margin: 4px;
top: 0px;
}
</style>
<h1 id='testid'>Styled Node</h1>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testModifyPropertyValueFilter(inspector, view);
});
function* testModifyPropertyValueFilter(inspector, view) {
info("Setting filter text to \"" + SEARCH + "\"");
let searchField = view.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, view.styleWindow);
yield onRuleViewFiltered;
let rule = getRuleViewRuleEditor(view, 1).rule;
let propEditor = rule.textProps[0].editor;
let computed = propEditor.computed;
let editor = yield focusEditableField(view, propEditor.valueSpan);
info("Check that the correct rules are visible");
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(!propEditor.container.classList.contains("ruleview-highlight"),
"margin text property is not highlighted.");
ok(rule.textProps[1].editor.container.classList
.contains("ruleview-highlight"),
"top text property is correctly highlighted.");
let onBlur = once(editor.input, "blur");
let onModification = rule._applyingModifications;
EventUtils.sendString("4px 0px", view.styleWindow);
EventUtils.synthesizeKey("VK_RETURN", {});
yield onBlur;
yield onModification;
ok(propEditor.container.classList.contains("ruleview-highlight"),
"margin text property is correctly highlighted.");
ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
ok(!computed.children[0].classList.contains("ruleview-highlight"),
"margin-top computed property is not highlighted.");
ok(computed.children[1].classList.contains("ruleview-highlight"),
"margin-right computed property is correctly highlighted.");
ok(!computed.children[2].classList.contains("ruleview-highlight"),
"margin-bottom computed property is not highlighted.");
ok(computed.children[3].classList.contains("ruleview-highlight"),
"margin-left computed property is correctly highlighted.");
}

90
browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_clear.js
View File

@ -1,90 +0,0 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the rule view search filter clear button works properly and clears
// the highlighted rules in the computed list.
const SEARCH = "0px";
const TEST_URI = `
<style type="text/css">
#testid {
margin: 4px 0px;
}
.testclass {
background-color: red;
}
</style>
<h1 id="testid" class="testclass">Styled Node</h1>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testAddTextInFilter(inspector, view);
yield testClearSearchFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, ruleView.styleWindow);
yield onRuleViewFiltered;
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
let ruleEditor = rule.textProps[0].editor;
let computed = ruleEditor.computed;
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(!ruleEditor.expander.getAttribute("open"), "Expander is closed.");
ok(ruleEditor.container.classList.contains("ruleview-highlight"),
"margin text property is correctly highlighted.");
ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
ok(!computed.children[0].classList.contains("ruleview-highlight"),
"margin-top computed property is not highlighted.");
ok(computed.children[1].classList.contains("ruleview-highlight"),
"margin-right computed property is correctly highlighted.");
ok(!computed.children[2].classList.contains("ruleview-highlight"),
"margin-bottom computed property is not highlighted.");
ok(computed.children[3].classList.contains("ruleview-highlight"),
"margin-left computed property is correctly highlighted.");
}
function* testClearSearchFilter(inspector, ruleView) {
info("Clearing the search filter");
let searchField = ruleView.searchField;
let searchClearButton = ruleView.searchClearButton;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
EventUtils.synthesizeMouseAtCenter(searchClearButton, {},
ruleView.styleWindow);
yield onRuleViewFiltered;
info("Check the search filter is cleared and no rules are highlighted");
is(ruleView.element.children.length, 3, "Should have 3 rules.");
ok(!searchField.value, "Search filter is cleared");
ok(!ruleView.styleDocument.querySelectorAll(".ruleview-highlight").length,
"No rules are higlighted");
let ruleEditor = getRuleViewRuleEditor(ruleView, 1).rule.textProps[0].editor;
let computed = ruleEditor.computed;
ok(!ruleEditor.expander.getAttribute("open"), "Expander is closed.");
ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
}

29
browser/devtools/styleinspector/test/browser_ruleview_search-filter-computed-list_expander.js
View File

@ -29,24 +29,19 @@ add_task(function*() {
yield testClearSearchFilter(inspector, view);
});
function* testOpenExpanderAndAddTextInFilter(inspector, ruleView) {
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
function* testOpenExpanderAndAddTextInFilter(inspector, view) {
let rule = getRuleViewRuleEditor(view, 1).rule;
let ruleEditor = rule.textProps[0].editor;
let computed = ruleEditor.computed;
info("Opening the computed list of margin property");
ruleEditor.expander.click();
info("Setting filter text to \"" + SEARCH + "\"");
searchField.focus();
synthesizeKeys(SEARCH, ruleView.styleWindow);
yield onRuleViewFiltered;
yield setSearchFilter(view, SEARCH);
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
is(view.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(view, 0).rule.selectorText, "element",
"First rule is inline element.");
is(rule.selectorText, "#testid", "Second rule is #testid.");
@ -68,25 +63,25 @@ function* testOpenExpanderAndAddTextInFilter(inspector, ruleView) {
"margin-left computed property is correctly highlighted.");
}
function* testClearSearchFilter(inspector, ruleView) {
function* testClearSearchFilter(inspector, view) {
info("Clearing the search filter");
let searchField = ruleView.searchField;
let searchClearButton = ruleView.searchClearButton;
let searchField = view.searchField;
let searchClearButton = view.searchClearButton;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
EventUtils.synthesizeMouseAtCenter(searchClearButton, {},
ruleView.styleWindow);
view.styleWindow);
yield onRuleViewFiltered;
info("Check the search filter is cleared and no rules are highlighted");
is(ruleView.element.children.length, 3, "Should have 3 rules.");
is(view.element.children.length, 3, "Should have 3 rules.");
ok(!searchField.value, "Search filter is cleared");
ok(!ruleView.styleDocument.querySelectorAll(".ruleview-highlight").length,
ok(!view.styleDocument.querySelectorAll(".ruleview-highlight").length,
"No rules are higlighted");
let ruleEditor = getRuleViewRuleEditor(ruleView, 1).rule.textProps[0].editor;
let ruleEditor = getRuleViewRuleEditor(view, 1).rule.textProps[0].editor;
let computed = ruleEditor.computed;
ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");

75
browser/devtools/styleinspector/test/browser_ruleview_search-filter_01.js
View File

@ -4,14 +4,12 @@
"use strict";
// Tests that the rule view search filter works properly for property values.
const SEARCH = "00F";
// Tests that the rule view search filter and clear button works properly.
const TEST_URI = `
<style type="text/css">
#testid {
background-color: #00F;
#testid, h1 {
background-color: #00F !important;
}
.testclass {
width: 100%;
@ -20,6 +18,29 @@ const TEST_URI = `
<h1 id="testid" class="testclass">Styled Node</h1>
`;
const TEST_DATA = [
{
desc: "Tests that the search filter works properly for property names",
search: "color"
},
{
desc: "Tests that the search filter works properly for property values",
search: "00F"
},
{
desc: "Tests that the search filter works properly for property line input",
search: "background-color:#00F"
},
{
desc: "Tests that the search filter works properly for parsed property name",
search: "background:"
},
{
desc: "Tests that the search filter works properly for parsed property value",
search: ":00F"
},
];
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
@ -27,26 +48,42 @@ add_task(function*() {
yield testAddTextInFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
function* testAddTextInFilter(inspector, view) {
for (let data of TEST_DATA) {
info(data.desc);
yield setSearchFilter(view, data.search);
yield checkRules(view);
yield clearSearchAndCheckRules(view);
}
}
function* checkRules(view) {
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
is(view.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(view, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
let rule = getRuleViewRuleEditor(view, 1).rule;
is(rule.selectorText, "#testid", "Second rule is #testid.");
is(rule.selectorText, "#testid, h1", "Second rule is #testid, h1.");
ok(rule.textProps[0].editor.container.classList
.contains("ruleview-highlight"),
"background-color text property is correctly highlighted.");
}
function* clearSearchAndCheckRules(view) {
let doc = view.styleDocument;
let win = view.styleWindow;
let searchField = view.searchField;
let searchClearButton = view.searchClearButton;
info("Clearing the search filter");
EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
yield view.inspector.once("ruleview-filtered");
info("Check the search filter is cleared and no rules are highlighted");
is(view.element.children.length, 3, "Should have 3 rules.");
ok(!searchField.value, "Search filter is cleared.");
ok(!doc.querySelectorAll(".ruleview-highlight").length,
"No rules are higlighted.");
}

47
browser/devtools/styleinspector/test/browser_ruleview_search-filter_02.js
View File

@ -4,50 +4,29 @@
"use strict";
// Tests that the rule view search filter works properly for property names.
// Tests that the rule view search filter works properly for keyframe rule
// selectors.
const SEARCH = "color";
const TEST_URI = `
<style type="text/css">
#testid {
font-family: arial;
background-color: #00F;
}
.testclass {
width: 100%;
}
</style>
<h1 id="testid" class="testclass">Styled Node</h1>
`;
const SEARCH = "20%";
const TEST_URI = TEST_URL_ROOT + "doc_keyframeanimation.html";
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
yield addTab(TEST_URI);
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield selectNode("#boxy", inspector);
yield testAddTextInFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
function* testAddTextInFilter(inspector, view) {
yield setSearchFilter(view, SEARCH);
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
is(getRuleViewRuleEditor(view, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
let ruleEditor = getRuleViewRuleEditor(view, 2, 0);
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(rule.textProps[1].editor.container.classList
.contains("ruleview-highlight"),
"background-color text property is correctly highlighted.");
is(ruleEditor.rule.domRule.keyText, "20%", "Second rule is 20%.");
ok(ruleEditor.selectorText.classList.contains("ruleview-highlight"),
"20% selector is highlighted.");
}

34
browser/devtools/styleinspector/test/browser_ruleview_search-filter_03.js
View File

@ -4,20 +4,17 @@
"use strict";
// Tests that the rule view search filter works properly for rule selectors.
// Tests that the rule view search filter works properly for inline styles.
const SEARCH = "#test";
const SEARCH = "color";
const TEST_URI = `
<style type="text/css">
#testid {
background-color: #00F;
}
.testclass {
width: 100%;
}
</style>
<h1 id="testid" class="testclass">Styled Node</h1>
<div id="testid" style="background-color:aliceblue">Styled Node</div>
`;
add_task(function*() {
@ -27,25 +24,16 @@ add_task(function*() {
yield testAddTextInFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFilter = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFilter;
function* testAddTextInFilter(inspector, view) {
yield setSearchFilter(view, SEARCH);
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
"First rule is inline element.");
is(view.element.children.length, 1, "Should have 1 rule.");
let ruleEditor = getRuleViewRuleEditor(ruleView, 1);
let rule = getRuleViewRuleEditor(view, 0).rule;
is(ruleEditor.rule.selectorText, "#testid", "Second rule is #testid.");
ok(ruleEditor.selectorText.children[0].classList
.contains("ruleview-highlight"), "#testid selector is highlighted.");
is(rule.selectorText, "element", "First rule is inline element.");
ok(rule.textProps[0].editor.container.classList
.contains("ruleview-highlight"),
"background-color text property is correctly highlighted.");
}

78
browser/devtools/styleinspector/test/browser_ruleview_search-filter_04.js
View File

@ -4,37 +4,73 @@
"use strict";
// Tests that the rule view search filter works properly for keyframe rule
// selectors.
// Tests that the rule view search filter works properly when modifying the
// existing search filter value.
const SEARCH = "20%";
const TEST_URI = TEST_URL_ROOT + "doc_keyframeanimation.html";
const SEARCH = "00F";
const TEST_URI = `
<style type="text/css">
#testid {
background-color: #00F;
}
.testclass {
width: 100%;
}
</style>
<div id="testid" class="testclass">Styled Node</div>
`;
add_task(function*() {
yield addTab(TEST_URI);
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#boxy", inspector);
yield selectNode("#testid", inspector);
yield testAddTextInFilter(inspector, view);
yield testRemoveTextInFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFilter = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFilter;
function* testAddTextInFilter(inspector, view) {
yield setSearchFilter(view, SEARCH);
info("Check that the correct rules are visible");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
is(view.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(view, 0).rule.selectorText, "element",
"First rule is inline element.");
let ruleEditor = getRuleViewRuleEditor(ruleView, 2, 0);
let rule = getRuleViewRuleEditor(view, 1).rule;
is(ruleEditor.rule.domRule.keyText, "20%", "Second rule is 20%.");
ok(ruleEditor.selectorText.classList.contains("ruleview-highlight"),
"20% selector is highlighted.");
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(rule.textProps[0].editor.container.classList
.contains("ruleview-highlight"),
"background-color text property is correctly highlighted.");
}
function* testRemoveTextInFilter(inspector, view) {
info("Press backspace and set filter text to \"00\"");
let win = view.styleWindow;
let searchField = view.searchField;
searchField.focus();
EventUtils.synthesizeKey("VK_BACK_SPACE", {}, win);
yield inspector.once("ruleview-filtered");
info("Check that the correct rules are visible");
is(view.element.children.length, 3, "Should have 3 rules.");
is(getRuleViewRuleEditor(view, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(view, 1).rule;
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(rule.textProps[0].editor.container.classList
.contains("ruleview-highlight"),
"background-color text property is correctly highlighted.");
rule = getRuleViewRuleEditor(view, 2).rule;
is(rule.selectorText, ".testclass", "Second rule is .testclass.");
ok(rule.textProps[0].editor.container.classList
.contains("ruleview-highlight"),
"width text property is correctly highlighted.");
}

48
browser/devtools/styleinspector/test/browser_ruleview_search-filter_05.js
View File

@ -4,50 +4,30 @@
"use strict";
// Tests that the rule view search filter works properly for multiple rule
// selectors.
// Tests that the rule view search filter works properly for stylesheet source.
const SEARCH = "body";
const TEST_URI = `
<style type="text/css">
html, body, div {
background-color: #00F;
}
.testclass {
width: 100%;
}
</style>
<div id="testid" class="testclass">Styled Node</div>
`;
const SEARCH = "doc_urls_clickable.css";
const TEST_URI = TEST_URL_ROOT + "doc_urls_clickable.html";
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
yield addTab(TEST_URI);
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield selectNode(".relative1", inspector);
yield testAddTextInFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFilter = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFilter;
function* testAddTextInFilter(inspector, view) {
yield setSearchFilter(view, SEARCH);
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
is(view.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(view, 0).rule.selectorText, "element",
"First rule is inline element.");
let ruleEditor = getRuleViewRuleEditor(ruleView, 1);
let rule = getRuleViewRuleEditor(view, 1).rule;
let source = rule.textProps[0].editor.ruleEditor.source;
is(ruleEditor.rule.selectorText, "html, body, div",
"Second rule is html, body, div.");
ok(ruleEditor.selectorText.children[2].classList
.contains("ruleview-highlight"), "body selector is highlighted.");
is(rule.selectorText, ".relative1", "Second rule is .relative1.");
ok(source.classList.contains("ruleview-highlight"),
"stylesheet source is correctly highlighted.");
}

46
browser/devtools/styleinspector/test/browser_ruleview_search-filter_06.js
View File

@ -4,50 +4,24 @@
"use strict";
// Tests that the rule view search filter works properly for property line
// input.
// Tests that the rule view search filter does not highlight the source with
// input that could be parsed as a property line.
const SEARCH = "background-color:#00F";
const TEST_URI = `
<style type="text/css">
#testid {
background-color: #FFF;
}
.testclass {
background-color: #00F;
}
</style>
<div id="testid" class="testclass">Styled Node</div>
`;
const SEARCH = "doc_urls_clickable.css: url";
const TEST_URI = TEST_URL_ROOT + "doc_urls_clickable.html";
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
yield addTab(TEST_URI);
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield selectNode(".relative1", inspector);
yield testAddTextInFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
function* testAddTextInFilter(inspector, view) {
yield setSearchFilter(view, SEARCH);
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
is(view.element.children.length, 1, "Should have 1 rules.");
is(getRuleViewRuleEditor(view, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
is(rule.selectorText, ".testclass", "Second rule is .testclass.");
ok(rule.textProps[0].editor.container.classList
.contains("ruleview-highlight"),
"background-color text property is correctly highlighted.");
}

54
browser/devtools/styleinspector/test/browser_ruleview_search-filter_07.js
View File

@ -4,50 +4,52 @@
"use strict";
// Tests that the rule view search filter works properly for parsed property
// value.
// Tests that the rule view search filter works properly for newly modified
// property name.
const SEARCH = ":00F";
const SEARCH = "e";
const TEST_URI = `
<style type="text/css">
<style type='text/css'>
#testid {
background-color: #00F;
}
.testclass {
width: 100%;
height: 50%;
}
</style>
<div id="testid" class="testclass">Styled Node</div>
<h1 id='testid'>Styled Node</h1>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testAddTextInFilter(inspector, view);
yield testModifyPropertyNameFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
function* testModifyPropertyNameFilter(inspector, view) {
yield setSearchFilter(view, SEARCH);
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
let ruleEditor = getRuleViewRuleEditor(view, 1);
let rule = ruleEditor.rule;
let propEditor = rule.textProps[0].editor;
let editor = yield focusEditableField(view, propEditor.nameSpan);
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
is(view.element.children.length, 2, "Should have 2 rules.");
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(rule.textProps[0].editor.container.classList
ok(!propEditor.container.classList.contains("ruleview-highlight"),
"width text property is not highlighted.");
ok(rule.textProps[1].editor.container.classList
.contains("ruleview-highlight"),
"background-color text property is correctly highlighted.");
"height text property is correctly highlighted.");
let onBlur = once(editor.input, "blur");
let onModification = rule._applyingModifications;
EventUtils.sendString("margin-left", view.styleWindow);
EventUtils.synthesizeKey("VK_RETURN", {});
yield onBlur;
yield onModification;
ok(propEditor.container.classList.contains("ruleview-highlight"),
"margin-left text property is correctly highlighted.");
}

52
browser/devtools/styleinspector/test/browser_ruleview_search-filter_08.js
View File

@ -4,50 +4,52 @@
"use strict";
// Tests that the rule view search filter works properly for parsed property
// name.
// Tests that the rule view search filter works properly for newly modified
// property value.
const SEARCH = "background:";
const SEARCH = "100%";
const TEST_URI = `
<style type="text/css">
<style type='text/css'>
#testid {
background-color: #00F;
}
.testclass {
width: 100%;
height: 50%;
}
</style>
<div id="testid" class="testclass">Styled Node</div>
<h1 id='testid'>Styled Node</h1>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testAddTextInFilter(inspector, view);
yield testModifyPropertyValueFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
function* testModifyPropertyValueFilter(inspector, view) {
yield setSearchFilter(view, SEARCH);
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
let ruleEditor = getRuleViewRuleEditor(view, 1);
let rule = ruleEditor.rule;
let propEditor = rule.textProps[1].editor;
let editor = yield focusEditableField(view, propEditor.valueSpan);
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
is(view.element.children.length, 2, "Should have 2 rules.");
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(rule.textProps[0].editor.container.classList
.contains("ruleview-highlight"),
"background-color text property is correctly highlighted.");
"width text property is correctly highlighted.");
ok(!propEditor.container.classList.contains("ruleview-highlight"),
"height text property is not highlighted.");
let onBlur = once(editor.input, "blur");
let onModification = rule._applyingModifications;
EventUtils.sendString("100%", view.styleWindow);
EventUtils.synthesizeKey("VK_RETURN", {});
yield onBlur;
yield onModification;
ok(propEditor.container.classList.contains("ruleview-highlight"),
"height text property is correctly highlighted.");
}

65
browser/devtools/styleinspector/test/browser_ruleview_search-filter_09.js
View File

@ -4,44 +4,69 @@
"use strict";
// Tests that the rule view search filter works properly for inline styles.
// Tests that the rule view search filter works properly for newly added
// property.
const SEARCH = "color";
const SEARCH = "100%";
const TEST_URI = `
<style type="text/css">
<style type='text/css'>
#testid {
width: 100%;
height: 50%;
}
</style>
<div id="testid" style="background-color:aliceblue">Styled Node</div>
<h1 id='testid'>Styled Node</h1>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testAddTextInFilter(inspector, view);
yield testNewPropertyFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
function* testNewPropertyFilter(inspector, view) {
yield setSearchFilter(view, SEARCH);
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
let ruleEditor = getRuleViewRuleEditor(view, 1);
let rule = ruleEditor.rule;
let editor = yield focusEditableField(view, ruleEditor.closeBrace);
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 1, "Should have 1 rule.");
let rule = getRuleViewRuleEditor(ruleView, 0).rule;
is(rule.selectorText, "element", "First rule is inline element.");
is(view.element.children.length, 2, "Should have 2 rules.");
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(rule.textProps[0].editor.container.classList
.contains("ruleview-highlight"),
"background-color text property is correctly highlighted.");
"width text property is correctly highlighted.");
ok(!rule.textProps[1].editor.container.classList
.contains("ruleview-highlight"),
"height text property is not highlighted.");
info("Test creating a new property");
info("Entering margin-left in the property name editor");
editor.input.value = "margin-left";
info("Pressing return to commit and focus the new value field");
let onValueFocus = once(ruleEditor.element, "focus", true);
let onModifications = ruleEditor.rule._applyingModifications;
EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
yield onValueFocus;
yield onModifications;
// Getting the new value editor after focus
editor = inplaceEditor(view.styleDocument.activeElement);
let propEditor = ruleEditor.rule.textProps[2].editor;
info("Entering a value and bluring the field to expect a rule change");
editor.input.value = "100%";
let onBlur = once(editor.input, "blur");
onModifications = ruleEditor.rule._applyingModifications;
editor.input.blur();
yield onBlur;
yield onModifications;
ok(propEditor.container.classList.contains("ruleview-highlight"),
"margin-left text property is correctly highlighted.");
}

102
browser/devtools/styleinspector/test/browser_ruleview_search-filter_10.js
View File

@ -4,81 +4,79 @@
"use strict";
// Tests that the rule view search filter works properly when modifying the
// existing search filter value
const SEARCH = "00F";
// Tests that the rule view search filter works properly for rule selectors.
const TEST_URI = `
<style type="text/css">
#testid {
html, body, div {
background-color: #00F;
}
.testclass {
#testid {
width: 100%;
}
</style>
<div id="testid" class="testclass">Styled Node</div>
`;
const TEST_DATA = [
{
desc: "Tests that the search filter works properly for a single rule selector",
search: "#test",
selectorText: "#testid",
index: 0
},
{
desc: "Tests that the search filter works properly for multiple rule selectors",
search: "body",
selectorText: "html, body, div",
index: 2
}
];
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testAddTextInFilter(inspector, view);
yield testRemoveTextInFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(rule.textProps[0].editor.container.classList
.contains("ruleview-highlight"),
"background-color text property is correctly highlighted.");
function* testAddTextInFilter(inspector, view) {
for (let data of TEST_DATA) {
info(data.desc);
yield setSearchFilter(view, data.search);
yield checkRules(view, data);
yield clearSearchAndCheckRules(view);
}
}
function* testRemoveTextInFilter(inspector, ruleView) {
info("Press backspace and set filter text to \"00\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
searchField.focus();
EventUtils.synthesizeKey("VK_BACK_SPACE", {}, win);
yield inspector.once("ruleview-filtered");
function* checkRules(view, data) {
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 3, "Should have 3 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
is(view.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(view, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
let ruleEditor = getRuleViewRuleEditor(view, 1);
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(rule.textProps[0].editor.container.classList
is(ruleEditor.rule.selectorText, data.selectorText,
"Second rule is " + data.selectorText + ".");
ok(ruleEditor.selectorText.children[data.index].classList
.contains("ruleview-highlight"),
"background-color text property is correctly highlighted.");
rule = getRuleViewRuleEditor(ruleView, 2).rule;
is(rule.selectorText, ".testclass", "Second rule is .testclass.");
ok(rule.textProps[0].editor.container.classList
.contains("ruleview-highlight"),
"width text property is correctly highlighted.");
data.selectorText + " selector is highlighted.");
}
function* clearSearchAndCheckRules(view) {
let doc = view.styleDocument;
let win = view.styleWindow;
let searchField = view.searchField;
let searchClearButton = view.searchClearButton;
info("Clearing the search filter");
EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
yield view.inspector.once("ruleview-filtered");
info("Check the search filter is cleared and no rules are highlighted");
is(view.element.children.length, 3, "Should have 3 rules.");
ok(!searchField.value, "Search filter is cleared.");
ok(!doc.querySelectorAll(".ruleview-highlight").length,
"No rules are higlighted.");
}

52
browser/devtools/styleinspector/test/browser_ruleview_search-filter_11.js
View File

@ -1,52 +0,0 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the rule view search filter can find "!important".
const SEARCH = "!important";
const TEST_URI = `
<style type="text/css">
#testid {
background-color: #00F !important;
}
.testclass {
width: 100%;
}
</style>
<h1 id="testid" class="testclass">Styled Node</h1>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testAddTextInFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(rule.textProps[0].editor.container.classList
.contains("ruleview-highlight"),
"background-color text property is correctly highlighted.");
}

41
browser/devtools/styleinspector/test/browser_ruleview_search-filter_12.js
View File

@ -1,41 +0,0 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the rule view search filter works properly for stylesheet source.
const SEARCH = "doc_urls_clickable.css";
const TEST_URI = TEST_URL_ROOT + "doc_urls_clickable.html";
add_task(function*() {
yield addTab(TEST_URI);
let {inspector, view} = yield openRuleView();
yield selectNode(".relative1", inspector);
yield testAddTextInFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
let source = rule.textProps[0].editor.ruleEditor.source;
is(rule.selectorText, ".relative1", "Second rule is .relative1.");
ok(source.classList.contains("ruleview-highlight"),
"stylesheet source is correctly highlighted.");
}

35
browser/devtools/styleinspector/test/browser_ruleview_search-filter_13.js
View File

@ -1,35 +0,0 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the rule view search filter does not highlight the source with
// input that could be parsed as a property line.
const SEARCH = "doc_urls_clickable.css: url";
const TEST_URI = TEST_URL_ROOT + "doc_urls_clickable.html";
add_task(function*() {
yield addTab(TEST_URI);
let {inspector, view} = yield openRuleView();
yield selectNode(".relative1", inspector);
yield testAddTextInFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 1, "Should have 1 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
"First rule is inline element.");
}

62
browser/devtools/styleinspector/test/browser_ruleview_search-filter_14.js
View File

@ -1,62 +0,0 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the rule view search filter works properly for newly modified
// property value.
const SEARCH = "100%";
const TEST_URI = `
<style type='text/css'>
#testid {
width: 100%;
height: 50%;
}
</style>
<h1 id='testid'>Styled Node</h1>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testModifyPropertyValueFilter(inspector, view);
});
function* testModifyPropertyValueFilter(inspector, view) {
info("Setting filter text to \"" + SEARCH + "\"");
let searchField = view.searchField;
let onvRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, view.styleWindow);
yield onvRuleViewFiltered;
let ruleEditor = getRuleViewRuleEditor(view, 1);
let rule = ruleEditor.rule;
let propEditor = rule.textProps[1].editor;
let editor = yield focusEditableField(view, propEditor.valueSpan);
info("Check that the correct rules are visible");
is(view.element.children.length, 2, "Should have 2 rules.");
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(rule.textProps[0].editor.container.classList
.contains("ruleview-highlight"),
"width text property is correctly highlighted.");
ok(!propEditor.container.classList.contains("ruleview-highlight"),
"height text property is not highlighted.");
let onBlur = once(editor.input, "blur");
let onModification = rule._applyingModifications;
EventUtils.sendString("100%", view.styleWindow);
EventUtils.synthesizeKey("VK_RETURN", {});
yield onBlur;
yield onModification;
ok(propEditor.container.classList.contains("ruleview-highlight"),
"height text property is correctly highlighted.");
}

62
browser/devtools/styleinspector/test/browser_ruleview_search-filter_15.js
View File

@ -1,62 +0,0 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the rule view search filter works properly for newly modified
// property name.
const SEARCH = "e";
const TEST_URI = `
<style type='text/css'>
#testid {
width: 100%;
height: 50%;
}
</style>
<h1 id='testid'>Styled Node</h1>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testModifyPropertyNameFilter(inspector, view);
});
function* testModifyPropertyNameFilter(inspector, view) {
info("Setting filter text to \"" + SEARCH + "\"");
let searchField = view.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, view.styleWindow);
yield onRuleViewFiltered;
let ruleEditor = getRuleViewRuleEditor(view, 1);
let rule = ruleEditor.rule;
let propEditor = rule.textProps[0].editor;
let editor = yield focusEditableField(view, propEditor.nameSpan);
info("Check that the correct rules are visible");
is(view.element.children.length, 2, "Should have 2 rules.");
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(!propEditor.container.classList.contains("ruleview-highlight"),
"width text property is not highlighted.");
ok(rule.textProps[1].editor.container.classList
.contains("ruleview-highlight"),
"height text property is correctly highlighted.");
let onBlur = once(editor.input, "blur");
let onModification = rule._applyingModifications;
EventUtils.sendString("margin-left", view.styleWindow);
EventUtils.synthesizeKey("VK_RETURN", {});
yield onBlur;
yield onModification;
ok(propEditor.container.classList.contains("ruleview-highlight"),
"margin-left text property is correctly highlighted.");
}

79
browser/devtools/styleinspector/test/browser_ruleview_search-filter_16.js
View File

@ -1,79 +0,0 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the rule view search filter works properly for newly added
// property.
const SEARCH = "100%";
const TEST_URI = `
<style type='text/css'>
#testid {
width: 100%;
height: 50%;
}
</style>
<h1 id='testid'>Styled Node</h1>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testNewPropertyFilter(inspector, view);
});
function* testNewPropertyFilter(inspector, view) {
info("Setting filter text to \"" + SEARCH + "\"");
let searchField = view.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, view.styleWindow);
yield onRuleViewFiltered;
let ruleEditor = getRuleViewRuleEditor(view, 1);
let rule = ruleEditor.rule;
let editor = yield focusEditableField(view, ruleEditor.closeBrace);
info("Check that the correct rules are visible");
is(view.element.children.length, 2, "Should have 2 rules.");
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(rule.textProps[0].editor.container.classList
.contains("ruleview-highlight"),
"width text property is correctly highlighted.");
ok(!rule.textProps[1].editor.container.classList
.contains("ruleview-highlight"),
"height text property is not highlighted.");
info("Test creating a new property");
info("Entering margin-left in the property name editor");
editor.input.value = "margin-left";
info("Pressing return to commit and focus the new value field");
let onValueFocus = once(ruleEditor.element, "focus", true);
let onModifications = ruleEditor.rule._applyingModifications;
EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
yield onValueFocus;
yield onModifications;
// Getting the new value editor after focus
editor = inplaceEditor(view.styleDocument.activeElement);
let propEditor = ruleEditor.rule.textProps[2].editor;
info("Entering a value and bluring the field to expect a rule change");
editor.input.value = "100%";
let onBlur = once(editor.input, "blur");
onModifications = ruleEditor.rule._applyingModifications;
editor.input.blur();
yield onBlur;
yield onModifications;
ok(propEditor.container.classList.contains("ruleview-highlight"),
"margin-left text property is correctly highlighted.");
}

73
browser/devtools/styleinspector/test/browser_ruleview_search-filter_clear.js
View File

@ -1,73 +0,0 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the rule view search filter clear button works properly.
const SEARCH = "00F";
const TEST_URI = `
<style type="text/css">
#testid {
background-color: #00F;
}
.testclass {
width: 100%;
}
</style>
<div id="testid" class="testclass">Styled Node</div>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testAddTextInFilter(inspector, view);
yield testClearSearchFilter(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"" + SEARCH + "\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys(SEARCH, win);
yield onRuleViewFiltered;
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(rule.textProps[0].editor.container.classList
.contains("ruleview-highlight"),
"background-color text property is correctly highlighted.");
}
function* testClearSearchFilter(inspector, ruleView) {
info("Clearing the search filter");
let doc = ruleView.styleDocument;
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let searchClearButton = ruleView.searchClearButton;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
yield onRuleViewFiltered;
info("Check the search filter is cleared and no rules are highlighted");
is(ruleView.element.children.length, 3, "Should have 3 rules.");
ok(!searchField.value, "Search filter is cleared");
ok(!doc.querySelectorAll(".ruleview-highlight").length,
"No rules are higlighted");
}

30
browser/devtools/styleinspector/test/browser_ruleview_search-filter_escape-keypress.js
View File

@ -7,6 +7,8 @@
// Tests that the rule view search filter escape keypress will clear the search
// field.
const SEARCH = "00F";
const TEST_URI = `
<style type="text/css">
#testid {
@ -27,23 +29,15 @@ add_task(function*() {
yield testEscapeKeypress(inspector, view);
});
function* testAddTextInFilter(inspector, ruleView) {
info("Setting filter text to \"00F\"");
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
synthesizeKeys("00F", win);
yield onRuleViewFiltered;
function* testAddTextInFilter(inspector, view) {
yield setSearchFilter(view, SEARCH);
info("Check that the correct rules are visible");
is(ruleView.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(ruleView, 0).rule.selectorText, "element",
is(view.element.children.length, 2, "Should have 2 rules.");
is(getRuleViewRuleEditor(view, 0).rule.selectorText, "element",
"First rule is inline element.");
let rule = getRuleViewRuleEditor(ruleView, 1).rule;
let rule = getRuleViewRuleEditor(view, 1).rule;
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(rule.textProps[0].editor.container.classList
@ -51,12 +45,12 @@ function* testAddTextInFilter(inspector, ruleView) {
"background-color text property is correctly highlighted.");
}
function* testEscapeKeypress(inspector, ruleView) {
function* testEscapeKeypress(inspector, view) {
info("Pressing the escape key on search filter");
let doc = ruleView.styleDocument;
let win = ruleView.styleWindow;
let searchField = ruleView.searchField;
let doc = view.styleDocument;
let win = view.styleWindow;
let searchField = view.searchField;
let onRuleViewFiltered = inspector.once("ruleview-filtered");
searchField.focus();
@ -64,7 +58,7 @@ function* testEscapeKeypress(inspector, ruleView) {
yield onRuleViewFiltered;
info("Check the search filter is cleared and no rules are highlighted");
is(ruleView.element.children.length, 3, "Should have 3 rules.");
is(view.element.children.length, 3, "Should have 3 rules.");
ok(!searchField.value, "Search filter is cleared");
ok(!doc.querySelectorAll(".ruleview-highlight").length,
"No rules are higlighted");

19
browser/devtools/styleinspector/test/head.js
View File

@ -910,6 +910,25 @@ let createNewRuleViewProperty = Task.async(function*(ruleEditor, inputValue) {
yield onFocus;
});
/**
* Set the search value for the rule-view filter styles search box.
*
* @param {CssRuleView} view
* The instance of the rule-view panel
* @param {String} searchValue
* The filter search value
* @return a promise that resolves when the rule-view is filtered for the
* search term
*/
let setSearchFilter = Task.async(function*(view, searchValue) {
info("Setting filter text to \"" + searchValue + "\"");
let win = view.styleWindow;
let searchField = view.searchField;
searchField.focus();
synthesizeKeys(searchValue, win);
yield view.inspector.once("ruleview-filtered");
});
/* *********************************************
* COMPUTED-VIEW
* *********************************************