test-shared.js (4434B)
1 const sheet = document.head.appendChild(document.createElement("style")); 2 3 // Specify size for outer <div> to avoid unconstrained-size warnings 4 // when writing-mode of the inner test <div> is vertical-* 5 const wrapper = document.body.appendChild(document.createElement("div")); 6 wrapper.style.cssText = "width:100px; height: 100px;"; 7 export const testElement = wrapper.appendChild(document.createElement("div")); 8 testElement.id = testElement.className = "test"; 9 10 // Six unique overall writing modes for property-mapping purposes. 11 export const writingModes = [ 12 { 13 styles: [ 14 {"writing-mode": "horizontal-tb", "direction": "ltr"}, 15 ], 16 blockStart: "top", blockEnd: "bottom", inlineStart: "left", inlineEnd: "right", 17 over: "top", under: "bottom", lineLeft: "left", lineRight: "right", 18 block: "vertical", inline: "horizontal" }, 19 { 20 styles: [ 21 {"writing-mode": "horizontal-tb", "direction": "rtl"}, 22 ], 23 blockStart: "top", blockEnd: "bottom", inlineStart: "right", inlineEnd: "left", 24 over: "top", under: "bottom", lineLeft: "left", lineRight: "right", 25 block: "vertical", inline: "horizontal" }, 26 { 27 styles: [ 28 {"writing-mode": "vertical-rl", "direction": "rtl"}, 29 {"writing-mode": "sideways-rl", "direction": "rtl"}, 30 ], 31 blockStart: "right", blockEnd: "left", inlineStart: "bottom", inlineEnd: "top", 32 over: "right", under: "left", lineLeft: "top", lineRight: "bottom", 33 block: "horizontal", inline: "vertical" }, 34 { 35 styles: [ 36 {"writing-mode": "vertical-rl", "direction": "ltr"}, 37 {"writing-mode": "sideways-rl", "direction": "ltr"}, 38 ], 39 blockStart: "right", blockEnd: "left", inlineStart: "top", inlineEnd: "bottom", 40 over: "right", under: "left", lineLeft: "top", lineRight: "bottom", 41 block: "horizontal", inline: "vertical" }, 42 { 43 styles: [ 44 {"writing-mode": "vertical-lr", "direction": "rtl"}, 45 ], 46 blockStart: "left", blockEnd: "right", inlineStart: "bottom", inlineEnd: "top", 47 over: "right", under: "left", lineLeft: "top", lineRight: "bottom", 48 block: "horizontal", inline: "vertical" }, 49 { 50 styles: [ 51 {"writing-mode": "sideways-lr", "direction": "ltr"}, 52 ], 53 blockStart: "left", blockEnd: "right", inlineStart: "bottom", inlineEnd: "top", 54 over: "left", under: "right", lineLeft: "bottom", lineRight: "top", 55 block: "horizontal", inline: "vertical" }, 56 { 57 styles: [ 58 {"writing-mode": "vertical-lr", "direction": "ltr"}, 59 ], 60 blockStart: "left", blockEnd: "right", inlineStart: "top", inlineEnd: "bottom", 61 over: "right", under: "left", lineLeft: "top", lineRight: "bottom", 62 block: "horizontal", inline: "vertical" }, 63 { 64 styles: [ 65 {"writing-mode": "sideways-lr", "direction": "rtl"}, 66 ], 67 blockStart: "left", blockEnd: "right", inlineStart: "top", inlineEnd: "bottom", 68 over: "left", under: "right", lineLeft: "bottom", lineRight: "top", 69 block: "horizontal", inline: "vertical" }, 70 ]; 71 72 // Check if logical properties work well in WebKit non-standard 73 // '-webkit-writing-mode: horizontal-bt' mode 74 if (CSS.supports("-webkit-writing-mode", "horizontal-bt")) { 75 writingModes.push ( 76 { 77 styles: [ 78 {"-webkit-writing-mode": "horizontal-bt", "direction": "ltr"}, 79 ], 80 blockStart: "bottom", blockEnd: "top", inlineStart: "left", inlineEnd: "right", 81 over: "top", under: "bottom", lineLeft: "left", lineRight: "right", 82 block: "vertical", inline: "horizontal" }, 83 { 84 styles: [ 85 {"-webkit-writing-mode": "horizontal-bt", "direction": "rtl"}, 86 ], 87 blockStart: "bottom", blockEnd: "top", inlineStart: "right", inlineEnd: "left", 88 over: "top", under: "bottom", lineLeft: "left", lineRight: "right", 89 block: "vertical", inline: "horizontal" }, 90 ) 91 } 92 93 export function testCSSValues(testName, style, expectedValues) { 94 for (const [property, value] of expectedValues) { 95 assert_equals(style.getPropertyValue(property), value, `${testName}, ${property}`); 96 } 97 } 98 99 export function testComputedValues(testName, rules, expectedValues) { 100 sheet.textContent = rules; 101 const cs = getComputedStyle(testElement); 102 testCSSValues(testName, cs, expectedValues); 103 sheet.textContent = ""; 104 } 105 106 export function makeDeclaration(object = {}, replacement = "*") { 107 let decl = ""; 108 for (const [property, value] of Object.entries(object)) { 109 decl += `${property.replace("*", replacement)}: ${value}; `; 110 } 111 return decl; 112 }