| export const testEl = document.createElement("div"); |
| export const containerForInflow = document.createElement("div"); |
| export const containerForAbspos = document.createElement("div"); |
| export const containerForFixed = document.createElement("div"); |
| |
| testEl.id = "test"; |
| containerForInflow.id = "container-for-inflow"; |
| containerForAbspos.id = "container-for-abspos"; |
| containerForFixed.id = "container-for-fixed"; |
| |
| containerForInflow.appendChild(testEl); |
| containerForAbspos.appendChild(containerForInflow); |
| containerForFixed.appendChild(containerForAbspos); |
| document.body.appendChild(containerForFixed); |
| |
| const stylesheet = document.createElement("style"); |
| stylesheet.textContent = ` |
| #container-for-inflow { |
| /* Content area: 100px tall, 200px wide */ |
| height: 100px; |
| width: 200px; |
| padding: 1px 2px; |
| border-width: 2px 4px; |
| margin: 4px 8px; |
| } |
| #container-for-abspos { |
| /* Padding area: 200px tall, 400px wide */ |
| height: 184px; |
| width: 368px; |
| padding: 8px 16px; |
| border-width: 16px 32px; |
| margin: 32px 64px; |
| position: relative; |
| } |
| #container-for-fixed { |
| /* Padding area: 300px tall, 600px wide */ |
| height: 172px; |
| width: 344px; |
| padding: 64px 128px; |
| border-width: 128px 256px; |
| margin: 256px 512px; |
| position: absolute; |
| transform: scale(1); |
| visibility: hidden; |
| } |
| [id ^= container] { |
| border-style: solid; |
| } |
| `; |
| document.head.prepend(stylesheet); |
| |
| function runTestsWithWM(data, testWM, cbWM) { |
| const { |
| style, |
| containingBlockElement, |
| containingBlockArea, |
| preservesPercentages, |
| preservesAuto, |
| canStretchAutoSize, |
| staticPositionX, |
| staticPositionY, |
| } = data; |
| |
| let cbHeight = containingBlockElement ? containingBlockElement.clientHeight : NaN; |
| let cbWidth = containingBlockElement ? containingBlockElement.clientWidth : NaN; |
| if (containingBlockElement && containingBlockArea == "content") { |
| const cs = getComputedStyle(containingBlockElement); |
| cbHeight -= parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom); |
| cbWidth -= parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight); |
| } |
| |
| const staticPositionTop = cbWM.blockStart == "top" || cbWM.inlineStart == "top" |
| ? staticPositionY : cbHeight - staticPositionY; |
| const staticPositionLeft = cbWM.blockStart == "left" || cbWM.inlineStart == "left" |
| ? staticPositionX : cbWidth - staticPositionX; |
| const staticPositionBottom = cbWM.blockStart == "bottom" || cbWM.inlineStart == "bottom" |
| ? staticPositionY : cbHeight - staticPositionY; |
| const staticPositionRight = cbWM.blockStart == "right" || cbWM.inlineStart == "right" |
| ? staticPositionX : cbWidth - staticPositionX; |
| |
| function serialize(declarations) { |
| return Object.entries(declarations).map(([p, v]) => `${p}: ${v}; `).join(""); |
| } |
| |
| function wmName(wm) { |
| return Object.values(wm.style).join(" "); |
| } |
| |
| function checkStyle(declarations, expected, msg) { |
| test(function() { |
| testEl.style.cssText = style + "; " + serialize(Object.assign({}, declarations, testWM.style)); |
| if (containingBlockElement) { |
| containingBlockElement.style.cssText = serialize(Object.assign({}, cbWM.style)); |
| } |
| const cs = getComputedStyle(testEl); |
| for (let [prop, value] of Object.entries(expected)) { |
| assert_equals(cs[prop], value, `'${prop}'`); |
| } |
| }, `${wmName(testWM)} inside ${wmName(cbWM)} - ${msg}`); |
| |
| testEl.style.cssText = ""; |
| if (containingBlockElement) { |
| containingBlockElement.style.cssText = ""; |
| } |
| } |
| |
| checkStyle({ |
| top: "1px", |
| left: "2px", |
| bottom: "3px", |
| right: "4px", |
| }, { |
| top: "1px", |
| left: "2px", |
| bottom: "3px", |
| right: "4px", |
| }, "Pixels resolve as-is"); |
| |
| checkStyle({ |
| top: "1em", |
| left: "2em", |
| bottom: "3em", |
| right: "4em", |
| "font-size": "10px", |
| }, { |
| top: "10px", |
| left: "20px", |
| bottom: "30px", |
| right: "40px", |
| }, "Relative lengths are absolutized into pixels"); |
| |
| if (preservesPercentages) { |
| checkStyle({ |
| top: "10%", |
| left: "25%", |
| bottom: "50%", |
| right: "75%", |
| }, { |
| top: "10%", |
| left: "25%", |
| bottom: "50%", |
| right: "75%", |
| }, "Percentages resolve as-is"); |
| } else { |
| checkStyle({ |
| top: "10%", |
| left: "25%", |
| bottom: "50%", |
| right: "75%", |
| }, { |
| top: cbHeight * 10 / 100 + "px", |
| left: cbWidth * 25 / 100 + "px", |
| bottom: cbHeight * 50 / 100 + "px", |
| right: cbWidth * 75 / 100 + "px", |
| }, "Percentages are absolutized into pixels"); |
| |
| checkStyle({ |
| top: "calc(10% - 1px)", |
| left: "calc(25% - 2px)", |
| bottom: "calc(50% - 3px)", |
| right: "calc(75% - 4px)", |
| }, { |
| top: cbHeight * 10 / 100 - 1 + "px", |
| left: cbWidth * 25 / 100 - 2 + "px", |
| bottom: cbHeight * 50 / 100 - 3 + "px", |
| right: cbWidth * 75 / 100 - 4 + "px", |
| }, "calc() is absolutized into pixels"); |
| } |
| |
| if (canStretchAutoSize) { |
| // Force overconstraintment by setting size or with insets that would result in |
| // negative size. Then the resolved value should be the computed one according to |
| // https://drafts.csswg.org/cssom/#resolved-value-special-case-property-like-top |
| |
| checkStyle({ |
| top: "1px", |
| left: "2px", |
| bottom: "3px", |
| right: "4px", |
| height: "0px", |
| width: "0px", |
| }, { |
| top: "1px", |
| left: "2px", |
| bottom: "3px", |
| right: "4px", |
| }, "Pixels resolve as-is when overconstrained"); |
| |
| checkStyle({ |
| top: "100%", |
| left: "100%", |
| bottom: "100%", |
| right: "100%", |
| }, { |
| top: cbHeight + "px", |
| left: cbWidth + "px", |
| bottom: cbHeight + "px", |
| right: cbWidth + "px", |
| }, "Percentages absolutize the computed value when overconstrained"); |
| } |
| |
| if (preservesAuto) { |
| checkStyle({ |
| top: "auto", |
| left: "auto", |
| bottom: "3px", |
| right: "4px", |
| }, { |
| top: "auto", |
| left: "auto", |
| bottom: "3px", |
| right: "4px", |
| }, "If start side is 'auto' and end side is not, 'auto' resolves as-is"); |
| |
| checkStyle({ |
| top: "1px", |
| left: "2px", |
| bottom: "auto", |
| right: "auto", |
| }, { |
| top: "1px", |
| left: "2px", |
| bottom: "auto", |
| right: "auto", |
| }, "If end side is 'auto' and start side is not, 'auto' resolves as-is"); |
| |
| checkStyle({ |
| top: "auto", |
| left: "auto", |
| bottom: "auto", |
| right: "auto", |
| }, { |
| top: "auto", |
| left: "auto", |
| bottom: "auto", |
| right: "auto", |
| }, "If opposite sides are 'auto', they resolve as-is"); |
| } else if (canStretchAutoSize) { |
| checkStyle({ |
| top: "auto", |
| left: "auto", |
| bottom: "3px", |
| right: "4px", |
| }, { |
| top: cbHeight - 3 + "px", |
| left: cbWidth - 4 + "px", |
| bottom: "3px", |
| right: "4px", |
| }, "If start side is 'auto' and end side is not, 'auto' resolves to used value"); |
| |
| checkStyle({ |
| top: "1px", |
| left: "2px", |
| bottom: "auto", |
| right: "auto", |
| }, { |
| top: "1px", |
| left: "2px", |
| bottom: cbHeight - 1 + "px", |
| right: cbWidth - 2 + "px", |
| }, "If end side is 'auto' and start side is not, 'auto' resolves to used value"); |
| |
| checkStyle({ |
| top: "auto", |
| left: "auto", |
| bottom: "auto", |
| right: "auto", |
| }, { |
| top: staticPositionTop + "px", |
| left: staticPositionLeft + "px", |
| bottom: staticPositionBottom + "px", |
| right: staticPositionRight + "px", |
| }, "If opposite sides are 'auto', they resolve to used value"); |
| } else { |
| checkStyle({ |
| top: "auto", |
| left: "auto", |
| bottom: "3px", |
| right: "4px", |
| }, { |
| top: "-3px", |
| left: "-4px", |
| bottom: "3px", |
| right: "4px", |
| }, "If start side is 'auto' and end side is not, 'auto' resolves to used value"); |
| |
| checkStyle({ |
| top: "1px", |
| left: "2px", |
| bottom: "auto", |
| right: "auto", |
| }, { |
| top: "1px", |
| left: "2px", |
| bottom: "-1px", |
| right: "-2px", |
| }, "If end side is 'auto' and start side is not, 'auto' resolves to used value"); |
| |
| checkStyle({ |
| top: "auto", |
| left: "auto", |
| bottom: "auto", |
| right: "auto", |
| }, { |
| top: "0px", |
| left: "0px", |
| bottom: "0px", |
| right: "0px", |
| }, "If opposite sides are 'auto', they resolve to used value"); |
| } |
| } |
| |
| const writingModes = [{ |
| style: { |
| "writing-mode": "horizontal-tb", |
| "direction": "ltr", |
| }, |
| blockStart: "top", |
| blockEnd: "bottom", |
| inlineStart: "left", |
| inlineEnd: "right", |
| }, { |
| style: { |
| "writing-mode": "horizontal-tb", |
| "direction": "rtl", |
| }, |
| blockStart: "top", |
| blockEnd: "bottom", |
| inlineStart: "right", |
| inlineEnd: "left", |
| }, { |
| style: { |
| "writing-mode": "vertical-lr", |
| "direction": "ltr", |
| }, |
| blockStart: "left", |
| blockEnd: "right", |
| inlineStart: "top", |
| inlineEnd: "bottom", |
| }, { |
| style: { |
| "writing-mode": "vertical-lr", |
| "direction": "rtl", |
| }, |
| blockStart: "left", |
| blockEnd: "right", |
| inlineStart: "bottom", |
| inlineEnd: "top", |
| }, { |
| style: { |
| "writing-mode": "vertical-rl", |
| "direction": "ltr", |
| }, |
| blockStart: "right", |
| blockEnd: "left", |
| inlineStart: "top", |
| inlineEnd: "bottom", |
| }, { |
| style: { |
| "writing-mode": "vertical-rl", |
| "direction": "rtl", |
| }, |
| blockStart: "right", |
| blockEnd: "left", |
| inlineStart: "bottom", |
| inlineEnd: "top", |
| }]; |
| |
| export function runTests(data) { |
| for (let testWM of writingModes) { |
| for (let cbWM of writingModes) { |
| runTestsWithWM(data, testWM, cbWM); |
| } |
| } |
| } |
