mirror of
https://github.com/servo/servo.git
synced 2025-08-11 00:15:32 +01:00
Update web-platform-tests to revision b'afdce893ed51bc1a7a7ac03b16b5a575caad071a'
This commit is contained in:
WPT Sync Bot
parent
a8da28e55d
commit
3b420af385
393 changed files with 17484 additions and 4185 deletions
|
|
@ -58,17 +58,17 @@ testTransformValuesCloseTo("rotate(calc(infinity * 1deg))", 0.0001, "rotate(0deg
|
|||
testTransformValuesCloseTo("rotate(calc(-infinity * 1deg))", 0.0001, "rotate(0deg)");
|
||||
testTransformValuesCloseTo("rotate(calc(NaN * 1deg))", 0.0001, "rotate(0deg)");
|
||||
|
||||
testTransformValuesCloseTo("rotate(calc(infinity * 1turn))", 0.0001, "rotate(0turn)");
|
||||
testTransformValuesCloseTo("rotate(calc(-infinity * 1turn))", 0.0001, "rotate(0turn)");
|
||||
testTransformValuesCloseTo("rotate(calc(NaN * 1turn))", 0.0001, "rotate(0turn)");
|
||||
testTransformValuesCloseTo("rotate(calc(infinity * 1turn))", 0.0001, "rotate(0deg)");
|
||||
testTransformValuesCloseTo("rotate(calc(-infinity * 1turn))", 0.0001, "rotate(0deg)");
|
||||
testTransformValuesCloseTo("rotate(calc(NaN * 1turn))", 0.0001, "rotate(0deg)");
|
||||
|
||||
testTransformValuesCloseTo("rotate(calc(infinity * 1rad))", 0.0001, "rotate(0rad)");
|
||||
testTransformValuesCloseTo("rotate(calc(-infinity * 1rad))", 0.0001, "rotate(0rad)");
|
||||
testTransformValuesCloseTo("rotate(calc(NaN * 1rad))", 0.0001, "rotate(0rad)");
|
||||
testTransformValuesCloseTo("rotate(calc(infinity * 1rad))", 0.0001, "rotate(0deg)");
|
||||
testTransformValuesCloseTo("rotate(calc(-infinity * 1rad))", 0.0001, "rotate(0deg)");
|
||||
testTransformValuesCloseTo("rotate(calc(NaN * 1rad))", 0.0001, "rotate(0deg)");
|
||||
|
||||
testTransformValuesCloseTo("rotate(calc(infinity * 1grad))", 0.0001, "rotate(0grad)");
|
||||
testTransformValuesCloseTo("rotate(calc(-infinity * 1grad))", 0.0001, "rotate(0grad)");
|
||||
testTransformValuesCloseTo("rotate(calc(NaN * 1grad))", 0.0001, "rotate(0grad)");
|
||||
testTransformValuesCloseTo("rotate(calc(infinity * 1grad))", 0.0001, "rotate(0deg)");
|
||||
testTransformValuesCloseTo("rotate(calc(-infinity * 1grad))", 0.0001, "rotate(0deg)");
|
||||
testTransformValuesCloseTo("rotate(calc(NaN * 1grad))", 0.0001, "rotate(0deg)");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,12 @@ function test_serialization(t,s, {prop="width"}={}) {
|
|||
//TEST CASE | EXPECTED
|
||||
var test_map = {
|
||||
"1px * NaN" :"calc(NaN * 1px)",
|
||||
"1in * NaN" :"calc(NaN * 1px)",
|
||||
"1cm * NaN" :"calc(NaN * 1px)",
|
||||
"1mm * NaN" :"calc(NaN * 1px)",
|
||||
"1q * NaN" :"calc(NaN * 1px)",
|
||||
"1pt * NaN" :"calc(NaN * 1px)",
|
||||
"1pc * NaN" :"calc(NaN * 1px)",
|
||||
"1px * nan" :"calc(NaN * 1px)",
|
||||
"1px * infinity / infinity" :"calc(NaN * 1px)",
|
||||
"1px * 0 * infinity" :"calc(NaN * 1px)",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>Infinity and NaN: calc() serialization for time values.</title>
|
||||
<link rel="author" title="Seokho Song" href="mailto:0xdevssh@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values/#calc-type-checking">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../support/serialize-testcommon.js"></script>
|
||||
<div id="target"></div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
// There's no css property that takes a raw <resolution>, so we use image-set() to test it.
|
||||
function test_serialization(t,s, {prop="backgroundImage"}={}) {
|
||||
test_specified_serialization(prop, t, s)
|
||||
}
|
||||
//TEST CASE | EXPECTED
|
||||
var test_map = {
|
||||
"1x * NaN" :"calc(NaN * 1dppx)",
|
||||
"1x * nan" :"calc(NaN * 1dppx)",
|
||||
"1dppx * NaN" :"calc(NaN * 1dppx)",
|
||||
"1dppx * infinity / infinity" :"calc(NaN * 1dppx)",
|
||||
"1dppx * 0 * infinity" :"calc(NaN * 1dppx)",
|
||||
"1dppx * (infinity + -infinity)" :"calc(NaN * 1dppx)",
|
||||
"1dppx * (-infinity + infinity)" :"calc(NaN * 1dppx)",
|
||||
"1dppx * (infinity - infinity)" :"calc(NaN * 1dppx)",
|
||||
"1dppx * infinity" :"calc(infinity * 1dppx)",
|
||||
"1dppx * -infinity" :"calc(-infinity * 1dppx)",
|
||||
"1dppx * iNFinIty" :"calc(infinity * 1dppx)",
|
||||
"1dppx * (infinity + infinity)" :"calc(infinity * 1dppx)",
|
||||
"1dppx * (-infinity + -infinity)" :"calc(-infinity * 1dppx)",
|
||||
"1dppx * 1/infinity" :"calc(0dppx)",
|
||||
"1dppx * infinity * infinity" :"calc(infinity * 1dppx)",
|
||||
"1dppx * -infinity * -infinity" :"calc(infinity * 1dppx)",
|
||||
"1 * max(INFinity*3dppx, 0dppx)" :"calc(infinity * 1dppx)",
|
||||
"1 * min(inFInity*4dppx, 0dppx)" :"calc(0dppx)",
|
||||
"1 * max(nAn*2dppx, 0dppx)" :"calc(NaN * 1dppx)",
|
||||
"1 * min(nan*3dppx, 0dppx)" :"calc(NaN * 1dppx)",
|
||||
"1 * clamp(-INFINITY*0dppx, 0dppx, infiniTY*0dppx)" :"calc(0dppx)",
|
||||
|
||||
"1dppx * max(NaN, min(0,10))" :"calc(NaN * 1dppx)",
|
||||
"1dppx * clamp(NaN, 0, 10)" :"calc(NaN * 1dppx)",
|
||||
|
||||
"1dppx * max(0, min(10, NaN))" :"calc(NaN * 1dppx)",
|
||||
"1dppx * clamp(0, 10, NaN)" :"calc(NaN * 1dppx)",
|
||||
|
||||
"1dppx * max(0, min(NaN, 10))" :"calc(NaN * 1dppx)",
|
||||
"1dppx * clamp(0, NaN, 10)" :"calc(NaN * 1dppx)",
|
||||
|
||||
"1dppx * clamp(-Infinity, 0, infinity)" :"calc(0dppx)",
|
||||
"1dppx * clamp(-inFinity, infinity, 10)" :"calc(10dppx)",
|
||||
};
|
||||
|
||||
for (const exp in test_map)
|
||||
test_serialization(`image-set(url("") calc(${exp}))`, `image-set(url("") ${test_map[exp]})`);
|
||||
</script>
|
||||
|
|
@ -2,13 +2,20 @@
|
|||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Values and Units: calc() serialization of a summation (complex)</title>
|
||||
<title>CSS Values and Units: serialization of calc() specified values: 19 arithmetical operations (complex)</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-values-4/#compat">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-values-4/#calc-serialize">
|
||||
|
||||
<meta content="This test verifies how 11 summations of mixed length units are serialized. Absolute length units, relative length units, font-relative length units, viewport-percentage length units and percentage units are tested." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<meta content="This test verifies how 19 arithmetical operations of mixed length units in calc() specified values are serialized. Absolute length units (cm, in, mm, pc, pt, q, px), font-relative length units (ex, em, rem), viewport-percentage length units (vh, vmax, vmin, vw) and percentage units are tested. 12 additions, 6 substractions and 1 division are tested." name="assert">
|
||||
|
||||
<!--
|
||||
|
||||
Issue 1050968: CSS calc and other math function serialization doesn't follow the spec
|
||||
https://bugs.chromium.org/p/chromium/issues/detail?id=1050968
|
||||
|
||||
-->
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
||||
|
|
@ -38,53 +45,90 @@
|
|||
/*
|
||||
|
||||
"
|
||||
Sort the terms in the following order:
|
||||
|
||||
The number, if present
|
||||
If nodes contains a number, remove it from nodes and append it to ret.
|
||||
|
||||
The percentage, if present
|
||||
If nodes contains a percentage, remove it from nodes and append it to ret.
|
||||
|
||||
If nodes contains any dimensions, remove them from nodes, sort them by their units, ordered ASCII case-insensitively, and append them to ret.
|
||||
|
||||
If nodes still contains any items, append them to ret in the same order.
|
||||
|
||||
The dimensions, ordered by their units ASCII case-insensitive alphabetically
|
||||
"
|
||||
https://www.w3.org/TR/css-values-4/#math-function-serialize-a-summation
|
||||
|
||||
cm centimeters 1cm = 96px/2.54
|
||||
mm millimeters 1mm = 1/10th of 1cm
|
||||
Q quarter-millimeters 1Q = 1/40th of 1cm
|
||||
in inches 1in = 2.54cm = 96px
|
||||
pc picas 1pc = 1/6th of 1in
|
||||
pt points 1pt = 1/72th of 1in
|
||||
px pixels 1px = 1/96th of 1in
|
||||
https://www.w3.org/TR/css-values-4/#calc-serialize
|
||||
|
||||
*/
|
||||
|
||||
/* 12 Additions */
|
||||
|
||||
verifySerialization("calc(1vh + 2px + 3%)", "calc(3% + 2px + 1vh)", "testing calc(1vh + 2px + 3%)");
|
||||
|
||||
verifySerialization("calc(4px + 1vh)", "calc(4px + 1vh)", "testing calc(4px + 1vh)");
|
||||
|
||||
verifySerialization("calc(5px + 6em + 1vh)", "calc(6em + 5px + 1vh)", "testing calc(5px + 6em + 1vh)");
|
||||
|
||||
verifySerialization("calc(1vh - 7px)", "calc(-7px + 1vh)", "testing calc(1vh - 7px)");
|
||||
|
||||
verifySerialization("calc(-8px + 9em + 1vh)", "calc(9em - 8px + 1vh)", "testing calc(-8px + 9em + 1vh)");
|
||||
|
||||
verifySerialization("calc(1pc + 1in + 1vh + 10%)", "calc(10% + 112px + 1vh)", "testing calc(1pc + 1in + 1vh + 10%)");
|
||||
|
||||
/* verifySerialization(specified_value, serialization_expected, description) */
|
||||
|
||||
verifySerialization("calc(25.4q + 1vh + 12%)", "calc(12% + 24px + 1vh)", "testing calc(25.4q + 1vh + 12%)");
|
||||
|
||||
verifySerialization("calc(1em + 1.27cm + 13% + 3em)", "calc(13% + 4em + 48px)", "testing calc(1em + 1.27cm + 13% + 3em)");
|
||||
|
||||
verifySerialization("calc(1vmin - 14%)", "calc(-14% + 1vmin)", "testing calc(1vmin - 14%)");
|
||||
/* verifySerialization(specified_value, serialization_expected, description) */
|
||||
|
||||
verifySerialization("calc(15vw + 16vmin - 17vh)", "calc(-17vh + 16vmin + 15vw)", "testing calc(15vw + 16vmin - 17vh)");
|
||||
|
||||
verifySerialization("calc(-80px + 25.4mm)", "calc(16px)", "testing calc(-80px + 25.4mm)");
|
||||
verifySerialization("calc(9pt + calc(9rem + 10px))", "calc(22px + 9rem)", "testing calc(9pt + calc(9rem + 10px))");
|
||||
|
||||
verifySerialization("calc(5pt + 5em + 4pt + 3em)", "calc(8em + 12px)", "testing calc(5pt + 5em + 4pt + 3em)");
|
||||
|
||||
verifySerialization("calc(4vmin + 0pt + 3pc)", "calc(48px + 4vmin)", "testing calc(4vmin + 0pt + 3pc)");
|
||||
|
||||
verifySerialization("calc(4vmin + 0pt)", "calc(0px + 4vmin)", "testing calc(4vmin + 0pt)");
|
||||
|
||||
/*
|
||||
|
||||
More info on the calc(4vmin + 0pt) sub-test:
|
||||
https://github.com/web-platform-tests/wpt/pull/38245#issuecomment-1464215777
|
||||
Date: March 10th 2023
|
||||
|
||||
*/
|
||||
|
||||
/* 6 Substractions */
|
||||
|
||||
|
||||
verifySerialization("calc(100% - 100% + 1em)", "calc(0% + 1em)", "testing calc(100% - 100% + 1em)");
|
||||
|
||||
verifySerialization("calc(100% + 1em - 100%)", "calc(0% + 1em)", "testing calc(100% + 1em - 100%)");
|
||||
|
||||
verifySerialization("calc(1vh - 7px)", "calc(-7px + 1vh)", "testing calc(1vh - 7px)");
|
||||
|
||||
verifySerialization("calc(5ex - 9ex)", "calc(-4ex)", "testing calc(5ex - 9ex)");
|
||||
|
||||
/*
|
||||
This calc(-80px + 25.4mm) test is on purpose last. We want the
|
||||
div#target to occupy 16px and to not cause document box height
|
||||
|
||||
An out-of-range value inside calc() is not syntactically invalid.
|
||||
Inside a calc() function, the resulting summation value can be
|
||||
out of range and can be serialized.
|
||||
|
||||
*/
|
||||
|
||||
verifySerialization("calc(-80px + 25.4mm)", "calc(16px)", "testing calc(-80px + 25.4mm)");
|
||||
|
||||
/* verifySerialization(specified_value, serialization_expected, description) */
|
||||
|
||||
verifySerialization("calc(1vmin - 14%)", "calc(-14% + 1vmin)", "testing calc(1vmin - 14%)");
|
||||
|
||||
|
||||
/* 1 Multiplication and division */
|
||||
|
||||
|
||||
verifySerialization("calc(4 * 3px + 4pc / 8)", "calc(20px)", "testing calc(4 * 3px + 4pc / 8)");
|
||||
|
||||
/*
|
||||
This calc(4 * 3px + 4pc / 8) test is on purpose last. We want the
|
||||
div#target to occupy 20px and to not cause document box height
|
||||
to be unneedlessly tall.
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,110 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Values Test: computed value of 3 calc() values</title>
|
||||
|
||||
|
||||
<!--
|
||||
"
|
||||
Where percentages are not resolved at computed-value time,
|
||||
they are not resolved in math functions, e.g.
|
||||
'calc(100% - 100% + 1px)' resolves to 'calc(0% + 1px)', not to
|
||||
'1px'. If there are special rules for computing percentages
|
||||
in a value (e.g. the 'height' property), they apply whenever
|
||||
a math function contains percentages.
|
||||
"
|
||||
§ 10.11 Computed Value
|
||||
https://www.w3.org/TR/css-values-4/#calc-computed-value
|
||||
-->
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-values-4/#calc-computed-value">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta content="This test verifies that terms with a percentage unit that can not be resolved at computed-value time will require a calc() wrapper. A term with an em value, on the other hand, must be resolved at computed-value time and therefore must be absolutized to 'px'." name="assert">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
html, body
|
||||
{
|
||||
font-size: 16px;
|
||||
height: 570px;
|
||||
}
|
||||
|
||||
div#target
|
||||
{
|
||||
background-color: yellow;
|
||||
background-image: url("support/cat.png");
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 14% 50%; /* entirely arbitrary and random background-size values */
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="target"></div>
|
||||
|
||||
<script>
|
||||
function startTesting()
|
||||
{
|
||||
|
||||
var targetElement = document.getElementById("target");
|
||||
|
||||
function verifyComputedStyle(property_name, specified_value, expected_value, description)
|
||||
{
|
||||
|
||||
test(function()
|
||||
{
|
||||
|
||||
targetElement.style.setProperty(property_name, specified_value);
|
||||
|
||||
assert_equals(getComputedStyle(targetElement)[property_name], expected_value);
|
||||
|
||||
}, description);
|
||||
}
|
||||
|
||||
verifyComputedStyle("background-size", "calc(67% - 54% + 4em)", "calc(13% + 64px)", "testing background-size: calc(67% - 54% + 4em)");
|
||||
|
||||
/*
|
||||
"Where percentages are not resolved at computed-value time,
|
||||
they are not resolved in math functions (...)"
|
||||
https://www.w3.org/TR/css-values-4/#calc-serialize
|
||||
|
||||
Therefore here, the percentage is preserved and
|
||||
a calc() wrapper must be used. The 4em term
|
||||
must be resolved though.
|
||||
*/
|
||||
|
||||
verifyComputedStyle("background-position", "calc(100% - 100% + 20em)", "calc(0% + 320px) 50%", "testing background-position: calc(100% - 100% + 20em)");
|
||||
|
||||
/*
|
||||
Here too, the percentage is preserved and
|
||||
a calc() wrapper must be used. The 20em term
|
||||
must be resolved though.
|
||||
*/
|
||||
|
||||
|
||||
verifyComputedStyle("height", "calc(60% - 50% + 3em)", "105px", "testing height: calc(60% - 50% + 3em)");
|
||||
|
||||
/*
|
||||
|
||||
The height of the containing block of div#target is not auto.
|
||||
So, such percentage can and must be resolved at
|
||||
computed-value time.
|
||||
|
||||
570px mult 10% == 57px
|
||||
|
||||
+ 48px
|
||||
============
|
||||
105px
|
||||
|
||||
*/
|
||||
}
|
||||
|
||||
startTesting();
|
||||
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue