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
  • Loading branch information
@brandonmcconnell @moz-wptsync-bot
brandonmcconnell authored and moz-wptsync-bot committed Oct 31, 2023
1 parent 46b190e commit 2553719
Show file tree
Hide file tree
Showing 23 changed files with 305 additions and 165 deletions.
46 changes: 23 additions & 23 deletions testing/web-platform/tests/css/css-text/tab-size/tab-size-computed-value-001.html
View file
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
28 changes: 14 additions & 14 deletions testing/web-platform/tests/css/css-text/word-spacing/word-spacing-computed-001.html
View file
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
20 changes: 10 additions & 10 deletions testing/web-platform/tests/css/css-values/calc-background-position-002.html
View file
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
22 changes: 14 additions & 8 deletions testing/web-platform/tests/css/css-values/calc-in-media-queries-with-mixed-units.html
View file
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
32 changes: 12 additions & 20 deletions testing/web-platform/tests/css/css-values/calc-linear-radial-conic-gradient-001.html
View file
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
18 changes: 9 additions & 9 deletions testing/web-platform/tests/css/css-values/calc-z-index-fractions-001.html
View file
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
16 changes: 8 additions & 8 deletions testing/web-platform/tests/css/css-values/getComputedStyle-border-radius-001.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,28 +46,28 @@

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

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

test(function()
{

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

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

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

verifyComputedStyle("border-top-left-radius", "calc(25% + 10px) calc(25% + 20px)", "testing border-top-left-radius: calc(10px + 25%) calc(20px + 25%)");
verifyComputedStyle("border-top-left-radius", "calc(25% + 10px) calc(25% + 20px)");

verifyComputedStyle("border-top-right-radius", "calc(25% + 16px)", "testing border-top-right-radius: calc(1em + 25%)");
verifyComputedStyle("border-top-right-radius", "calc(25% + 16px)");

verifyComputedStyle("border-bottom-right-radius", "25%", "testing border-bottom-right-radius: calc(25%)");
verifyComputedStyle("border-bottom-right-radius", "25%");

verifyComputedStyle("border-bottom-left-radius", "25px", "testing border-bottom-left-radius: calc(25px);");
verifyComputedStyle("border-bottom-left-radius", "25px");

verifyComputedStyle("border-radius", "calc(25% + 10px) calc(25% + 16px) 25% 25px / calc(25% + 20px) calc(25% + 16px) 25% 25px", "testing border-radius shorthand");
verifyComputedStyle("border-radius", "calc(25% + 10px) calc(25% + 16px) 25% 25px / calc(25% + 20px) calc(25% + 16px) 25% 25px");

/*
Expand Down
Loading

0 comments on commit 2553719

Please sign in to comment.