Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Tests that the text editor correctly display the grid-template-areas value.
// The CSS Grid spec allows to create grid-template-areas in an ascii-art style matrix.
// It should show each string on its own line, when displaying rules for grid-template-areas.
const TEST_URI = `
<style type='text/css'>
#testid {
display: grid;
grid-template-areas: "a a bb"
'a a bb'
"ccc ccc bb";
}
#testid-quotes {
quotes: "«" "»" "‹" "›";
}
#testid-invalid-strings {
grid-template-areas: "a a b"
"a a";
}
#testid-valid-quotefree-value {
grid-template-areas: inherit;
}
.a {
grid-area: a;
}
.b {
grid-area: bb;
}
.c {
grid-area: ccc;
}
</style>
<div id="testid">
<div class="a">cell a</div>
<div class="b">cell b</div>
<div class="c">cell c</div>
</div>
<q id="testid-quotes">
Show us the wonder-working <q>Brothers,</q> let them come out publicly—and we will believe in them!
</q>
<div id="testid-invalid-strings">
<div class="a">cell a</div>
<div class="b">cell b</div>
</div>
<div id="testid-valid-quotefree-value">
<div class="a">cell a</div>
<div class="b">cell b</div>
</div>
`;
const multiLinesInnerText = '\n"a a bb" \n\'a a bb\' \n"ccc ccc bb"';
const typedAndCopiedMultiLinesString = '"a a bb ccc" "a a bb ccc"';
const typedAndCopiedMultiLinesInnerText = '\n"a a bb ccc" \n"a a bb ccc"';
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
info("Selecting the test node");
await selectNode("#testid", inspector);
info(
"Tests display of grid-template-areas value in an ascii-art style," +
"displaying each string on its own line"
);
const gridRuleProperty = await getRuleViewProperty(
view,
"#testid",
"grid-template-areas"
).valueSpan;
is(
gridRuleProperty.innerText,
multiLinesInnerText,
"the grid-area is displayed with each string in its own line, and sufficient spacing for areas to align vertically"
);
// copy/paste the current value inside, to also make sure of the value copied is useful as text
// Calculate offsets to click in the value line which is below the property name line .
const rect = gridRuleProperty.getBoundingClientRect();
const previousProperty = await getRuleViewProperty(
view,
"#testid",
"display"
).nameSpan.getBoundingClientRect();
const x = rect.width / 2;
const y = rect.y - previousProperty.y + 1;
info("Focusing the css property editable value");
await focusEditableField(view, gridRuleProperty, x, y);
info("typing a new value");
[...typedAndCopiedMultiLinesString].map(char =>
EventUtils.synthesizeKey(char, {}, view.styleWindow)
);
EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
is(
gridRuleProperty.innerText,
typedAndCopiedMultiLinesInnerText,
"the typed value is correct, and a single quote is displayed on its own line"
);
info("copy-paste the 'grid-template-areas' property value to duplicate it");
const onDone = view.once("ruleview-changed");
await focusEditableField(view, gridRuleProperty, x, y);
EventUtils.synthesizeKey("C", { accelKey: true }, view.styleWindow);
EventUtils.synthesizeKey("KEY_ArrowRight", {}, view.styleWindow);
EventUtils.synthesizeKey("V", { accelKey: true }, view.styleWindow);
EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
await onDone;
info("Check copy-pasting the property value is not breaking it");
is(
gridRuleProperty.innerText,
typedAndCopiedMultiLinesInnerText + " " + typedAndCopiedMultiLinesInnerText,
"copy-pasting the current value duplicate the correct value, with each string of the multi strings grid-template-areas value is displayed on a new line"
);
// test that when "non grid-template-area", like quotes for example, its multi-string value is not displayed over multiple lines
await selectNode("#testid-quotes", inspector);
info(
"Tests display of content string value is NOT in an ascii-art style," +
"displaying each string on a single line"
);
const contentRuleProperty = await getRuleViewProperty(
view,
"#testid-quotes",
"quotes"
).valueSpan;
is(
contentRuleProperty.innerText,
'"«" "»" "‹" "›"',
"the quotes strings values are all displayed on the same single line"
);
// test that when invalid strings values do not get formatted
info("testing it does not try to format invalid values");
await selectNode("#testid-invalid-strings", inspector);
const invalidGridRuleProperty = await getRuleViewProperty(
view,
"#testid-invalid-strings",
"grid-template-areas"
).valueSpan;
is(
invalidGridRuleProperty.innerText,
'"a a b" "a a"',
"the invalid strings values do not get formatted"
);
// test that when a valid value without quotes such as `inherit` it does not get formatted
info("testing it does not try to format valid non-quote values");
await selectNode("#testid-valid-quotefree-value", inspector);
const validGridRuleNoQuoteProperty = await getRuleViewProperty(
view,
"#testid-valid-quotefree-value",
"grid-template-areas"
).valueSpan;
is(
validGridRuleNoQuoteProperty.innerText,
"inherit",
"the valid quote-free values do not get formatted"
);
});