browser_rules_conditional_import.js (4478B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test that the rule-view content displays @import conditions. 7 8 const TEST_URI = ` 9 <style type="text/css"> 10 @import url(${URL_ROOT_COM_SSL}doc_conditional_import.css) screen and (width > 10px); 11 @import url(${URL_ROOT_COM_SSL}doc_imported_named_layer.css) layer(importedLayer) (height > 42px); 12 @import url(${URL_ROOT_COM_SSL}doc_conditional_import.css) supports(display: flex); 13 @import url(${URL_ROOT_COM_SSL}doc_conditional_import.css) supports(display: flex) screen and (width > 10px); 14 @import url(${URL_ROOT_COM_SSL}doc_imported_named_layer.css) layer(importedLayerTwo) supports(display: flex) screen and (width > 10px); 15 @import url(${URL_ROOT_COM_SSL}doc_imported_no_layer.css); 16 </style> 17 <h1>Hello @import!</h1> 18 `; 19 20 add_task(async function () { 21 await addTab( 22 "https://example.com/document-builder.sjs?html=" + 23 encodeURIComponent(TEST_URI) 24 ); 25 const { inspector, view } = await openRuleView(); 26 await selectNode("h1", inspector); 27 const expectedRules = [ 28 { selector: "element", ancestorRulesData: null }, 29 { 30 // Checking that we don't show @import for rules from imported stylesheet with no conditions 31 selector: `h1, [test-hint="imported-no-layer--no-rule-layer"]`, 32 ancestorRulesData: null, 33 }, 34 { 35 selector: `h1, [test-hint="imported-conditional"]`, 36 ancestorRulesData: [ 37 "@import supports(display: flex) screen and (width > 10px) {", 38 ], 39 }, 40 { 41 selector: `h1, [test-hint="imported-conditional"]`, 42 ancestorRulesData: ["@import supports(display: flex) {"], 43 }, 44 { 45 selector: `h1, [test-hint="imported-conditional"]`, 46 ancestorRulesData: ["@import screen and (width > 10px) {"], 47 }, 48 { 49 selector: `h1, [test-hint="imported-named-layer--no-rule-layer"]`, 50 ancestorRulesData: [ 51 "@import supports(display: flex) screen and (width > 10px) {", 52 " @layer importedLayerTwo {", 53 " @media screen {", 54 ], 55 }, 56 { 57 selector: `h1, [test-hint="imported-named-layer--named-layer"]`, 58 ancestorRulesData: [ 59 "@import supports(display: flex) screen and (width > 10px) {", 60 " @layer importedLayerTwo {", 61 " @media screen {", 62 " @layer in-imported-stylesheet {", 63 ], 64 }, 65 { 66 selector: `h1, [test-hint="imported-nested-named-layer--named-layer"]`, 67 ancestorRulesData: [ 68 "@import supports(display: flex) screen and (width > 10px) {", 69 " @layer importedLayerTwo {", 70 " @layer importedNestedLayer {", 71 " @layer in-imported-nested-stylesheet {", 72 ], 73 }, 74 { 75 selector: `h1, [test-hint="imported-named-layer--no-rule-layer"]`, 76 ancestorRulesData: [ 77 "@import (height > 42px) {", 78 " @layer importedLayer {", 79 " @media screen {", 80 ], 81 }, 82 { 83 selector: `h1, [test-hint="imported-named-layer--named-layer"]`, 84 ancestorRulesData: [ 85 "@import (height > 42px) {", 86 " @layer importedLayer {", 87 " @media screen {", 88 " @layer in-imported-stylesheet {", 89 ], 90 }, 91 { 92 selector: `h1, [test-hint="imported-nested-named-layer--named-layer"]`, 93 ancestorRulesData: [ 94 "@import (height > 42px) {", 95 " @layer importedLayer {", 96 " @layer importedNestedLayer {", 97 " @layer in-imported-nested-stylesheet {", 98 ], 99 }, 100 ]; 101 102 const rulesInView = Array.from(view.element.children); 103 is( 104 rulesInView.length, 105 expectedRules.length, 106 "All expected rules are displayed" 107 ); 108 109 for (let i = 0; i < expectedRules.length; i++) { 110 const expectedRule = expectedRules[i]; 111 info(`Checking rule #${i}: ${expectedRule.selector}`); 112 113 const selector = rulesInView[i].querySelector( 114 ".ruleview-selectors-container" 115 ).innerText; 116 is(selector, expectedRule.selector, `Expected selector for ${selector}`); 117 118 if (expectedRule.ancestorRulesData == null) { 119 is( 120 getRuleViewAncestorRulesDataElementByIndex(view, i), 121 null, 122 `No ancestor rules data displayed for ${selector}` 123 ); 124 } else { 125 is( 126 getRuleViewAncestorRulesDataTextByIndex(view, i), 127 expectedRule.ancestorRulesData.join("\n"), 128 `Expected ancestor rules data displayed for ${selector}` 129 ); 130 } 131 } 132 });