self-position-properties.mjs (2987B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 // InactivePropertyHelper test cases: 6 // `justify-self`, `align-self` and `place-self`. 7 let tests = [ 8 { 9 info: `"justify-self" is inactive on a flex item`, 10 property: "justify-self", 11 createTestElement, 12 rules: [ 13 `#container { display:flex; }`, 14 `#container-item { justify-self: start; }`, 15 ], 16 ruleIndex: 1, 17 isActive: false, 18 }, 19 { 20 info: `"justify-self" is inactive on a block`, 21 property: "justify-self", 22 tagName: `div`, 23 rules: [`div { display:block; justify-self: start; }`], 24 isActive: false, 25 }, 26 { 27 info: `"justify-self" is active on an absolutely positioned element`, 28 property: "justify-self", 29 tagName: `div`, 30 rules: [`div { display:block; justify-self: start; position: absolute;}`], 31 isActive: true, 32 }, 33 { 34 info: `"justify-self" is active on a grid item`, 35 property: "justify-self", 36 createTestElement, 37 rules: [ 38 `#container { display:grid; }`, 39 `#container-item { justify-self: start; }`, 40 ], 41 ruleIndex: 1, 42 isActive: true, 43 }, 44 ]; 45 46 for (const { propertyName, propertyValue } of [ 47 { propertyName: "align-self", propertyValue: "auto" }, 48 { propertyName: "place-self", propertyValue: "auto center" }, 49 ]) { 50 tests = tests.concat(createTestsForProp(propertyName, propertyValue)); 51 } 52 53 function createTestsForProp(propertyName, propertyValue) { 54 return [ 55 { 56 info: `${propertyName} is active on a grid item`, 57 property: `${propertyName}`, 58 createTestElement, 59 rules: [ 60 `#container { display:grid; grid:auto/100px 100px; }`, 61 `#container-item { ${propertyName}: ${propertyValue}; }`, 62 ], 63 ruleIndex: 1, 64 isActive: true, 65 }, 66 { 67 info: `${propertyName} is active on a flex item`, 68 property: `${propertyName}`, 69 createTestElement, 70 rules: [ 71 `#container { display:flex; }`, 72 `#container-item { ${propertyName}: ${propertyValue}; }`, 73 ], 74 ruleIndex: 1, 75 isActive: true, 76 }, 77 { 78 info: `${propertyName} is active on absolutely positioned item`, 79 property: `${propertyName}`, 80 tagName: `div`, 81 rules: [`div { ${propertyName}: ${propertyValue}; position: absolute; }`], 82 isActive: true, 83 }, 84 { 85 info: `${propertyName} is inactive on non-(grid|flex|abs) item`, 86 property: `${propertyName}`, 87 tagName: `div`, 88 rules: [`div { ${propertyName}: ${propertyValue}; }`], 89 isActive: false, 90 }, 91 ]; 92 } 93 94 function createTestElement(rootNode) { 95 const container = document.createElement("div"); 96 container.id = "container"; 97 const element = document.createElement("div"); 98 element.id = "container-item"; 99 container.append(element); 100 rootNode.append(container); 101 102 return element; 103 } 104 105 export default tests;