Nicolas Chevobbe
986ece090c
The InspectorUtils method expects the binding element, as we're also passing a pseudo element type, which will be used to retrieve the property on the pseudo element. A few test cases are added, both for the InspectorUtils method, as well as the CSS explainers tooltip. Differential Revision: https://phabricator.services.mozilla.com/D310004
901 lines
17 KiB
HTML
901 lines
17 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Test InspectorUtils.getComputationSteps</title>
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
|
</head>
|
|
<body>
|
|
<code>InspectorUtils.getComputationSteps</code>
|
|
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
font-size: 20px;
|
|
}
|
|
|
|
main {
|
|
container-type: size;
|
|
width: 200px;
|
|
height: 100px;
|
|
}
|
|
|
|
section {
|
|
width: 100px;
|
|
height: 50px;
|
|
font-size: 24px;
|
|
|
|
&::after {
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<main>
|
|
<section>Section.80</section>
|
|
<ol>
|
|
<li>First</li>
|
|
<li>Second</li>
|
|
<li>Third</li>
|
|
</ol>
|
|
</main>
|
|
|
|
<script>
|
|
add_task(async function() {
|
|
const { InspectorUtils } = SpecialPowers;
|
|
const test = ({expression, el, pseudo, expected}) => {
|
|
const res = Array.from(InspectorUtils.getComputationSteps(expression, el, pseudo));
|
|
const outer = el.outerHTML;
|
|
const fmt = arr => `(${arr.length})[${arr.map(s => `'${s}'`).join(", ")}]`
|
|
is(
|
|
fmt(res),
|
|
fmt(expected),
|
|
`Got expected steps for "${expression}" on ${outer.substring(0, outer.indexOf(">") + 1)}${pseudo ? "::" + pseudo: ""}`
|
|
);
|
|
}
|
|
|
|
const sectionEl = document.querySelector("section");
|
|
|
|
/// clamp()
|
|
test({
|
|
expression: "clamp(1,2,3)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"clamp(1, 2, 3)",
|
|
"2"
|
|
]
|
|
});
|
|
test({
|
|
expression: "clamp(3,2,1)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"clamp(3, 2, 1)",
|
|
"3"
|
|
]
|
|
});
|
|
test({
|
|
expression: "clamp(1,3,2)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"clamp(1, 3, 2)",
|
|
"2"
|
|
]
|
|
});
|
|
|
|
/// round()
|
|
test({
|
|
expression: "round(10.5)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(10.5)",
|
|
"round(10.5, 1)",
|
|
"11"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(10.5,1)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(10.5, 1)",
|
|
"11"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(Infinity)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(Infinity)",
|
|
"round(infinity, 1)",
|
|
"infinity"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(10.5, 2)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(10.5, 2)",
|
|
"10"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(up, 10.5)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(up, 10.5)",
|
|
"round(up, 10.5, 1)",
|
|
"11"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(down, 10.5)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(down, 10.5)",
|
|
"round(down, 10.5, 1)",
|
|
"10"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(nearest, 10.5)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(nearest, 10.5)",
|
|
"round(10.5, 1)",
|
|
"11"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(to-zero, 10.5)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(to-zero, 10.5)",
|
|
"round(to-zero, 10.5, 1)",
|
|
"10"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(up, Infinity)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(up, Infinity)",
|
|
"round(up, infinity, 1)",
|
|
"infinity"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(up, 10.5, Infinity)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(up, 10.5, infinity)",
|
|
"infinity"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(down, 10.5, Infinity)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(down, 10.5, infinity)",
|
|
"0"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(nearest, 10.5, Infinity)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(nearest, 10.5, Infinity)",
|
|
"round(10.5, infinity)",
|
|
"0"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(to-zero, 10.5, Infinity)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(to-zero, 10.5, infinity)",
|
|
"0"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(up, -10.5, Infinity)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(up, -10.5, infinity)",
|
|
"0"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(down, -10.5, Infinity)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(down, -10.5, infinity)",
|
|
"-infinity"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(nearest, -10.5, Infinity)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(nearest, -10.5, Infinity)",
|
|
"round(-10.5, infinity)",
|
|
"0"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(to-zero, -10.5, Infinity)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(to-zero, -10.5, infinity)",
|
|
"0"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(up, -10.5)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(up, -10.5)",
|
|
"round(up, -10.5, 1)",
|
|
"-10"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(down, -10.5)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(down, -10.5)",
|
|
"round(down, -10.5, 1)",
|
|
"-11"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(nearest, -10.5)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(nearest, -10.5)",
|
|
"round(-10.5, 1)",
|
|
"-10"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(to-zero, -10.5)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(to-zero, -10.5)",
|
|
"round(to-zero, -10.5, 1)",
|
|
"-10"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(up, 0, -1)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(up, 0, -1)",
|
|
"0"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(down, 0, -1)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(down, 0, -1)",
|
|
"0"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(nearest, 0, -1)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(nearest, 0, -1)",
|
|
"round(0, -1)",
|
|
"0"
|
|
]
|
|
});
|
|
test({
|
|
expression: "round(to-zero, 0, -1)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"round(to-zero, 0, -1)",
|
|
"0"
|
|
]
|
|
});
|
|
|
|
/// mod()
|
|
test({
|
|
expression: "mod(3.5, 2)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"mod(3.5, 2)",
|
|
"1.5",
|
|
]
|
|
});
|
|
|
|
/// rem()
|
|
test({
|
|
expression: "rem(3.5, 2)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"rem(3.5, 2)",
|
|
"1.5",
|
|
]
|
|
});
|
|
|
|
/// sin()
|
|
test({
|
|
expression: "sin(0deg)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"sin(0deg)",
|
|
"0",
|
|
]
|
|
});
|
|
|
|
/// cos()
|
|
test({
|
|
expression: "cos(pi)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"cos(pi)",
|
|
"cos(3.14159)",
|
|
"-1",
|
|
]
|
|
});
|
|
|
|
/// tan()
|
|
test({
|
|
expression: "tan(0.125turn)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"tan(0.125turn)",
|
|
"1",
|
|
]
|
|
});
|
|
|
|
/// asin()
|
|
test({
|
|
expression: "asin(0.5)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"asin(0.5)",
|
|
"30deg",
|
|
]
|
|
});
|
|
test({
|
|
expression: "asin(2)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"asin(2)",
|
|
"NaN * 1deg",
|
|
]
|
|
});
|
|
|
|
/// acos()
|
|
test({
|
|
expression: "acos(0.5)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"acos(0.5)",
|
|
"60deg",
|
|
]
|
|
});
|
|
test({
|
|
expression: "acos(2)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"acos(2)",
|
|
"NaN * 1deg",
|
|
]
|
|
});
|
|
|
|
/// atan()
|
|
test({
|
|
expression: "atan(-1)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"atan(-1)",
|
|
"-45deg",
|
|
]
|
|
});
|
|
test({
|
|
expression: "atan(Infinity)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"atan(infinity)",
|
|
"90deg",
|
|
]
|
|
});
|
|
|
|
/// atan2()
|
|
test({
|
|
expression: "atan2(1rem, -0.5rem)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"atan2(1rem, -0.5rem)",
|
|
"atan2(20px, -10px)",
|
|
"116.565deg",
|
|
]
|
|
});
|
|
|
|
/// pow()
|
|
test({
|
|
expression: "pow(5, 2)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"pow(5, 2)",
|
|
"25",
|
|
]
|
|
});
|
|
|
|
/// sqrt()
|
|
test({
|
|
expression: "sqrt(9)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"sqrt(9)",
|
|
"3",
|
|
]
|
|
});
|
|
|
|
/// hypot()
|
|
test({
|
|
expression: "hypot(2em)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"hypot(2em)",
|
|
"hypot(48px)",
|
|
"48px",
|
|
]
|
|
});
|
|
test({
|
|
expression: "hypot(4em, 3em)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"hypot(4em, 3em)",
|
|
"hypot(96px, 72px)",
|
|
"120px",
|
|
]
|
|
});
|
|
|
|
/// log()
|
|
test({
|
|
expression: "log(1)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"log(1)",
|
|
"0",
|
|
]
|
|
});
|
|
test({
|
|
expression: "log(8, 2)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"log(8, 2)",
|
|
"3",
|
|
]
|
|
});
|
|
|
|
/// exp()
|
|
test({
|
|
expression: "exp(1)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"exp(1)",
|
|
"2.71828",
|
|
]
|
|
});
|
|
|
|
/// abs()
|
|
test({
|
|
expression: "abs(-1em)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"abs(-1em)",
|
|
"abs(-24px)",
|
|
"24px",
|
|
]
|
|
});
|
|
|
|
/// sign()
|
|
test({
|
|
expression: "sign(-1em)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"sign(-1em)",
|
|
"sign(-24px)",
|
|
"-1",
|
|
]
|
|
});
|
|
|
|
|
|
/// min()
|
|
test({
|
|
expression: "min(1em, 10cqh)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"min(1em, 10cqh)",
|
|
"min(24px, 10px)",
|
|
"10px",
|
|
]
|
|
});
|
|
test({
|
|
expression: "min(acos(2), 90deg)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"min(acos(2), 90deg)",
|
|
"min(NaN * 1deg, 90deg)",
|
|
"NaN * 1deg",
|
|
]
|
|
});
|
|
|
|
/// max()
|
|
test({
|
|
expression: "max(1em, 10cqh)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"max(1em, 10cqh)",
|
|
"max(24px, 10px)",
|
|
"24px",
|
|
]
|
|
});
|
|
test({
|
|
expression: "max(acos(2), 90deg)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"max(acos(2), 90deg)",
|
|
"max(NaN * 1deg, 90deg)",
|
|
"NaN * 1deg",
|
|
]
|
|
});
|
|
|
|
/// sibling-index()
|
|
test({
|
|
expression: "sibling-index()",
|
|
el: document.querySelector("li:nth-of-type(1)"),
|
|
expected: [
|
|
"sibling-index()",
|
|
"1",
|
|
]
|
|
});
|
|
test({
|
|
expression: "sibling-index()",
|
|
el: document.querySelector("li:nth-of-type(2)"),
|
|
expected: [
|
|
"sibling-index()",
|
|
"2",
|
|
]
|
|
});
|
|
test({
|
|
expression: "sibling-index()",
|
|
el: document.querySelector("li:nth-of-type(2)"),
|
|
pseudo: "::marker",
|
|
expected: [
|
|
"sibling-index()",
|
|
"2",
|
|
]
|
|
});
|
|
|
|
/// sibling-count()
|
|
test({
|
|
expression: "sibling-count()",
|
|
el: document.querySelector("li:nth-of-type(1)"),
|
|
expected: [
|
|
"sibling-count()",
|
|
"3",
|
|
]
|
|
});
|
|
test({
|
|
expression: "sibling-count()",
|
|
el: document.querySelector("li:nth-of-type(2)"),
|
|
expected: [
|
|
"sibling-count()",
|
|
"3",
|
|
]
|
|
});
|
|
test({
|
|
expression: "sibling-count()",
|
|
el: document.querySelector("li:nth-of-type(2)"),
|
|
pseudo: "::marker",
|
|
expected: [
|
|
"sibling-count()",
|
|
"3",
|
|
]
|
|
});
|
|
|
|
/// progress()
|
|
test({
|
|
expression: "progress(5, 0, 10)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"progress(5, 0, 10)",
|
|
"0.5",
|
|
]
|
|
});
|
|
test({
|
|
expression: "progress(2em, 2cqw, 92cqh)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"progress(2em, 2cqw, 92cqh)",
|
|
"progress(48px, 4px, 92px)",
|
|
"0.5",
|
|
]
|
|
});
|
|
test({
|
|
expression: "progress(2em, 0cqw, 2.4cqw)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"progress(2em, 0cqw, 2.4cqw)",
|
|
"progress(48px, 0px, 4.8px)",
|
|
"1",
|
|
]
|
|
});
|
|
test({
|
|
expression: "progress(no-clamp 2em, 0cqw, 2.4cqw)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"progress(no-clamp 2em, 0cqw, 2.4cqw)",
|
|
"progress(no-clamp 48px, 0px, 4.8px)",
|
|
"10",
|
|
]
|
|
});
|
|
|
|
/// calc() operations
|
|
test({
|
|
expression: "calc(1px)",
|
|
el: sectionEl,
|
|
expected: ["calc(1px)", "1px"]
|
|
});
|
|
test({
|
|
expression: "calc(1px + 2px)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"calc(1px + 2px)",
|
|
"3px"
|
|
]
|
|
});
|
|
test({
|
|
expression: "calc(1px - 2px)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"calc(1px - 2px)",
|
|
"-1px"
|
|
]
|
|
});
|
|
test({
|
|
expression: "calc(1px * 2)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"calc(1px * 2)",
|
|
"2px"
|
|
]
|
|
});
|
|
test({
|
|
expression: "calc(1px / 2)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"calc(1px / 2)",
|
|
"calc(1px * 0.5)",
|
|
"0.5px",
|
|
]
|
|
});
|
|
|
|
/// Complex expressions
|
|
test({
|
|
expression: "calc(10cqw + 20cqh + 30px)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"calc(10cqw + 20cqh + 30px)",
|
|
"calc(20px + 20px + 30px)",
|
|
"70px",
|
|
]
|
|
});
|
|
test({
|
|
expression: "min(1em, 10cqw)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"min(1em, 10cqw)",
|
|
"min(24px, 20px)",
|
|
"20px",
|
|
]
|
|
});
|
|
test({
|
|
expression: "calc(min(sin(pi * 1.5), cos(0rad)) * 2px)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"calc(min(sin(pi * 1.5), cos(0rad)) * 2px)",
|
|
"calc(min(sin(3.14159 * 1.5), cos(0rad)) * 2px)",
|
|
"calc(min(sin(4.71239), cos(0rad)) * 2px)",
|
|
"calc(min(-1, cos(0rad)) * 2px)",
|
|
"calc(min(-1, 1) * 2px)",
|
|
"calc(-1 * 2px)",
|
|
"-2px",
|
|
]
|
|
});
|
|
test({
|
|
expression: "clamp(10cqmax, 3em, 15cqw)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"clamp(10cqmax, 3em, 15cqw)",
|
|
"clamp(20px, 72px, 30px)",
|
|
"30px",
|
|
]
|
|
});
|
|
test({
|
|
expression: "clamp(5cqmin, 3em, min(10cqw, 30cqh))",
|
|
el: sectionEl,
|
|
expected: [
|
|
"clamp(5cqmin, 3em, min(10cqw, 30cqh))",
|
|
"clamp(5px, 72px, min(20px, 30px))",
|
|
"clamp(5px, 72px, 20px)",
|
|
"20px",
|
|
]
|
|
});
|
|
test({
|
|
expression: "clamp(10%, 3em, 10cqw)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"clamp(10%, 3em, 10cqw)",
|
|
// TODO: 10% should also be computed (See Bug 2041621)
|
|
"clamp(10%, 72px, 20px)",
|
|
]
|
|
});
|
|
test({
|
|
expression: "min(sin(90deg), cos(min(0, max(0, Infinity))))",
|
|
el: sectionEl,
|
|
expected: [
|
|
"min(sin(90deg), cos(min(0, max(0, infinity))))",
|
|
"min(1, cos(min(0, max(0, infinity))))",
|
|
"min(1, cos(min(0, infinity)))",
|
|
"min(1, cos(0))",
|
|
"min(1, 1)",
|
|
"1",
|
|
]
|
|
});
|
|
test({
|
|
expression: "max(42, Infinity)",
|
|
el: sectionEl,
|
|
expected: [
|
|
// TODO: Check if it should be Infinity (with uppercase I)
|
|
"max(42, infinity)",
|
|
"infinity",
|
|
]
|
|
});
|
|
test({
|
|
expression: "mod(mod(mod(3.5, 2), 3), 42)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"mod(mod(mod(3.5, 2), 3), 42)",
|
|
"mod(mod(1.5, 3), 42)",
|
|
"mod(1.5, 42)",
|
|
"1.5",
|
|
]
|
|
});
|
|
test({
|
|
expression: "abs(sin(270deg))",
|
|
el: sectionEl,
|
|
expected: [
|
|
"abs(sin(270deg))",
|
|
"abs(-1)",
|
|
"1",
|
|
]
|
|
});
|
|
test({
|
|
expression: "calc(10cqw + 20cqh + 30px + (min(cos(pi) * abs(-4), mod(10, 23))) * 1cqmin)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"calc(10cqw + 20cqh + 30px + (min(cos(pi) * abs(-4), mod(10, 23))) * 1cqmin)",
|
|
"calc(10cqw + 20cqh + 30px + (min(cos(3.14159) * abs(-4), mod(10, 23)) * 1cqmin))",
|
|
"calc(20px + 20px + 30px + (min(cos(3.14159) * abs(-4), mod(10, 23)) * 1px))",
|
|
"calc(20px + 20px + 30px + (min(-1 * abs(-4), mod(10, 23)) * 1px))",
|
|
"calc(20px + 20px + 30px + (min(-1 * 4, mod(10, 23)) * 1px))",
|
|
"calc(20px + 20px + 30px + (min(-4, mod(10, 23)) * 1px))",
|
|
"calc(20px + 20px + 30px + (min(-4, 10) * 1px))",
|
|
"calc(20px + 20px + 30px + (-4 * 1px))",
|
|
"calc(20px + 20px + 30px - 4px)",
|
|
"66px",
|
|
]
|
|
});
|
|
test({
|
|
expression: "min(cos(2 * pi) * abs(-4), mod(10, 23))",
|
|
el: sectionEl,
|
|
expected: [
|
|
"min(cos(2 * pi) * abs(-4), mod(10, 23))",
|
|
"min(cos(2 * 3.14159) * abs(-4), mod(10, 23))",
|
|
"min(cos(6.28319) * abs(-4), mod(10, 23))",
|
|
"min(1 * abs(-4), mod(10, 23))",
|
|
"min(1 * 4, mod(10, 23))",
|
|
"min(4, mod(10, 23))",
|
|
"min(4, 10)",
|
|
"4",
|
|
]
|
|
});
|
|
test({
|
|
expression: "calc((3em + 4rem) / 2)",
|
|
el: sectionEl,
|
|
expected: [
|
|
"calc((3em + 4rem) / 2)",
|
|
"calc((72px + 80px) / 2)",
|
|
"calc(152px / 2)",
|
|
"calc(152px * 0.5)",
|
|
"76px",
|
|
]
|
|
});
|
|
test({
|
|
expression: "calc((3em + 4rem) / (10 * 5em))",
|
|
el: sectionEl,
|
|
expected: [
|
|
"calc((3em + 4rem) / (10 * 5em))",
|
|
"calc((72px + 80px) / (10 * 120px))",
|
|
"calc(152px / (10 * 120px))",
|
|
"calc(152px / 1200px)",
|
|
// Once Bug 1264520 lands, we should get another step
|
|
// with a unitless value (~ 0.1266)
|
|
]
|
|
});
|
|
test({
|
|
expression: "calc((3em + 4rem) / 2)",
|
|
el: sectionEl,
|
|
pseudo: "::after",
|
|
expected: [
|
|
"calc((3em + 4rem) / 2)",
|
|
"calc((84px + 80px) / 2)",
|
|
"calc(164px / 2)",
|
|
"calc(164px * 0.5)",
|
|
"82px",
|
|
]
|
|
});
|
|
test({
|
|
expression: "calc(var(--x, 10px) + 3px)",
|
|
el: sectionEl,
|
|
// TODO: var() should be substituted (See Bug 2041622)
|
|
expected: []
|
|
});
|
|
test({
|
|
expression: "calc((1em * max(sibling-index(), 10)) + (min(2, sibling-count()) * 0.5rem))",
|
|
el: document.querySelector("li:nth-of-type(2)"),
|
|
expected: [
|
|
"calc((1em * max(sibling-index(), 10)) + (min(2, sibling-count()) * 0.5rem))",
|
|
"calc((20px * max(2, 10)) + (min(2, 3) * 10px))",
|
|
"calc((20px * 10) + (min(2, 3) * 10px))",
|
|
"calc(200px + (min(2, 3) * 10px))",
|
|
"calc(200px + (2 * 10px))",
|
|
"calc(200px + 20px)",
|
|
"220px",
|
|
]
|
|
});
|
|
|
|
/// relative color computation
|
|
|
|
test({
|
|
// From `lch(from aquamarine l c calc(h + 180))`
|
|
expression: "calc(h + 180)",
|
|
el: sectionEl,
|
|
// TODO: This should be handled (See Bug 1898261)
|
|
expected: []
|
|
});
|
|
test({
|
|
// From `lch(from aquamarine l c calc(h - 180))`
|
|
expression: "calc(h - 180)",
|
|
el: sectionEl,
|
|
// TODO: This should be handled (See Bug 1898261)
|
|
expected: []
|
|
});
|
|
test({
|
|
// From `lch(from aquamarine l c calc(h * 2))`
|
|
expression: "calc(h * 2)",
|
|
el: sectionEl,
|
|
// TODO: This should be handled (See Bug 1898261)
|
|
expected: []
|
|
});
|
|
test({
|
|
// From `lch(from aquamarine l c calc(h / 2))`
|
|
expression: "calc(h / 2)",
|
|
el: sectionEl,
|
|
// TODO: This should be handled (See Bug 1898261)
|
|
expected: []
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|