Skip to content

Commit

Permalink
Bug 1858832 [wpt PR 42517] - Add additional tests for multiplication/…
Browse files Browse the repository at this point in the history
…division of mixed units, a=testonly

Automatic update from web-platform-tests
Add additional tests for multiplication/division of mixed units (#42517)

This PR adds tests for testing multiplication/division of mixed units,
both in simple expressions as well as calc() inside media query expressions.

This is done in support of Interop 2024 ticket:
web-platform-tests/interop#513

--

wpt-commits: 47d5fbd0947420fa271416f2ae3e06f1c3bc0dd2
wpt-pr: 42517

UltraBlame original commit: d447d22cc1cbf776692b3d43c32298effdf63ffa
  • Loading branch information
marco-c committed Nov 8, 2023
1 parent fcbaf6d commit f4c0f34
Show file tree
Hide file tree
Showing 23 changed files with 315 additions and 175 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@

var targetElement = document.getElementById("target");

function verifyComputedStyle(property_name, specified_value, expected_value, description)
function verifyComputedStyle(property_name, specified_value, expected_value)
{

test(function()
Expand All @@ -60,10 +60,10 @@

assert_equals(getComputedStyle(targetElement)[property_name], expected_value);

}, description);
}, `testing ${property_name}: ${specified_value}`);
}

function compareValueCloseTo(property_name, specified_value, epsilon, expected_value, description)
function compareValueCloseTo(property_name, specified_value, epsilon, expected_value)
{

test(function()
Expand All @@ -83,60 +83,60 @@

assert_array_approx_equals(computedSpecifiedValue, computedExpectedValue, epsilon);

} , description);
}, `testing ${property_name}: ${specified_value}`);

}

verifyComputedStyle("tab-size", "4", "4", "testing tab-size: 4");
verifyComputedStyle("tab-size", "4", "4");

/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description) */
/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value) */

/* absolute length units: in, cm, mm, pt, pc, Q, px */

verifyComputedStyle("tab-size", "0.5in", "48px", "testing tab-size: 0.5in");
verifyComputedStyle("tab-size", "0.5in", "48px");

verifyComputedStyle("tab-size", "2.54cm", "96px", "testing tab-size: 2.54cm");
verifyComputedStyle("tab-size", "2.54cm", "96px");

verifyComputedStyle("tab-size", "25.4mm", "96px", "testing tab-size: 25.4mm");
verifyComputedStyle("tab-size", "25.4mm", "96px");

verifyComputedStyle("tab-size", "18pt", "24px", "testing tab-size: 18pt");
verifyComputedStyle("tab-size", "18pt", "24px");

verifyComputedStyle("tab-size", "5pc", "80px", "testing tab-size: 5pc");
verifyComputedStyle("tab-size", "5pc", "80px");

verifyComputedStyle("tab-size", "101.6Q", "96px", "testing tab-size: 101.6Q");
verifyComputedStyle("tab-size", "101.6Q", "96px");

verifyComputedStyle("tab-size", "7px", "7px", "testing tab-size: 7px");
verifyComputedStyle("tab-size", "7px", "7px");

/* verifyComputedStyle(property_name, specified_value, expected_value, description) */
/* verifyComputedStyle(property_name, specified_value, expected_value) */

/* relative length units: em, ex, rem */

verifyComputedStyle("tab-size", "1em", "20px", "testing tab-size: 1em");
verifyComputedStyle("tab-size", "1em", "20px");

/* compareValueCloseTo(property_name, specified_value, epsilon, expected_value, description) */
/* compareValueCloseTo(property_name, specified_value, epsilon, expected_value) */

compareValueCloseTo("tab-size", "2ex", 0.001, "32px", "testing tab-size: 2ex");
compareValueCloseTo("tab-size", "2ex", 0.001, "32px");

/*
For this sub-test, we set the tolerance precision (epsilon)
to (0.001 === 1 thousandth).
*/

verifyComputedStyle("tab-size", "3rem", "48px", "testing tab-size: 3rem");
verifyComputedStyle("tab-size", "3rem", "48px");

/*
NOT tested are: vw, vh, vmin, vmax and ch units
verifyComputedStyle("tab-size", "4vw", "?px", "testing tab-size: 4vw");
verifyComputedStyle("tab-size", "4vw", "?px");
verifyComputedStyle("tab-size", "5vh", "?px", "testing tab-size: 5vh");
verifyComputedStyle("tab-size", "5vh", "?px");
verifyComputedStyle("tab-size", "6vmin", "?px", "testing tab-size: 6vmin");
verifyComputedStyle("tab-size", "6vmin", "?px");
verifyComputedStyle("tab-size", "7vmax", "?px", "testing tab-size: 7vmax");
verifyComputedStyle("tab-size", "7vmax", "?px");
verifyComputedStyle("tab-size", "8ch", "?px", "testing tab-size: 8ch");
verifyComputedStyle("tab-size", "8ch", "?px");
*/

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@

var targetElement = document.getElementById("target");

function verifyComputedStyle(property_name, specified_value, expected_value, description)
function verifyComputedStyle(property_name, specified_value, expected_value)
{

test(function()
Expand All @@ -50,32 +50,32 @@

assert_equals(getComputedStyle(targetElement)[property_name], expected_value);

}, description);
}, `testing ${property_name}: ${specified_value}`);
}

verifyComputedStyle("word-spacing", "normal", "0px", "testing word-spacing: normal");
verifyComputedStyle("word-spacing", "normal", "0px");

verifyComputedStyle("word-spacing", "0", "0px", "testing word-spacing: 0");
verifyComputedStyle("word-spacing", "0", "0px");

verifyComputedStyle("word-spacing", "1.27cm", "48px", "testing word-spacing: 1.27cm");
verifyComputedStyle("word-spacing", "1.27cm", "48px");

verifyComputedStyle("word-spacing", "1em", "20px", "testing word-spacing: 1em");
verifyComputedStyle("word-spacing", "1em", "20px");

verifyComputedStyle("word-spacing", "0.5in", "48px", "testing word-spacing: 0.5in");
verifyComputedStyle("word-spacing", "0.5in", "48px");

verifyComputedStyle("word-spacing", "25.4mm", "96px", "testing word-spacing: 25.4mm");
verifyComputedStyle("word-spacing", "25.4mm", "96px");

verifyComputedStyle("word-spacing", "5pc", "80px", "testing word-spacing: 5pc");
verifyComputedStyle("word-spacing", "5pc", "80px");

verifyComputedStyle("word-spacing", "18pt", "24px", "testing word-spacing: 18pt");
verifyComputedStyle("word-spacing", "18pt", "24px");

verifyComputedStyle("word-spacing", "7px", "7px", "testing word-spacing: 7px");
verifyComputedStyle("word-spacing", "7px", "7px");

verifyComputedStyle("word-spacing", "101.6Q", "96px", "testing word-spacing: 101.6Q");
verifyComputedStyle("word-spacing", "101.6Q", "96px");

verifyComputedStyle("word-spacing", "3rem", "48px", "testing word-spacing: 3rem");
verifyComputedStyle("word-spacing", "3rem", "48px");

verifyComputedStyle("word-spacing", "0ch", "0px", "testing word-spacing: 0ch");
verifyComputedStyle("word-spacing", "0ch", "0px");

}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@

var targetElement = document.getElementById("target");

function verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description)
function verifyComputedStyle(property_name, initial_value, specified_value, expected_value)
{

test(function()
Expand All @@ -42,20 +42,20 @@

assert_equals(getComputedStyle(targetElement)[property_name], expected_value);

}, description);
}, `testing ${property_name}: ${specified_value}`);
}

/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description) */
/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value) */

verifyComputedStyle("background-position", "initial", "calc(2px + 3px) calc(4px + 5px)", "5px 9px", "testing background-position: calc(2px + 3px) calc(4px + 5px)");
verifyComputedStyle("background-position", "initial", "calc(2px + 3px) calc(4px + 5px)", "5px 9px");

verifyComputedStyle("background-position", "initial", "calc(18px - 7px) calc(19px - 7px)", "11px 12px", "testing background-position: calc(18px - 7px) calc(19px - 7px)");
verifyComputedStyle("background-position", "initial", "calc(18px - 7px) calc(19px - 7px)", "11px 12px");

verifyComputedStyle("background-position", "initial", "calc(4 * 5px) calc(6px * 4)", "20px 24px", "testing background-position: calc(4 * 5px) calc(6px * 4)");
verifyComputedStyle("background-position", "initial", "calc(4 * 5px) calc(6px * 4)", "20px 24px");

verifyComputedStyle("background-position", "initial", "calc(100px / 4) calc(119px / 7)", "25px 17px", "testing background-position: calc(100px / 4) calc(119px / 7)");
verifyComputedStyle("background-position", "initial", "calc(100px / 4) calc(119px / 7)", "25px 17px");

verifyComputedStyle("background-position", "initial", "calc(6px + 21%) calc(7em + 22%)", "calc(21% + 6px) calc(22% + 112px)", "testing background-position: calc(6px + 21%) calc(7em + 22%)");
verifyComputedStyle("background-position", "initial", "calc(6px + 21%) calc(7em + 22%)", "calc(21% + 6px) calc(22% + 112px)");

/*
"
Expand All @@ -67,9 +67,9 @@
https://www.w3.org/TR/css-values-3/#calc-computed-value
*/

verifyComputedStyle("background-position", "initial", "calc(-8px + 23%) calc(-9em + 24%)", "calc(23% - 8px) calc(24% - 144px)", "testing background-position: calc(-8px + 23%) calc(-9em + 24%)");
verifyComputedStyle("background-position", "initial", "calc(-8px + 23%) calc(-9em + 24%)", "calc(23% - 8px) calc(24% - 144px)");

/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description) */
/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value) */
}

startTesting();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,24 @@
<link rel="help" href="https://www.w3.org/TR/css3-values/#calc-computed-value">
</head>
<body>
<iframe src="./support/mixed-units-01.html" title="px/em" frameborder="0" height="10" width="100"></iframe>
<iframe src="./support/mixed-units-02.html" title="vh/em" frameborder="0" height="10" width="100"></iframe>
<iframe src="./support/mixed-units-03.html" title="vw/em" frameborder="0" height="10" width="100"></iframe>
<iframe src="./support/mixed-units-04.html" title="vw/vh" frameborder="0" height="10" width="100"></iframe>
<iframe src="./support/mixed-units-05.html" title="vh/px" frameborder="0" height="10" width="100"></iframe>
<iframe src="./support/mixed-units-06.html" title="vw/px" frameborder="0" height="10" width="100"></iframe>
<iframe src="./support/mixed-units-01.html" title="px-em" frameborder="0" height="10" width="100"></iframe>
<iframe src="./support/mixed-units-02.html" title="vh+em" frameborder="0" height="10" width="100"></iframe>
<iframe src="./support/mixed-units-03.html" title="vw-em" frameborder="0" height="10" width="100"></iframe>
<iframe src="./support/mixed-units-04.html" title="vw+vh" frameborder="0" height="10" width="100"></iframe>
<iframe src="./support/mixed-units-05.html" title="vh+px" frameborder="0" height="10" width="100"></iframe>
<iframe src="./support/mixed-units-06.html" title="vw+px" frameborder="0" height="10" width="100"></iframe>
<iframe src="./support/mixed-units-07.html" title="px/em*em" frameborder="0" height="10" width="100"></iframe>
<iframe src="./support/mixed-units-08.html" title="vh*em" frameborder="0" height="10" width="100"></iframe>
<iframe src="./support/mixed-units-09.html" title="vh*vw/em*px/vh" frameborder="0" height="10" width="100"></iframe>
<iframe src="./support/mixed-units-10.html" title="vw/px*vh" frameborder="0" height="10" width="100"></iframe>
<iframe src="./support/mixed-units-11.html" title="vh*vw/em*px" frameborder="0" height="10" width="100"></iframe>
<iframe src="./support/mixed-units-12.html" title="vw*vh*px*em/px/px/px" frameborder="0" height="10" width="100"></iframe>
<script>
for (const frame of document.querySelectorAll("iframe")) {
async_test((t) => {
frame.addEventListener("load", t.step_func(() => {
const box = frame.contentWindow.document.querySelector(".box");
const actual = frame.contentWindow.getComputedStyle(box).getPropertyValue("background-color");
const body = frame.contentWindow.document.body;
const actual = frame.contentWindow.getComputedStyle(body).getPropertyValue("background-color");
assert_equals(actual, "rgb(255, 165, 0)");
t.done();
}));
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@

var targetElement = document.getElementById("target");

function verifyComputedStyle(property_name, specified_value, expected_value, description)
function verifyComputedStyle(property_name, specified_value, expected_value)
{

test(function()
Expand All @@ -61,68 +61,60 @@

assert_equals(getComputedStyle(targetElement)[property_name], expected_value);

}, description);
}, `testing ${property_name}: ${specified_value}`);
}

/* verifyComputedStyle(property_name, specified_value, expected_value, description) */
/* verifyComputedStyle(property_name, specified_value, expected_value) */

/* LINEAR */

verifyComputedStyle(
"background-image",
"linear-gradient(rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))",
"linear-gradient(rgb(0, 128, 0) 0%, rgb(0, 0, 255))",
"testing background-image: linear-gradient(rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))");
"linear-gradient(rgb(0, 128, 0) 0%, rgb(0, 0, 255))");

verifyComputedStyle(
"background-image",
"linear-gradient(calc(90deg), rgb(0, 128, 0), rgb(0, 0, 255))",
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))",
"testing background-image: linear-gradient(calc(90deg), rgb(0, 128, 0), rgb(0, 0, 255))");
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");

verifyComputedStyle(
"background-image",
"linear-gradient(calc(90deg), rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))",
"linear-gradient(90deg, rgb(0, 128, 0) 0%, rgb(0, 0, 255))",
"testing background-position: linear-gradient(calc(90deg), rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))");
"linear-gradient(90deg, rgb(0, 128, 0) 0%, rgb(0, 0, 255))");

verifyComputedStyle(
"background-image",
"linear-gradient(calc(0.1turn + 0.15turn), rgb(0, 128, 0), rgb(0, 0, 255))",
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))",
"testing background-image: linear-gradient(calc(0.1turn + 0.15turn), rgb(0, 128, 0), rgb(0, 0, 255))");
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");

verifyComputedStyle(
"background-image",
"linear-gradient(calc(150grad - 50grad), rgb(0, 128, 0), rgb(0, 0, 255))",
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))",
"testing background-image: linear-gradient(calc(150grad - 50grad), rgb(0, 128, 0), rgb(0, 0, 255))");
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");

verifyComputedStyle(
"background-image",
"linear-gradient(calc(200grad - 90deg), rgb(0, 128, 0), rgb(0, 0, 255))",
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))",
"testing background-image: linear-gradient(calc(200grad - 90deg), rgb(0, 128, 0), rgb(0, 0, 255))");
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");


/* RADIAL */

verifyComputedStyle(
"background-image",
"radial-gradient(rgb(0, 128, 0) calc(10% + 20%), rgb(0, 0, 255) calc(30% + 40%))",
"radial-gradient(rgb(0, 128, 0) 30%, rgb(0, 0, 255) 70%)",
"testing background-image: radial-gradient(rgb(0, 128, 0) calc(10% + 20%), rgb(0, 0, 255) calc(30% + 40%))");
"radial-gradient(rgb(0, 128, 0) 30%, rgb(0, 0, 255) 70%)");


/* CONIC */

verifyComputedStyle(
"background-image",
"conic-gradient(rgb(0, 128, 0) calc(50% + 10%), rgb(0, 0, 255) calc(60% + 20%))",
"conic-gradient(rgb(0, 128, 0) 60%, rgb(0, 0, 255) 80%)",
"testing background-image: conic-gradient(rgb(0, 128, 0) calc(50% + 10%), rgb(0, 0, 255) calc(60% + 20%))");
"conic-gradient(rgb(0, 128, 0) 60%, rgb(0, 0, 255) 80%)");

/* verifyComputedStyle(property_name, specified_value, expected_value, description) */
/* verifyComputedStyle(property_name, specified_value, expected_value) */

}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@

var targetElement = document.getElementById("target");

function verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description)
function verifyComputedStyle(property_name, initial_value, specified_value, expected_value)
{

test(function()
Expand All @@ -42,16 +42,16 @@

assert_equals(getComputedStyle(targetElement)[property_name], expected_value);

}, description);
}, `testing ${property_name}: ${specified_value}`);
}

/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description) */
verifyComputedStyle("z-index", "auto", "calc(2.5 / 2)", "1", "testing z-index: calc(2.5 / 2)");
verifyComputedStyle("z-index", "auto", "calc(3 / 2)", "2", "testing z-index: calc(3 / 2)");
verifyComputedStyle("z-index", "auto", "calc(3.5 / 2)", "2", "testing z-index: calc(3.5 / 2)");
verifyComputedStyle("z-index", "auto", "calc(-2.5 / 2)", "-1", "testing z-index: calc(-2.5 / 2)");
verifyComputedStyle("z-index", "auto", "calc(-3 / 2)", "-1", "testing z-index: calc(-3 / 2)");
verifyComputedStyle("z-index", "auto", "calc(-3.5 / 2)", "-2", "testing z-index: calc(-3.5 / 2)");
/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value) */
verifyComputedStyle("z-index", "auto", "calc(2.5 / 2)", "1");
verifyComputedStyle("z-index", "auto", "calc(3 / 2)", "2");
verifyComputedStyle("z-index", "auto", "calc(3.5 / 2)", "2");
verifyComputedStyle("z-index", "auto", "calc(-2.5 / 2)", "-1");
verifyComputedStyle("z-index", "auto", "calc(-3 / 2)", "-1");
verifyComputedStyle("z-index", "auto", "calc(-3.5 / 2)", "-2");
}

startTesting();
Expand Down
Loading

0 comments on commit f4c0f34

Please sign in to comment.