browser_rules_grid-template-areas.js (5455B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Tests that the text editor correctly display the grid-template-areas value. 7 // The CSS Grid spec allows to create grid-template-areas in an ascii-art style matrix. 8 // It should show each string on its own line, when displaying rules for grid-template-areas. 9 10 const TEST_URI = ` 11 <style type='text/css'> 12 #testid { 13 display: grid; 14 grid-template-areas: "a a bb" 15 'a a bb' 16 "ccc ccc bb"; 17 } 18 19 #testid-quotes { 20 quotes: "«" "»" "‹" "›"; 21 } 22 23 #testid-invalid-strings { 24 grid-template-areas: "a a b" 25 "a a"; 26 } 27 28 #testid-valid-quotefree-value { 29 grid-template-areas: inherit; 30 } 31 32 .a { 33 grid-area: a; 34 } 35 36 .b { 37 grid-area: bb; 38 } 39 40 .c { 41 grid-area: ccc; 42 } 43 </style> 44 <div id="testid"> 45 <div class="a">cell a</div> 46 <div class="b">cell b</div> 47 <div class="c">cell c</div> 48 </div> 49 <q id="testid-quotes"> 50 Show us the wonder-working <q>Brothers,</q> let them come out publicly—and we will believe in them! 51 </q> 52 <div id="testid-invalid-strings"> 53 <div class="a">cell a</div> 54 <div class="b">cell b</div> 55 </div> 56 <div id="testid-valid-quotefree-value"> 57 <div class="a">cell a</div> 58 <div class="b">cell b</div> 59 </div> 60 `; 61 62 const multiLinesInnerText = '\n"a a bb" \n\'a a bb\' \n"ccc ccc bb"'; 63 const typedAndCopiedMultiLinesString = '"a a bb ccc" "a a bb ccc"'; 64 const typedAndCopiedMultiLinesInnerText = '\n"a a bb ccc" \n"a a bb ccc"'; 65 66 add_task(async function () { 67 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 68 const { inspector, view } = await openRuleView(); 69 70 info("Selecting the test node"); 71 await selectNode("#testid", inspector); 72 73 info( 74 "Tests display of grid-template-areas value in an ascii-art style," + 75 "displaying each string on its own line" 76 ); 77 78 const gridRuleProperty = await getRuleViewProperty( 79 view, 80 "#testid", 81 "grid-template-areas" 82 ).valueSpan; 83 is( 84 gridRuleProperty.innerText, 85 multiLinesInnerText, 86 "the grid-area is displayed with each string in its own line, and sufficient spacing for areas to align vertically" 87 ); 88 89 // copy/paste the current value inside, to also make sure of the value copied is useful as text 90 91 // Calculate offsets to click in the value line which is below the property name line . 92 const rect = gridRuleProperty.getBoundingClientRect(); 93 const x = rect.width / 2; 94 const y = rect.height / 2; 95 96 info("Focusing the css property editable value"); 97 await focusEditableField(view, gridRuleProperty, x, y); 98 info("typing a new value"); 99 [...typedAndCopiedMultiLinesString].map(char => 100 EventUtils.synthesizeKey(char, {}, view.styleWindow) 101 ); 102 EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow); 103 is( 104 gridRuleProperty.innerText, 105 typedAndCopiedMultiLinesInnerText, 106 "the typed value is correct, and a single quote is displayed on its own line" 107 ); 108 info("copy-paste the 'grid-template-areas' property value to duplicate it"); 109 const onDone = view.once("ruleview-changed"); 110 await focusEditableField(view, gridRuleProperty, x, y); 111 EventUtils.synthesizeKey("C", { accelKey: true }, view.styleWindow); 112 EventUtils.synthesizeKey("KEY_ArrowRight", {}, view.styleWindow); 113 EventUtils.synthesizeKey("V", { accelKey: true }, view.styleWindow); 114 EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow); 115 116 await onDone; 117 118 info("Check copy-pasting the property value is not breaking it"); 119 120 is( 121 gridRuleProperty.innerText, 122 typedAndCopiedMultiLinesInnerText + " " + typedAndCopiedMultiLinesInnerText, 123 "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" 124 ); 125 126 // test that when "non grid-template-area", like quotes for example, its multi-string value is not displayed over multiple lines 127 await selectNode("#testid-quotes", inspector); 128 129 info( 130 "Tests display of content string value is NOT in an ascii-art style," + 131 "displaying each string on a single line" 132 ); 133 134 const contentRuleProperty = await getRuleViewProperty( 135 view, 136 "#testid-quotes", 137 "quotes" 138 ).valueSpan; 139 is( 140 contentRuleProperty.innerText, 141 '"«" "»" "‹" "›"', 142 "the quotes strings values are all displayed on the same single line" 143 ); 144 145 // test that invalid string values are now formatted to help with debugging 146 info("testing that it DOES try to format invalid values"); 147 await selectNode("#testid-invalid-strings", inspector); 148 const invalidGridRuleProperty = await getRuleViewProperty( 149 view, 150 "#testid-invalid-strings", 151 "grid-template-areas" 152 ).valueSpan; 153 is( 154 invalidGridRuleProperty.innerText, 155 '\n"a a b" \n"a a"', 156 "the invalid strings values are now formatted to help debugging" 157 ); 158 159 // test that when a valid value without quotes such as `inherit` it does not get formatted 160 info("testing it does not try to format valid non-quote values"); 161 await selectNode("#testid-valid-quotefree-value", inspector); 162 const validGridRuleNoQuoteProperty = await getRuleViewProperty( 163 view, 164 "#testid-valid-quotefree-value", 165 "grid-template-areas" 166 ).valueSpan; 167 is( 168 validGridRuleNoQuoteProperty.innerText, 169 "inherit", 170 "the valid quote-free values do not get formatted" 171 ); 172 });