mirror of
https://github.com/servo/servo.git
synced 2025-09-04 12:08:21 +01:00
Update web-platform-tests to revision 1aaada4bbc936024441fe7995b77c21a2c554da1
This commit is contained in:
WPT Sync Bot
parent
1e1eca07ed
commit
5e9d150c07
140 changed files with 3413 additions and 553 deletions
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM: resolved values of the inset properties for absolute positioning</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script type="module">
|
||||
import {runTests, containerForAbspos} from "./support/getComputedStyle-insets.js";
|
||||
runTests({
|
||||
style: "position: absolute",
|
||||
containingBlockElement: containerForAbspos,
|
||||
containingBlockArea: "padding",
|
||||
preservesPercentages: false,
|
||||
preservesAuto: false,
|
||||
canStretchAutoSize: true,
|
||||
staticPositionY: 1 + 2 + 4 + 8,
|
||||
staticPositionX: 2 + 4 + 8 + 16,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM: resolved values of the inset properties for fixed positioning</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script type="module">
|
||||
import {runTests, containerForFixed} from "./support/getComputedStyle-insets.js";
|
||||
runTests({
|
||||
style: "position: fixed",
|
||||
containingBlockElement: containerForFixed,
|
||||
containingBlockArea: "padding",
|
||||
preservesPercentages: false,
|
||||
preservesAuto: false,
|
||||
canStretchAutoSize: true,
|
||||
staticPositionY: 1 + 2 + 4 + 8 + 16 + 32 + 64,
|
||||
staticPositionX: 2 + 4 + 8 + 16 + 32 + 64 + 128,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM: resolved values of the inset properties when the element generates no box</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script type="module">
|
||||
import {runTests} from "./support/getComputedStyle-insets.js";
|
||||
runTests({
|
||||
style: "display: none",
|
||||
containingBlockElement: null,
|
||||
preservesPercentages: true,
|
||||
preservesAuto: true,
|
||||
canStretchAutoSize: false,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM: resolved values of the inset properties for relative positioning</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script type="module">
|
||||
import {runTests, containerForInflow} from "./support/getComputedStyle-insets.js";
|
||||
runTests({
|
||||
style: "position: relative",
|
||||
containingBlockElement: containerForInflow,
|
||||
containingBlockArea: "content",
|
||||
preservesPercentages: false,
|
||||
preservesAuto: false,
|
||||
canStretchAutoSize: false,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM: resolved values of the inset properties for static positioning</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script type="module">
|
||||
import {runTests, containerForInflow} from "./support/getComputedStyle-insets.js";
|
||||
runTests({
|
||||
style: "position: static",
|
||||
containingBlockElement: containerForInflow,
|
||||
containingBlockArea: "content",
|
||||
preservesPercentages: true,
|
||||
preservesAuto: true,
|
||||
canStretchAutoSize: false,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM: resolved values of the inset properties for sticky positioning</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script type="module">
|
||||
import {runTests, containerForInflow} from "./support/getComputedStyle-insets.js";
|
||||
runTests({
|
||||
style: "position: sticky; position: -webkit-sticky",
|
||||
containingBlockElement: containerForInflow,
|
||||
containingBlockArea: "content",
|
||||
preservesPercentages: false,
|
||||
preservesAuto: true,
|
||||
canStretchAutoSize: false,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -70,8 +70,17 @@
|
|||
const testElem = document.getElementById("test");
|
||||
testElem.style.setProperty("margin-top", "initial", "important");
|
||||
assert_equals(testElem.style.margin, "");
|
||||
assert_equals(testElem.style.cssText, "margin-top: initial !important; margin-right: initial; margin-bottom: initial; margin-left: initial;");
|
||||
}, "Shorthand serialization with 'initial' value, one longhand with important flag.");
|
||||
|
||||
test(function() {
|
||||
const testElem = document.getElementById("test");
|
||||
testElem.style.cssText = "";
|
||||
testElem.style.setProperty("margin-top", "initial");
|
||||
testElem.style.setProperty("margin-right", "initial");
|
||||
testElem.style.setProperty("margin-bottom", "initial");
|
||||
testElem.style.setProperty("margin-left", "initial", "important");
|
||||
assert_equals(testElem.style.margin, "");
|
||||
}, "Shorthand serialization with 'initial' value, longhands set individually, one with important flag.");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,376 @@
|
|||
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;
|
||||
overflow: hidden;
|
||||
}
|
||||
#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.appendChild(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({...declarations, ...testWM.style});
|
||||
if (containingBlockElement) {
|
||||
containingBlockElement.style.cssText = serialize({...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: .1 * cbHeight + "px",
|
||||
left: .25 * cbWidth + "px",
|
||||
bottom: .5 * cbHeight + "px",
|
||||
right: .75 * cbWidth + "px",
|
||||
}, "Percentages are absolutized into pixels");
|
||||
|
||||
checkStyle({
|
||||
top: "calc(10% - 1px)",
|
||||
left: "calc(25% - 2px)",
|
||||
bottom: "calc(50% - 3px)",
|
||||
right: "calc(75% - 4px)",
|
||||
}, {
|
||||
top: .1 * cbHeight - 1 + "px",
|
||||
left: .25 * cbWidth - 2 + "px",
|
||||
bottom: .5 * cbHeight - 3 + "px",
|
||||
right: .75 * cbWidth - 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue