Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 14:10:11 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'

Browse source
This commit is contained in:
WPT Sync Bot 2022-11-10 01:22:36 +00:00
parent ace9b32b1c
commit df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
Download patch file Download diff file Expand all files Collapse all files

38
tests/wpt/web-platform-tests/css/css-values/absolute-length-units-001.html
View file

@ -14,30 +14,22 @@
#t6 { width: 6pc; height: 72pt; }
#t7 { width: 72pt; height: 96px; }
</style>
</head>
<body>
<div id="t1"> </div>
<div id="t2"> </div>
<div id="t3"> </div>
<div id="t4"> </div>
<div id="t5"> </div>
<div id="t6"> </div>
<div id="t7"> </div>
<script type="text/javascript">
<div id="t1"> </div>
<div id="t2"> </div>
<div id="t3"> </div>
<div id="t4"> </div>
<div id="t5"> </div>
<div id="t6"> </div>
<div id="t7"> </div>
var test_items = ["t1", "t2", "t3", "t4", "t5", "t6", "t7"]
function getPropertyValue(id, property) {
var elem = document.getElementById(id);
return window.getComputedStyle(elem, null).getPropertyValue(property);
}
<script>
var test_items = ["t1", "t2", "t3", "t4", "t5", "t6", "t7"]
for (var i = 0; i < test_items.length; i++) {
test(function(){
for (var i = 0; i < test_items.length; i++) {
assert_equals(getPropertyValue(test_items[i], "width"), getPropertyValue(test_items[i], "height"));
}
}, "all width and height should be same");
</script>
</body>
</html>
var elem = document.getElementById(test_items[i]);
assert_equals(getComputedStyle(elem).width, getComputedStyle(elem).height, elem.id);
}, test_items[i])
}
</script>

8
tests/wpt/web-platform-tests/css/css-values/acos-asin-atan-atan2-invalid.html
View file

@ -67,9 +67,15 @@ test_invalid_angle('atan2(1deg / )');
test_invalid_angle('atan2(1deg 2deg)');
test_invalid_angle('atan2(1deg, , 2deg)');
test_invalid_angle('atan2(90px)');
// atan2() has to resolve to the same dimension.
test_invalid_angle('atan2(90px, 90vw)');
test_invalid_angle('atan2(90px, 90em)');
test_invalid_angle('atan2(90px, 100%)');
test_invalid_angle('atan2(30deg + 1.0471967rad, 0)');
test_invalid_angle('atan2( 0 ,)');
test_invalid_angle('atan2( () 30deg - 0.523599rad )');
test_invalid_angle('atan2(45deg )');
test_invalid_angle('atan2(30deg, + 0.261799rad)');
</script>
</script>

80
tests/wpt/web-platform-tests/css/css-values/acos-asin-atan-atan2-serialize.html
View file

@ -3,49 +3,53 @@
<link rel="help" href="https://drafts.csswg.org/css-values-4/#angles">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-serialize">
<link rel="author" title="Apple Inc">
<link rel="author" title="Seokho Song" href="seokho@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/serialize-testcommon.js"></script>
<div id=target></div>
<script>
function test_serialization(t,s,c,u, {prop="transform"}={}) {
t = `rotate(${t})`;
test_specified_serialization(prop, t, `rotate(${s})`);
test_computed_serialization(prop, t, c);
if(u) test_used_serialization(prop, t, u);
function test_serialization(specified, expected, {prop="transform"}={}) {
// We only test the specified serialization,
// and not the computed or used serialization,
// since we'd need to do that by retrieving the rotation matrix,
// and that isn't perfectly interoperable in corner cases.
// Plus the point of this test is to check the trig functions themselves.
test_specified_serialization(prop, `rotate(${specified})`, `rotate(${expected})`)
}
//TEST CASE | EXPECTED
var test_map = {
"acos(1)" :"calc(0deg)",
"acos(-1)" :"calc(180deg)",
"acos(-1.5)" :"calc(NaN * 1deg)",
"acos(1.5)" :"calc(NaN * 1deg)",
"acos(2)" :"calc(NaN * 1deg)",
"acos(0.5)" :"calc(60deg)",
"acos(1 - 0.5)" :"calc(60deg)",
"acos(0)" :"calc(90deg)",
"asin(1)" :"calc(90deg)",
"asin(-1)" :"calc(-90deg)",
"asin(-1.5)" :"calc(NaN * 1deg)",
"asin(1.5)" :"calc(NaN * 1deg)",
"asin(2)" :"calc(NaN * 1deg)",
"asin(0.5)" :"calc(30deg)",
"asin(1 - 0.5)" :"calc(30deg)",
"asin(0)" :"calc(0deg)",
"acos(pi - pi)" :"calc(90deg)",
"asin(pi - pi + 1)" :"calc(90deg)",
"atan(1)" :"calc(45deg)",
"atan(0.5)" :"calc(26.5651deg)",
"atan(0.577350269)" :"calc(30deg)",
"atan(0)" :"calc(0deg)",
"atan(infinity)" :"calc(90deg)",
"atan(tan(90deg))" :"calc(90deg)",
"atan(tan(-90deg))" :"calc(-90deg)",
};
// Browsers aren't perfectly interoperable about how a 90deg rotation is serialized,
// but that's not the focus of this test,
// so just capture *whatever* the browser does and expect that.
const rotateMatrix = (()=>{
const el = document.querySelector("#target");
el.style.transform = "rotate(90deg)";
const ret = getComputedStyle(el).transform;
el.removeAttribute('style');
return ret;
})();
test_serialization(
'acos(0)',
'calc(90deg)',
rotateMatrix);
test_serialization(
'asin(1)',
'calc(90deg)',
rotateMatrix);
test_serialization(
'calc(acos(pi - pi))',
'calc(90deg)',
rotateMatrix);
test_serialization(
'calc(asin(pi - pi + 1))',
'calc(90deg)',
rotateMatrix);
test_serialization(
'calc(atan(infinity))',
'calc(90deg)',
rotateMatrix);
for (var exp in test_map) {
test_serialization(exp, test_map[exp]);
test_serialization(`calc(${exp})`, test_map[exp]);
}
</script>

1
tests/wpt/web-platform-tests/css/css-values/angle-units-001.html
View file

@ -9,6 +9,7 @@
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="invalid">
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4000">
<style>
div

1
tests/wpt/web-platform-tests/css/css-values/angle-units-002.html
View file

@ -9,6 +9,7 @@
<link rel="help" href="https://www.w3.org/TR/CSS22/syndata.html#characters">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4000">
<meta content="This test checks that 'deg' angle unit is case-insensitive." name="assert">
<style>

1
tests/wpt/web-platform-tests/css/css-values/angle-units-003.html
View file

@ -9,6 +9,7 @@
<link rel="help" href="https://www.w3.org/TR/CSS22/syndata.html#characters">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4000">
<meta content="This test checks that 'grad' angle unit is case-insensitive." name="assert">
<style>

1
tests/wpt/web-platform-tests/css/css-values/angle-units-004.html
View file

@ -9,6 +9,7 @@
<link rel="help" href="https://www.w3.org/TR/CSS22/syndata.html#characters">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4000">
<meta content="This test checks that 'rad' angle unit is case-insensitive." name="assert">
<style>

1
tests/wpt/web-platform-tests/css/css-values/angle-units-005.html
View file

@ -9,6 +9,7 @@
<link rel="help" href="https://www.w3.org/TR/CSS22/syndata.html#characters">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4000">
<meta content="This test checks that 'turn' angle unit is case-insensitive." name="assert">
<style>

9
tests/wpt/web-platform-tests/css/css-values/animations/calc-interpolation.html
View file

@ -36,9 +36,16 @@
<div class="target"></div>
</div>
</template>
<div class="target" id="inf-target"></div>
<script>
const APPROX_INFINITY = (function() {
const target = document.getElementById("inf-target");
target.style.letterSpacing = "calc(1px * infinity)";
const inf = parseFloat(getComputedStyle(target).letterSpacing);
target.remove();
return inf;
}());
const APPROX_INFINITY = 3.35544e+07;
test_interpolation({
property: 'left',
from: '0px',

32
tests/wpt/web-platform-tests/css/css-values/animations/line-height-lh-transition.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<title>CSS Values and Units Test: line-height transition affecting lh units</title>
<link rel="help" href="https://www.w3.org/TR/css-values-4/#lh">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#target {
width: 20lh;
line-height: 10px;
transition: line-height 1s;
}
#target.lh {
line-height: 20px;
}
</style>
<div id="target"></div>
<script>
let t = async_test("lh unit length should change with transitioning line-height");
t.step(() => {
target.offsetTop;
target.className = "lh";
});
requestAnimationFrame(() => requestAnimationFrame(() => requestAnimationFrame(() => {
t.step(() => {
assert_not_equals(getComputedStyle(target).width, "200px");
assert_not_equals(getComputedStyle(target).width, "400px");
t.done();
}, "Transition should be progressing. Not at start/end.");
})));
</script>

137
tests/wpt/web-platform-tests/css/css-values/calc-angle-values.html
View file

@ -20,7 +20,7 @@
<link rel="help" href="https://www.w3.org/TR/css-values-3/#calc-computed-value">
<link rel="help" href="https://www.w3.org/TR/css-values-3/#angles">
<meta content="This test checks that additions, substractions, multiplications and divisions in calc() function when applied to angle units." name="assert">
<meta content="This test checks that additions, subtractions, multiplications and divisions in calc() function when applied to angle units." name="assert">
<script src="/resources/testharness.js"></script>
@ -34,103 +34,94 @@
<script>
function startTesting()
{
/*
In this mega-test of 27 sub-tests, we intentionally
set the tolerance precision (epsilon) to a rather big
value (0.0001 === 100 millionths). The reason for this
is we want to verify if browsers and CSS-capable
applications do the right calculations. We do not want
to penalize browsers and CSS-capable applications that
have modest precision (not capable of a 1 millionth
level precision).
*/
/* compareValueCloseTo(property_name, calcValue, epsilon, expectedValue, description) */
// testTransformValuesCloseTo(property_name, calcValue, epsilon, expectedValue, description)
compareValueCloseTo("transform", "rotate(calc(45deg + 45deg))", 0.0001, "rotate(90deg)", "addition of 2 angle units: deg plus deg");
testTransformValuesCloseTo("rotate(calc(45deg + 45deg))", 0.0001, "rotate(90deg)", "addition of 2 angle units: deg plus deg");
compareValueCloseTo("transform", "rotate(calc(45deg + 1rad))", 0.0001, "rotate(102.29578deg)", "addition of 2 angle units: deg plus rad");
testTransformValuesCloseTo("rotate(calc(45deg + 1rad))", 0.0001, "rotate(102.29578deg)", "addition of 2 angle units: deg plus rad");
/*
1 radian == 57.295779513 degrees
The original test was using the slightly imprecise rotate(102.3deg)
*/
compareValueCloseTo("transform", "rotate(calc(20deg + 200grad))", 0.0001, "rotate(200deg)", "addition of 2 angle units: deg plus grad");
testTransformValuesCloseTo("rotate(calc(20deg + 200grad))", 0.0001, "rotate(200deg)", "addition of 2 angle units: deg plus grad");
compareValueCloseTo("transform", "rotate(calc(200deg + 0.5turn))", 0.0001, "rotate(380deg)", "addition of 2 angle units: deg plus turn");
testTransformValuesCloseTo("rotate(calc(200deg + 0.5turn))", 0.0001, "rotate(380deg)", "addition of 2 angle units: deg plus turn");
compareValueCloseTo("transform", "rotate(calc(45rad + 45rad))", 0.0001, "rotate(90rad)", "addition of 2 angle units: rad plus rad");
testTransformValuesCloseTo("rotate(calc(45rad + 45rad))", 0.0001, "rotate(90rad)", "addition of 2 angle units: rad plus rad");
compareValueCloseTo("transform", "rotate(calc(1rad + 40grad))", 0.0001, "rotate(93.29578deg)", "addition of 2 angle units: rad plus grad");
/*
1 radian == 57.295779513 degrees; 40 gradians is 36 degrees.
*/
compareValueCloseTo("transform", "rotate(calc(1rad + 0.5turn))", 0.0001, "rotate(237.29578deg)", "addition of 2 angle units: rad plus turn");
compareValueCloseTo("transform", "rotate(calc(45grad + 45grad))", 0.0001, "rotate(90grad)", "addition of 2 angle units: grad plus grad");
compareValueCloseTo("transform", "rotate(calc(10grad + 0.5turn))", 0.0001, "rotate(189deg)", "addition of 2 angle units: grad plus turn");
/*
10 gradians is 9 degrees.
*/
/* compareValueCloseTo(property_name, calcValue, epsilon, expectedValue, description) */
testTransformValuesCloseTo("rotate(calc(1rad + 40grad))", 0.0001, "rotate(93.29578deg)", "addition of 2 angle units: rad plus grad");
/* Substraction of angle unit */
/* compareValueCloseTo(property_name, calcValue, epsilon, expectedValue, description) */
compareValueCloseTo("transform", "rotate(calc(45deg - 15deg))", 0.0001, "rotate(30deg)", "substraction of angle unit: deg minus deg");
compareValueCloseTo("transform", "rotate(calc(90deg - 1rad))", 0.0001, "rotate(32.70422deg)", "substraction of angle unit: deg minus rad");
/*
1 radian == 57.295779513 degrees
*/
compareValueCloseTo("transform", "rotate(calc(38deg - 20grad))", 0.0001, "rotate(20deg)", "substraction of angle unit: deg minus grad");
compareValueCloseTo("transform", "rotate(calc(360deg - 0.5turn))", 0.0001, "rotate(180deg)", "substraction of angle unit: deg minus turn");
compareValueCloseTo("transform", "rotate(calc(45rad - 15rad))", 0.0001, "rotate(30rad)", "substraction of angle unit: rad minus rad");
compareValueCloseTo("transform", "rotate(calc(30rad - 10grad))", 0.0001, "rotate(1709.87339deg)", "substraction of angle unit: rad minus grad");
/*
30 radians is 1718.8733854 degrees ; 10 gradians is 9 degrees.
*/
compareValueCloseTo("transform", "rotate(calc(4rad - 0.1turn))", 0.0001, "rotate(193.18312deg)", "substraction of angle unit: rad minus turn");
/*
4 radians is 229.183118052 degrees ; 0.1 turn is 36 degrees.
*/
compareValueCloseTo("transform", "rotate(calc(45grad - 15grad))", 0.0001, "rotate(30grad)", "substraction of angle unit: grad minus grad");
compareValueCloseTo("transform", "rotate(calc(100grad - 0.25turn))", 0.0001, "rotate(0deg)", "substraction of angle unit: grad minus turn");
// 1 radian == 57.295779513 degrees; 40 gradians is 36 degrees.
/* Multiplication of angle unit */
testTransformValuesCloseTo("rotate(calc(1rad + 0.5turn))", 0.0001, "rotate(237.29578deg)", "addition of 2 angle units: rad plus turn");
/* compareValueCloseTo(property_name, calcValue, epsilon, expectedValue, description) */
testTransformValuesCloseTo("rotate(calc(45grad + 45grad))", 0.0001, "rotate(90grad)", "addition of 2 angle units: grad plus grad");
compareValueCloseTo("transform", "rotate(calc(45deg * 2))", 0.0001, "rotate(90deg)", "multiplication of angle unit: deg multiplied by int");
testTransformValuesCloseTo("rotate(calc(10grad + 0.5turn))", 0.0001, "rotate(189deg)", "addition of 2 angle units: grad plus turn");
compareValueCloseTo("transform", "rotate(calc(2 * 45rad))", 0.0001, "rotate(90rad)", "multiplication of angle unit: int multiplied by rad");
// 10 gradians is 9 degrees.
compareValueCloseTo("transform", "rotate(calc(45grad * 2))", 0.0001, "rotate(90grad)", "multiplication of angle unit: grad multiplied by int");
// subtraction of angle unit
compareValueCloseTo("transform", "rotate(calc(2 * 45turn))", 0.0001, "rotate(90turn)", "multiplication of angle unit: int multiplied by turn");
testTransformValuesCloseTo("rotate(calc(45deg - 15deg))", 0.0001, "rotate(30deg)", "subtraction of angle unit: deg minus deg");
testTransformValuesCloseTo("rotate(calc(90deg - 1rad))", 0.0001, "rotate(32.70422deg)", "subtraction of angle unit: deg minus rad");
// 1 radian == 57.295779513 degrees
testTransformValuesCloseTo("rotate(calc(38deg - 20grad))", 0.0001, "rotate(20deg)", "subtraction of angle unit: deg minus grad");
testTransformValuesCloseTo("rotate(calc(360deg - 0.5turn))", 0.0001, "rotate(180deg)", "subtraction of angle unit: deg minus turn");
testTransformValuesCloseTo("rotate(calc(45rad - 15rad))", 0.0001, "rotate(30rad)", "subtraction of angle unit: rad minus rad");
testTransformValuesCloseTo("rotate(calc(30rad - 10grad))", 0.0001, "rotate(1709.87339deg)", "subtraction of angle unit: rad minus grad");
// 30 radians is 1718.8733854 degrees ; 10 gradians is 9 degrees.
testTransformValuesCloseTo("rotate(calc(4rad - 0.1turn))", 0.0001, "rotate(193.18312deg)", "subtraction of angle unit: rad minus turn");
// 4 radians is 229.183118052 degrees ; 0.1 turn is 36 degrees.
testTransformValuesCloseTo("rotate(calc(45grad - 15grad))", 0.0001, "rotate(30grad)", "subtraction of angle unit: grad minus grad");
testTransformValuesCloseTo("rotate(calc(100grad - 0.25turn))", 0.0001, "rotate(0deg)", "subtraction of angle unit: grad minus turn");
/* Division of angle unit */
// Multiplication of angle unit
/* compareValueCloseTo(property_name, calcValue, epsilon, expectedValue, description) */
testTransformValuesCloseTo("rotate(calc(45deg * 2))", 0.0001, "rotate(90deg)", "multiplication of angle unit: deg multiplied by int");
compareValueCloseTo("transform", "rotate(calc(90deg / 2))", 0.0001, "rotate(45deg)", "division of angle unit: deg divided by int");
testTransformValuesCloseTo("rotate(calc(2 * 45rad))", 0.0001, "rotate(90rad)", "multiplication of angle unit: int multiplied by rad");
compareValueCloseTo("transform", "rotate(calc(90rad / 2))", 0.0001, "rotate(45rad)", "division of angle unit: rad divided by int");
testTransformValuesCloseTo("rotate(calc(45grad * 2))", 0.0001, "rotate(90grad)", "multiplication of angle unit: grad multiplied by int");
compareValueCloseTo("transform", "rotate(calc(90grad / 2))", 0.0001, "rotate(45grad)", "division of angle unit: grad divided by int");
testTransformValuesCloseTo("rotate(calc(2 * 45turn))", 0.0001, "rotate(90turn)", "multiplication of angle unit: int multiplied by turn");
compareValueCloseTo("transform", "rotate(calc(90turn / 2))", 0.0001, "rotate(45turn)", "division of angle unit: turn divided by int");
/* compareValueCloseTo(property_name, calcValue, epsilon, expectedValue, description) */
// Division of angle unit
testTransformValuesCloseTo( "rotate(calc(90deg / 2))", 0.0001, "rotate(45deg)", "division of angle unit: deg divided by int");
testTransformValuesCloseTo("rotate(calc(90rad / 2))", 0.0001, "rotate(45rad)", "division of angle unit: rad divided by int");
testTransformValuesCloseTo("rotate(calc(90grad / 2))", 0.0001, "rotate(45grad)", "division of angle unit: grad divided by int");
testTransformValuesCloseTo("rotate(calc(90turn / 2))", 0.0001, "rotate(45turn)", "division of angle unit: turn divided by int");
/*
@ -155,11 +146,9 @@
/* Testing conversion of angle unit */
// Testing conversion of angle unit
/* compareValueCloseTo(property_name, calcValue, epsilon, expectedValue, description) */
compareValueCloseTo("transform", "rotate(calc(50grad)", 0.0001, "rotate(45deg)", "conversion of angle unit: grad into deg");
testTransformValuesCloseTo("rotate(calc(50grad)", 0.0001, "rotate(45deg)", "conversion of angle unit: grad into deg");
}

29
tests/wpt/web-platform-tests/css/css-values/calc-in-media-queries-with-mixed-units.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>test calc with mixed units in media queries</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<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>
<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");
assert_equals(actual, "rgb(255, 165, 0)");
t.done();
}));
}, `box should be orange if the calc between ${frame.title} in @media was correct`);
}
</script>
</body>
</html>

78
tests/wpt/web-platform-tests/css/css-values/calc-infinity-nan-computed.html
View file

@ -12,57 +12,63 @@
<body>
<div id="target"></div>
<script>
const APPROX_INFINITY = 3.35544e+07;
const APPROX_NEGATIVE_INFINITY = -APPROX_INFINITY;
const REALLY_LARGE = 1e6;
const REALLY_LARGE_NEGATIVE = -REALLY_LARGE;
// For <length>
test_computed_value_greater_or_lower_than("width", "calc(NaN * 1px)", APPROX_INFINITY);
test_computed_value_greater_or_lower_than("width", "calc(infinity * 1px)", APPROX_INFINITY);
test_computed_value_greater_or_lower_than("width", "calc(infinity * 1cm)", APPROX_INFINITY);
test_computed_value_greater_or_lower_than("width", "calc(NaN * 1rem)", APPROX_INFINITY);
test_computed_value("width", "calc(NaN * 1px)", "0px");
testComputedValueGreaterOrLowerThan("width", "calc(infinity * 1px)", REALLY_LARGE);
testComputedValueGreaterOrLowerThan("width", "calc(infinity * 1cm)", REALLY_LARGE);
test_computed_value("width", "calc(NaN * 1rem)", "0px");
test_computed_value("width", "calc(10.135262721212548pc - 199pt / NaN)", "0px");
test_computed_value_greater_or_lower_than("width", "calc(infinity * 1px - infinity * 1%)", APPROX_INFINITY);
test_computed_value_greater_or_lower_than("width", "calc(infinity * 1px + infinity * 1%)", APPROX_INFINITY);
test_computed_value_greater_or_lower_than("width", "calc(min(NaN * 1px, infinity * 1px) + max(infinity * 1px, -infinity * 1px))", APPROX_INFINITY);
test_computed_value_greater_or_lower_than("width", "calc(infinity * 1px - max(infinity * 1%, 0%))", APPROX_INFINITY);
test_computed_value("width", "max(15px, NaN * 1px)", "0px");
test_computed_value("width", "max(NaN * 1px, 15px)", "0px");
test_computed_value("width", "min(15px, NaN * 1px)", "0px");
test_computed_value("width", "min(NaN * 1px, 15px)", "0px");
test_computed_value_greater_or_lower_than("width", "calc(max(infinity * 1px, 10px))", APPROX_INFINITY);
test_computed_value("width", "calc(infinity * 1px - infinity * 1%)", "0px");
test_computed_value("width", "calc(infinity * 1px + infinity * 1%)", "0px");
test_computed_value("width", "calc(min(NaN * 1px, infinity * 1px) + max(infinity * 1px, -infinity * 1px))", "0px");
test_computed_value("width", "calc(infinity * 1px - max(infinity * 1%, 0%))", "0px");
test_computed_value_greater_or_lower_than("margin-left", "calc(-infinity * 1px)", APPROX_NEGATIVE_INFINITY);
test_computed_value_greater_or_lower_than("margin-left", "calc(min(1px, -infinity * 1%))", APPROX_NEGATIVE_INFINITY);
testComputedValueGreaterOrLowerThan("width", "calc(max(infinity * 1px, 10px))", REALLY_LARGE);
test_computed_value_greater_or_lower_than("margin-left", "calc(-infinity * 1%)", APPROX_NEGATIVE_INFINITY);
test_computed_value_greater_or_lower_than("margin-left", "calc(max(10000px, 0px) + min(-infinity * 1px, infinity * 1px))", APPROX_NEGATIVE_INFINITY);
testComputedValueGreaterOrLowerThan("margin-left", "calc(-infinity * 1px)", REALLY_LARGE_NEGATIVE);
testComputedValueGreaterOrLowerThan("margin-left", "calc(min(1px, -infinity * 1%))", REALLY_LARGE_NEGATIVE);
test_computed_value_greater_or_lower_than("margin-left", "calc(-infinity * 1px - infinity * 1px)", APPROX_NEGATIVE_INFINITY);
test_computed_value_greater_or_lower_than("margin-left", "calc(min(-infinity * 1px, 10px))", APPROX_NEGATIVE_INFINITY);
testComputedValueGreaterOrLowerThan("margin-left", "calc(-infinity * 1%)", REALLY_LARGE_NEGATIVE);
testComputedValueGreaterOrLowerThan("margin-left", "calc(max(10000px, 0px) + min(-infinity * 1px, infinity * 1px))", REALLY_LARGE_NEGATIVE);
testComputedValueGreaterOrLowerThan("margin-left", "calc(-infinity * 1px - infinity * 1px)", REALLY_LARGE_NEGATIVE);
testComputedValueGreaterOrLowerThan("margin-left", "calc(min(-infinity * 1px, 10px))", REALLY_LARGE_NEGATIVE);
// For <time>
test_computed_value_greater_or_lower_than("animation-duration", "calc(NaN * 1s)", APPROX_INFINITY);
test_computed_value_greater_or_lower_than("animation-duration", "calc(infinity * 1s)", APPROX_INFINITY);
test_computed_value_greater_or_lower_than("animation-duration", "calc(1 / 0 * 1s)", APPROX_INFINITY);
test_computed_value_greater_or_lower_than("animation-duration", "calc(max(infinity * 1s, 10s)", APPROX_INFINITY);
test_computed_value("animation-duration", "calc(NaN * 1s)", "0s");
testComputedValueGreaterOrLowerThan("animation-duration", "calc(infinity * 1s)", REALLY_LARGE);
test_computed_value("animation-duration", "calc(1 / 0 * 1s)", "0s");
testComputedValueGreaterOrLowerThan("animation-duration", "calc(max(infinity * 1s, 10s)", REALLY_LARGE);
test_computed_value_greater_or_lower_than("transition-delay", "calc(-infinity* 1s)", APPROX_NEGATIVE_INFINITY);
test_computed_value_greater_or_lower_than("transition-delay", "calc(max(10000s, 0s) + min(-infinity * 1s, infinity * 1s))", APPROX_NEGATIVE_INFINITY);
test_computed_value_greater_or_lower_than("transition-delay", "calc(min(-infinity * 1s, 10s))", APPROX_NEGATIVE_INFINITY);
testComputedValueGreaterOrLowerThan("transition-delay", "calc(-infinity* 1s)", REALLY_LARGE_NEGATIVE);
testComputedValueGreaterOrLowerThan("transition-delay", "calc(max(10000s, 0s) + min(-infinity * 1s, infinity * 1s))", REALLY_LARGE_NEGATIVE);
testComputedValueGreaterOrLowerThan("transition-delay", "calc(min(-infinity * 1s, 10s))", REALLY_LARGE_NEGATIVE);
// For <angle>
compareValueCloseTo("transform", "rotate(calc(infinity * 1deg))", 0.0001, "rotate(0deg)" );
compareValueCloseTo("transform", "rotate(calc(-infinity * 1deg))", 0.0001, "rotate(0deg)");
compareValueCloseTo("transform", "rotate(calc(NaN * 1deg))", 0.0001, "rotate(0deg)");
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)");
compareValueCloseTo("transform", "rotate(calc(infinity * 1turn))", 0.0001, "rotate(0turn)" );
compareValueCloseTo("transform", "rotate(calc(-infinity * 1turn))", 0.0001, "rotate(0turn)");
compareValueCloseTo("transform", "rotate(calc(NaN * 1turn))", 0.0001, "rotate(0turn)");
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)");
compareValueCloseTo("transform", "rotate(calc(infinity * 1rad))", 0.0001, "rotate(0rad)" );
compareValueCloseTo("transform", "rotate(calc(-infinity * 1rad))", 0.0001, "rotate(0rad)");
compareValueCloseTo("transform", "rotate(calc(NaN * 1rad))", 0.0001, "rotate(0rad)");
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)");
compareValueCloseTo("transform", "rotate(calc(infinity * 1grad))", 0.0001, "rotate(0grad)" );
compareValueCloseTo("transform", "rotate(calc(-infinity * 1grad))", 0.0001, "rotate(0grad)");
compareValueCloseTo("transform", "rotate(calc(NaN * 1grad))", 0.0001, "rotate(0grad)");
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)");
</script>
</body>

4
tests/wpt/web-platform-tests/css/css-values/clamp-length-serialize.html
View file

@ -9,7 +9,7 @@ function test_valid_length(value, expected) {
test_valid_value('letter-spacing', value, expected);
}
test_valid_length('clamp(1px, 2px, 3px)', 'clamp(1px, 2px, 3px)');
test_valid_length('clamp(1px, 2px, clamp(2px, 3px, 4px))', 'clamp(1px, 2px, clamp(2px, 3px, 4px))');
test_valid_length('clamp(1px, 2px, 3px)', 'calc(2px)');
test_valid_length('clamp(1px, 2px, clamp(2px, 3px, 4px))', 'calc(2px)');
</script>

4
tests/wpt/web-platform-tests/css/css-values/exp-log-compute.html
View file

@ -19,7 +19,7 @@ test_math_used('calc(e - exp(1))', '0', {type:'number', approx:0.1});
//General calculations
test_math_used('calc(log( 1 + 1 + 2 /2 - 2) )', '0', {type:'number', approx:0.1});
test_math_used('calc(log(1) + exp(0))', '2'), {type:'number', approx:0.1};
test_math_used('calc(log(1) + exp(0))', '1'), {type:'number', approx:0.1};
test_math_used('calc(exp(log(1) + exp(0)*2))', '7.4'), {type:'number', approx:0.1};
test_math_used('calc(log(log(1) + exp(0)*10))', '2.3'), {type:'number', approx:0.1};
test_math_used('calc(log(log(1) + exp(0)*20, 10))', '1.3'), {type:'number', approx:0.1};
@ -32,4 +32,4 @@ test_math_used('calc(exp(0) + 1)', '2', {type:'number', approx:0.1});
// Test nesting
test_math_used('calc(log(exp(1)))', '1', {type:'number', approx:0.1});
test_math_used('calc(log(exp(log(e))))', '1', {type:'number', approx:0.1});
</script>
</script>

2
tests/wpt/web-platform-tests/css/css-values/ic-unit-012.html
View file

@ -6,7 +6,7 @@
<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/#font-relative-lengths">
<link rel="match" href="reference/ic-unit-009-ref.html">
<link rel="match" href="reference/ic-unit-012-ref.html">
<meta name="assert" content="In this test, the ic unit is the advance width measure of the 水 (CJK water ideograph, U+6C34) glyph.">

42
tests/wpt/web-platform-tests/css/css-values/lh-unit-003.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Values and Units Test: lh depending on @font-face</title>
<link rel="help" href="https://drafts.csswg.org/css-values-4/#font-relative-lengths">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#lh {
font-family: customfont;
font-size: 20px;
width: 10lh;
}
</style>
<div id="lh">
X<br>
X<br>
X<br>
X<br>
X<br>
X<br>
X<br>
X<br>
X<br>
X
</div>
<script>
test(() => {
assert_equals(lh.offsetWidth, lh.offsetHeight);
}, "Line-height and lh before @font-face loads");
let original_size = lh.offsetHeight;
promise_test(async (t) => {
let custom_font = new FontFace("customfont", "url(/css/css-fonts/support/fonts/Rochester.otf)");
document.fonts.add(custom_font);
await document.fonts.load("20px customfont");
assert_not_equals(lh.offsetHeight, original_size,
"Test is useless if normal line-height is the same for both the web font and the fallback font");
assert_equals(lh.offsetWidth, lh.offsetHeight,
"lh and normal line-height both affected");
}, "Line-height and lh after @font-face loaded");
</script>

18
tests/wpt/web-platform-tests/css/css-values/lh-unit-004.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Values and Units Test: lh not affected by &lt;select&gt; fixup</title>
<link rel="help" href="https://drafts.csswg.org/css-values-4/#font-relative-lengths">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
select {
line-height: 100px;
width: 5lh;
}
</style>
<select id="lh"></select>
<script>
test(() => {
assert_equals(getComputedStyle(lh).width, "500px");
}, "lh must be relative to computed line-height before select element fixup");
</script>

2
tests/wpt/web-platform-tests/css/css-values/minmax-length-computed.html
View file

@ -110,5 +110,5 @@ test_length_equals('calc(max(1em, 19px) - 10px)', '10px');
test_length_equals('calc(max(1em, 19px) * 2', '40px');
test_length_equals('calc(max(1em, 19px) / 2', '10px');
test_length_equals('calc(min(1em, 21px) + max(0.9em, 20px))', '40px');
test_length_equals('calc(min(1em, 21px) - max(0.9em, 20px))', '0px');
test_length_equals('calc(min(1em + 1px, 22px) - max(0.9em, 20px))', '1px');
</script>

27
tests/wpt/web-platform-tests/css/css-values/minmax-length-percent-serialize.html
View file

@ -32,20 +32,27 @@ test_serialization(
// If not, keep as the function.
test_serialization(
'min(1% + 1px)',
'min(1% + 1px)',
'min(1% + 1px)',
'calc(1% + 1px)',
'calc(1% + 1px)',
'2px');
test_serialization(
'min(1px + 1%)',
'min(1% + 1px)',
'min(1% + 1px)',
'calc(1% + 1px)',
'calc(1% + 1px)',
'2px');
test_serialization(
'max(1px + 1%)',
'max(1% + 1px)',
'max(1% + 1px)',
'calc(1% + 1px)',
'calc(1% + 1px)',
'2px');
// Arguments are simplified eagerly as per spec:
test_serialization(
'min(1px, 2px)',
'calc(1px)',
'1px',
'1px');
// Arguments are simplified, but not reordered.
test_serialization(
'min(20px, 10%)',
@ -104,8 +111,8 @@ test_serialization(
// and retain their relative order
test_serialization(
'calc(min(10% + 1px) + max(1em + 10%) + min(10% + 20px))',
'calc(min(10% + 1px) + max(10% + 1em) + min(10% + 20px))',
'calc(min(10% + 1px) + max(10% + 16px) + min(10% + 20px))',
'calc(30% + 1em + 21px)',
'calc(30% + 37px)',
'67px');
// min()/max() can be combined with plain units as well.
@ -113,7 +120,7 @@ test_serialization(
// ordinary units will re-sort around them.
test_serialization(
'calc(1em + max(10% + 20px) + 5% + min(1em + 10%) + 10px)',
'calc(5% + 1em + 10px + max(10% + 20px) + min(10% + 1em))',
'calc(5% + 26px + max(10% + 20px) + min(10% + 16px))',
'calc(25% + 2em + 30px)',
'calc(25% + 62px)',
'87px');
</script>

2
tests/wpt/web-platform-tests/css/css-values/minmax-percentage-computed.html
View file

@ -29,5 +29,5 @@ test_math_used('calc(max(10%, 20%) - 5%)', '15%');
test_math_used('calc(max(10%, 20%) * 2)', '40%');
test_math_used('calc(max(10%, 20%) / 2)', '10%');
test_math_used('calc(min(10%, 20%) + max(10%, 5%))', '20%');
test_math_used('calc(min(10%, 20%) - max(10%, 5%))', '0%');
test_math_used('calc(min(11%, 20%) - max(10%, 5%))', '1%');
</script>

6
tests/wpt/web-platform-tests/css/css-values/minmax-time-computed.html
View file

@ -34,15 +34,15 @@ test_time_equals('max(1000ms, min(2000ms, 1.5s))', '1.5s');
// General calculations
test_time_equals('calc(min(0.5s, 600ms) + 500ms)', '1s');
test_time_equals('calc(min(0.5s, 600ms) - 500ms)', '0s');
test_time_equals('calc(min(0.6s, 700ms) - 500ms)', '0.1s');
test_time_equals('calc(min(0.5s, 600ms) * 2)', '1s');
test_time_equals('calc(min(0.5s, 600ms) / 2)', '0.25s');
test_time_equals('calc(max(0.5s, 400ms) + 500ms)', '1s');
test_time_equals('calc(max(0.5s, 400ms) - 500ms)', '0s');
test_time_equals('calc(max(0.5s, 400ms) - 400ms)', '0.1s');
test_time_equals('calc(max(0.5s, 400ms) * 2)', '1s');
test_time_equals('calc(max(0.5s, 400ms) / 2)', '0.25s');
test_time_equals('calc(min(0.5s, 600ms) + max(500ms, 0.4s))', '1s');
test_time_equals('calc(min(0.5s, 600ms) - max(500ms, 0.4s))', '0s');
test_time_equals('calc(min(0.6s, 700ms) - max(500ms, 0.4s))', '0.1s');
test_time_equals('min(1s + 100ms, 500ms * 3)', '1.1s');
test_time_equals('calc(min(1s, 2s) + max(3s, 4s) + 10s)', '15s');
</script>

15
tests/wpt/web-platform-tests/css/css-values/negative-calc-to-non-negative-integer-ref.html Normal file
View file

@ -0,0 +1,15 @@
<!doctype html>
<title>CSS Test reference</title>
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
<style>
@counter-style foo {
system: additive;
additive-symbols: 1 'I', 0 'X';
range: infinite infinite;
}
</style>
<ol style="list-style-type: foo" start=-1>
<li></li>
<li></li>
<li></li>
</ol>

18
tests/wpt/web-platform-tests/css/css-values/negative-calc-to-non-negative-integer.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
<link rel="help" href="hhttps://drafts.csswg.org/css-values-4/#calc-range">
<link rel="help" href="https://drafts.csswg.org/css-counter-styles/#the-counter-style-rule">
<link rel="match" href="negative-calc-to-non-negative-integer-ref.html">
<meta name="assert" content="Negative calc() passed to <non-negative-integer> property value as argument should be addressed properly.">
<style>
@counter-style foo {
system: additive;
additive-symbols: 1 'I', calc(-1) 'X';
range: infinite infinite;
}
</style>
<ol style="list-style-type: foo" start=-1>
<li></li>
<li></li>
<li></li>
</ol>

51
tests/wpt/web-platform-tests/css/css-values/reference/ic-unit-012-ref.html Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Values and Units Test Reference File</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
@font-face
{
font-family: IcTestFullWidth;
src: url(/css/css-values/resources/IcTestFullWidth.woff2);
}
div
{
float: left;
font-family: IcTestFullWidth;
font-size: 80px; /* arbitrary font size */
line-height: 1.8; /* arbitrary line-height */
text-orientation: sideways;
writing-mode: vertical-rl;
}
div#blue
{
background-color: blue;
color: blue;
}
div#orange
{
background-color: orange;
color: orange;
}
</style>
<p>Test passes if there is a blue rectangle with the <strong>same height</strong> as an orange rectangle.
<div id="blue">&#27700;&#27700;&#27700;&#27700;&#27700;</div>
<div id="orange">&#27700;&#27700;&#27700;&#27700;&#27700;</div>
<!--
水 (CJK water ideograph, U+6C34) glyph == &#27700;
水 (CJK water ideograph, U+6C34) glyph == &#x6C34;
-->

4
tests/wpt/web-platform-tests/css/css-values/round-function.html
View file

@ -87,8 +87,8 @@ test_minus_zero("round(to-zero, -5, -infinity)");
// 'up': pos goes to +inf, 0+ goes to 0+, else 0-
test_plus_infinity("round(up, 1, infinity)");
test_plus_zero("round(up, 0, infinity)");
test_minus_zero("round(up, -1 * 0, infinity");
test_minus_zero("round(up, -1, infinity");
test_minus_zero("round(up, -1 * 0, infinity)");
test_minus_zero("round(up, -1, infinity)");
// 'down': neg goes to -inf, -0 goes to -0, else 0+
test_minus_infinity("round(down, -1, infinity)");
test_minus_zero("round(down, -1 * 0, infinity)");

26
tests/wpt/web-platform-tests/css/css-values/round-mod-rem-computed.html
View file

@ -6,7 +6,9 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/numeric-testcommon.js"></script>
<div id="target"></div>
<div style="width: 75px;">
<div id="target"></div>
</div>
<script>
// Simple tests
test_math_used('round(10,10)', '10', {type:'number'});
@ -18,7 +20,7 @@ test_math_used('calc(round(100,10))', '100', {type:'number'});
test_math_used('calc(round(up, 101,10))', '110', {type:'number'});
test_math_used('calc(round(down, 106,10))', '100', {type:'number'});
test_math_used('calc(round(to-zero,105, 10))', '100', {type:'number'});
test_math_used('calc(round(to-zero,-105, 10))', '100', {type:'number'});
test_math_used('calc(round(to-zero,-105, 10))', '-100', {type:'number'});
test_math_used('calc(round(-100,10))', '-100', {type:'number'});
test_math_used('calc(round(up, -103,10))', '-100', {type:'number'});
@ -60,8 +62,8 @@ test_math_used('round(10vh,6vh)', '12vh');
test_math_used('round(10vw,6vw)', '12vw');
test_math_used('round(10vmin,6vmin)', '12vmin');
test_math_used('round(10vmax,6vmax)', '12vmax');
test_math_used('round(10s,6s)', '12s');
test_math_used('round(10ms,6ms)', '12ms');
test_math_used('round(10s,6s)', '12s', {type:'time'});
test_math_used('round(10ms,6ms)', '12ms', {type:'time'});
test_math_used('round(10deg,6deg)', '12deg', {type:'angle', approx:0.1});
test_math_used('round(10grad,6grad)', '12grad', {type:'angle', approx:0.1});
test_math_used('round(10rad,6rad)', '12rad',{type:'angle', approx:0.1});
@ -81,8 +83,8 @@ test_math_used('mod(10vh,6vh)', '4vh');
test_math_used('mod(10vw,6vw)', '4vw');
test_math_used('mod(10vmin,6vmin)', '4vmin');
test_math_used('mod(10vmax,6vmax)', '4vmax');
test_math_used('mod(10s,6s)', '4s');
test_math_used('mod(10ms,6ms)', '4ms');
test_math_used('mod(10s,6s)', '4s', {type:'time'});
test_math_used('mod(10ms,6ms)', '4ms', {type:'time'});
test_math_used('mod(10deg,6deg)', '4deg', {type:'angle', approx:0.1});
test_math_used('mod(10grad,6grad)', '4grad', {type:'angle', approx:0.1});
test_math_used('mod(10rad,6rad)', '4rad',{type:'angle', approx:0.1});
@ -102,10 +104,18 @@ test_math_used('rem(10vh,6vh)', '4vh');
test_math_used('rem(10vw,6vw)', '4vw');
test_math_used('rem(10vmin,6vmin)', '4vmin');
test_math_used('rem(10vmax,6vmax)', '4vmax');
test_math_used('rem(10s,6s)', '4s');
test_math_used('rem(10ms,6ms)', '4ms');
test_math_used('rem(10s,6s)', '4s', {type:'time'});
test_math_used('rem(10ms,6ms)', '4ms', {type:'time'});
test_math_used('rem(10deg,6deg)', '4deg', {type:'angle', approx:0.1});
test_math_used('rem(10grad,6grad)', '4grad', {type:'angle', approx:0.1});
test_math_used('rem(10rad,6rad)', '4rad',{type:'angle', approx:0.1});
test_math_used('rem(10turn,6turn)', '4turn',{type:'angle', approx:0.1});
//Test percentage and mixed units
test_math_used('round(10%,1px)', '8px');
test_math_used('round(10%,5px)', '10px');
test_math_used('round(2rem,5px)', '30px');
test_math_used('round(100px,1rem)', '96px');
test_math_used('round(10s,6000ms)', '12s', {type:'time'});
test_math_used('round(10000ms,6s)', '12s', {type:'time'});
</script>

3
tests/wpt/web-platform-tests/css/css-values/sin-cos-tan-computed.html
View file

@ -3,6 +3,7 @@
<link rel="help" href="https://drafts.csswg.org/css-values-4/#numbers">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-type-checking">
<link rel="author" title="Apple Inc">
<link rel="author" title="Seokho Song" href="seokho@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/numeric-testcommon.js"></script>
@ -22,7 +23,7 @@ test_math_used('calc(cos(e - 2.7182818284590452354) )', '1', {type:'number', app
//Test units
test_math_used('calc(sin(30deg + 1.0471967rad ) )', '1', {type:'number', approx:0.1});
test_math_used('calc(cos(30deg - 0.523599rad ) )', '1'), {type:'number', approx:0.1};
test_math_used('calc(cos(30deg - 0.523599rad ) )', '1', {type:'number', approx:0.1});
test_math_used('calc(sin(3.14159 / 2 + 1 - 1) )', '1', {type:'number', approx:0.1});
test_math_used('calc(sin(100grad) )', '1', {type:'number', approx:0.1});
test_math_used('calc(cos(0 / 2 + 1 - 1) )', '1', {type:'number', approx:0.1});

1
tests/wpt/web-platform-tests/css/css-values/sin-cos-tan-invalid.html
View file

@ -3,6 +3,7 @@
<link rel="help" href="https://drafts.csswg.org/css-values-4/#angles">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-type-checking">
<link rel="author" title="Apple Inc">
<link rel="author" title="Seokho Song" href="seokho@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/parsing-testcommon.js"></script>

93
tests/wpt/web-platform-tests/css/css-values/sin-cos-tan-serialize.html
View file

@ -3,59 +3,56 @@
<link rel="help" href="https://drafts.csswg.org/css-values-4/#numbers">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-serialize">
<link rel="author" title="Apple Inc">
<link rel="author" title="Seokho Song" href="seokho@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/serialize-testcommon.js"></script>
<div id=target></div>
<script>
function test_serialization(t,s,c) {
test_specified_serialization('opacity', t, s);
test_specified_serialization('transform', `scale(${t})`, `scale(calc(${c}))`);
test_computed_serialization('opacity', t, c);
test_computed_serialization('transform', `scale(${t})`, `matrix(${c}, 0, 0, ${c}, 0, 0)`);
function test_serialization(specified, expected, {prop="transform"}={}) {
test_specified_serialization(prop, `scale(${specified})`, `scale(${expected})`)
}
//TEST CASE | EXPECTED
var test_map = {
"cos(0)" :"calc(1)",
"sin(0)" :"calc(0)",
"tan(0)" :"calc(0)",
"calc(sin(0) + 0.5)" :"calc(0.5)",
"calc(sin(0) + cos(0) + tan(0))" :"calc(1)",
"calc(cos(0) + 0.5)" :"calc(1.5)",
"calc(tan(0) + 0.5)" :"calc(0.5)",
"cos(0deg)" :"calc(1)",
"sin(0deg)" :"calc(0)",
"tan(0deg)" :"calc(0)",
"sin(30deg)" :"calc(0.5)",
"sin(0.523599)" :"calc(0.5)",
"sin(0.523599rad)" :"calc(0.5)",
"sin(33.333333grad)" :"calc(0.5)",
"sin(0.08333333turn)" :"calc(0.5)",
"cos(60deg)" :"calc(0.5)",
"cos(66.66666666grad)" :"calc(0.5)",
"cos(1.047197551)" :"calc(0.5)",
"cos(1.047197551rad)" :"calc(0.5)",
"cos(0.16666666666turn)" :"calc(0.5)",
"tan(45deg)" :"calc(1)",
"tan(50grad)" :"calc(1)",
"tan(0.78539816)" :"calc(1)",
"tan(0.78539816rad)" :"calc(1)",
"tan(0.125turn)" :"calc(1)",
"tan(90deg)" :"calc(infinity)",
"tan(-90deg)" :"calc(-infinity)",
"calc(sin(30deg) + cos(60deg) + tan(45deg))" :"calc(2)",
"calc(sin(infinity))" :"calc(NaN)",
"calc(cos(infinity))" :"calc(NaN)",
"calc(tan(infinity))" :"calc(NaN)",
"calc(sin(-infinity))" :"calc(NaN)",
"calc(cos(-infinity))" :"calc(NaN)",
"calc(tan(-infinity))" :"calc(NaN)",
};
for (var exp in test_map) {
test_serialization(exp, test_map[exp]);
test_serialization(`calc(${exp})`, test_map[exp]);
}
test_serialization(
'cos(0)',
'calc(1)',
'1');
test_serialization(
'sin(0)',
'calc(0)',
'0');
test_serialization(
'tan(0)',
'calc(0)',
'0');
test_serialization(
'calc(sin(0) + cos(0) + tan(0))',
'calc(1)',
'1');
test_serialization(
'calc(sin(0) + 0.5)',
'calc(0.5)',
'0.5');
test_serialization(
'calc(cos(0) + 0.5)',
'calc(1.5)',
'1.5');
test_serialization(
'calc(tan(0) + 0.5)',
'calc(0.5)',
'0.5');
test_serialization(
'calc(sin(infinity))',
'calc(NaN)',
'NaN');
test_serialization(
'calc(cos(infinity))',
'calc(NaN)',
'NaN');
test_serialization(
'calc(tan(infinity))',
'calc(NaN)',
'NaN');
</script>

23
tests/wpt/web-platform-tests/css/css-values/support/mixed-units-01.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-size: 16px;
}
.box {
background: rgb(0, 0, 255);
width: 100%;
height: 10px;
}
@media (width: calc(116px - 1em)) {
.box {
background: rgb(255, 165, 0);
}
}
</style>
</head>
<div class="box"></div>
</html>

23
tests/wpt/web-platform-tests/css/css-values/support/mixed-units-02.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-size: 16px;
}
.box {
background: rgb(0, 0, 255);
width: 100%;
height: 10px;
}
@media (width: calc(200vh + 5em)) {
.box {
background: rgb(255, 165, 0);
}
}
</style>
</head>
<div class="box"></div>
</html>

23
tests/wpt/web-platform-tests/css/css-values/support/mixed-units-03.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-size: 16px;
}
.box {
background: rgb(0, 0, 255);
width: 100%;
height: 10px;
}
@media (height: calc(100vw - 5.625em)) {
.box {
background: rgb(255, 165, 0);
}
}
</style>
</head>
<div class="box"></div>
</html>

23
tests/wpt/web-platform-tests/css/css-values/support/mixed-units-04.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-size: 16px;
}
.box {
background: rgb(0, 0, 255);
width: 100%;
height: 10px;
}
@media (width: calc(10vw + 900vh)) {
.box {
background: rgb(255, 165, 0);
}
}
</style>
</head>
<div class="box"></div>
</html>

23
tests/wpt/web-platform-tests/css/css-values/support/mixed-units-05.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-size: 16px;
}
.box {
background: rgb(0, 0, 255);
width: 100%;
height: 10px;
}
@media (width: calc(900vh + 10px)) {
.box {
background: rgb(255, 165, 0);
}
}
</style>
</head>
<div class="box"></div>
</html>

23
tests/wpt/web-platform-tests/css/css-values/support/mixed-units-06.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-size: 16px;
}
.box {
background: rgb(0, 0, 255);
width: 100%;
height: 10px;
}
@media (width: calc(90vw + 10px)) {
.box {
background: rgb(255, 165, 0);
}
}
</style>
</head>
<div class="box"></div>
</html>

76
tests/wpt/web-platform-tests/css/css-values/viewport-units-compute.html Normal file
View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<title>Resolving viewport units</title>
<link rel="help" href="https://drafts.csswg.org/css-values-4/#viewport-relative-lengths">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
iframe {
width: 200px;
height: 100px;
}
</style>
<iframe id=iframe></iframe>
<script>
const doc = iframe.contentDocument;
const win = iframe.contentWindow;
function test_computed_value(value, expected) {
test((t) => {
t.add_cleanup(() => { doc.body.innerHTML = ''; });
doc.body.innerHTML = `
<!doctype html>
<style>
* { margin: 0; }
body { height: 100%; }
div { height: ${value}; }
</style>
<div></div>
`;
let div = doc.querySelector('div');
assert_equals(win.getComputedStyle(div).height, expected);
}, `${value} computes to ${expected}`);
}
test_computed_value('100vw', '200px');
test_computed_value('100vi', '200px');
test_computed_value('100vmax', '200px');
test_computed_value('100svw', '200px');
test_computed_value('100svi', '200px');
test_computed_value('100svmax', '200px');
test_computed_value('100lvw', '200px');
test_computed_value('100lvi', '200px');
test_computed_value('100lvmax', '200px');
test_computed_value('100dvw', '200px');
test_computed_value('100dvi', '200px');
test_computed_value('100dvmax', '200px');
test_computed_value('100vh', '100px');
test_computed_value('100vb', '100px');
test_computed_value('100vmin', '100px');
test_computed_value('100svh', '100px');
test_computed_value('100svb', '100px');
test_computed_value('100svmin', '100px');
test_computed_value('100lvh', '100px');
test_computed_value('100lvb', '100px');
test_computed_value('100lvmin', '100px');
test_computed_value('100dvh', '100px');
test_computed_value('100dvb', '100px');
test_computed_value('100dvmin', '100px');
test_computed_value('1dvw', '2px');
test_computed_value('10dvw', '20px');
test_computed_value('1dvh', '1px');
test_computed_value('10dvh', '10px');
test_computed_value('calc(1dvw + 1dvw)', '4px');
test_computed_value('calc(1dvw + 1dvh)', '3px');
test_computed_value('calc(1dvw + 100px)', '102px');
test_computed_value('max(1svw, 1svh)', '2px');
test_computed_value('min(1lvw, 1lvh)', '1px');
test_computed_value('calc(1dvw + 10%)', '12px');
</script>

69
tests/wpt/web-platform-tests/css/css-values/viewport-units-invalidation.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<title>Invalidation of viewport units</title>
<link rel="help" href="https://drafts.csswg.org/css-values-4/#viewport-relative-lengths">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
iframe {
width: 200px;
height: 100px;
}
iframe.resize {
width: 400px;
height: 300px;
}
</style>
<main id=main></main>
<script>
function test_invalidation_value(value, expected_pre, expected_post) {
test((t) => {
let iframe = document.createElement('iframe');
main.append(iframe);
const doc = iframe.contentDocument;
const win = iframe.contentWindow;
t.add_cleanup(() => {
doc.body.innerHTML = '';
iframe.remove();
});
doc.body.innerHTML = `<div style="height: ${value};"></div>`;
let div = doc.querySelector('div');
assert_equals(win.getComputedStyle(div).height, expected_pre);
t.add_cleanup(() => { iframe.classList.remove('resize'); })
iframe.classList.add('resize');
assert_equals(win.getComputedStyle(div).height, expected_post);
}, `${value} computes to ${expected_post} after frame resize`);
}
test_invalidation_value('100vw', '200px', '400px');
test_invalidation_value('100vi', '200px', '400px');
test_invalidation_value('100vmax', '200px', '400px');
test_invalidation_value('100svw', '200px', '400px');
test_invalidation_value('100svi', '200px', '400px');
test_invalidation_value('100svmax', '200px', '400px');
test_invalidation_value('100lvw', '200px', '400px');
test_invalidation_value('100lvi', '200px', '400px');
test_invalidation_value('100lvmax', '200px', '400px');
test_invalidation_value('100dvw', '200px', '400px');
test_invalidation_value('100dvi', '200px', '400px');
test_invalidation_value('100dvmax', '200px', '400px');
test_invalidation_value('100vh', '100px', '300px');
test_invalidation_value('100vb', '100px', '300px');
test_invalidation_value('100vmin', '100px', '300px');
test_invalidation_value('100svh', '100px', '300px');
test_invalidation_value('100svb', '100px', '300px');
test_invalidation_value('100svmin', '100px', '300px');
test_invalidation_value('100lvh', '100px', '300px');
test_invalidation_value('100lvb', '100px', '300px');
test_invalidation_value('100lvmin', '100px', '300px');
test_invalidation_value('100dvh', '100px', '300px');
test_invalidation_value('100dvb', '100px', '300px');
test_invalidation_value('100dvmin', '100px', '300px');
</script>

69
tests/wpt/web-platform-tests/css/css-values/viewport-units-keyframes.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<title>Viewport units in @keyframes</title>
<link rel="help" href="https://drafts.csswg.org/css-values-4/#viewport-relative-lengths">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
iframe {
width: 200px;
height: 100px;
}
</style>
<iframe id=iframe></iframe>
<script>
const doc = iframe.contentDocument;
const win = iframe.contentWindow;
function test_interpolated_value(from, to, expected) {
test((t) => {
t.add_cleanup(() => { doc.body.innerHTML = ''; });
doc.body.innerHTML = `
<style>
@keyframes anim {
from { height: ${from}; }
to { height: ${to}}
}
div { animation: anim linear 10s -5s paused; }
</style>
<div></div>
`;
let div = doc.querySelector('div');
assert_equals(win.getComputedStyle(div).height, expected);
}, `Interpolation from ${from} to ${to} is ${expected} at 50%`);
}
// Flush the iframe styles before starting tests to avoid the animation in the
// iframe starts before the iframe's document gets sized as expected.
iframe.getBoundingClientRect();
test_interpolated_value('0px', '100vw', '100px');
test_interpolated_value('0px', '100vi', '100px');
test_interpolated_value('0px', '100vmax', '100px');
test_interpolated_value('0px', '100svw', '100px');
test_interpolated_value('0px', '100svi', '100px');
test_interpolated_value('0px', '100svmax', '100px');
test_interpolated_value('0px', '100lvw', '100px');
test_interpolated_value('0px', '100lvi', '100px');
test_interpolated_value('0px', '100lvmax', '100px');
test_interpolated_value('0px', '100dvw', '100px');
test_interpolated_value('0px', '100dvi', '100px');
test_interpolated_value('0px', '100dvmax', '100px');
test_interpolated_value('0px', '100vh', '50px');
test_interpolated_value('0px', '100vb', '50px');
test_interpolated_value('0px', '100vmin', '50px');
test_interpolated_value('0px', '100svh', '50px');
test_interpolated_value('0px', '100svb', '50px');
test_interpolated_value('0px', '100svmin', '50px');
test_interpolated_value('0px', '100lvh', '50px');
test_interpolated_value('0px', '100lvb', '50px');
test_interpolated_value('0px', '100lvmin', '50px');
test_interpolated_value('0px', '100dvh', '50px');
test_interpolated_value('0px', '100dvb', '50px');
test_interpolated_value('0px', '100dvmin', '50px');
</script>

77
tests/wpt/web-platform-tests/css/css-values/viewport-units-media-queries.html Normal file
View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<title>Viewport units in @media</title>
<link rel="help" href="https://drafts.csswg.org/css-values-4/#viewport-relative-lengths">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
iframe {
width: 200px;
height: 100px;
}
</style>
<iframe id=iframe></iframe>
<script>
const doc = iframe.contentDocument;
const win = iframe.contentWindow;
function test_media_query(feature, result, description) {
test((t) => {
t.add_cleanup(() => { doc.body.innerHTML = ''; })
doc.body.innerHTML = `
<style>
body {
color: red;
}
@media (${feature}) {
body {
color: green;
}
}
</style>
`;
assert_equals(win.getComputedStyle(doc.body).color, result);
}, description);
}
function test_media_query_applies(feature) {
test_media_query(feature, 'rgb(0, 128, 0)', `@media(${feature}) applies`);
}
function test_media_query_does_not_apply(feature) {
test_media_query(feature, 'rgb(255, 0, 0)', `@media(${feature}) does not apply`);
}
test_media_query_applies('width:100vw');
test_media_query_applies('width:100vi');
test_media_query_applies('width:100vmax');
test_media_query_applies('width:100svw');
test_media_query_applies('width:100svi');
test_media_query_applies('width:100svmax');
test_media_query_applies('width:100lvw');
test_media_query_applies('width:100lvi');
test_media_query_applies('width:100lvmax');
test_media_query_applies('width:100dvw');
test_media_query_applies('width:100dvi');
test_media_query_applies('width:100dvmax');
test_media_query_applies('height:100vh');
test_media_query_applies('height:100vb');
test_media_query_applies('height:100vmin');
test_media_query_applies('height:100svh');
test_media_query_applies('height:100svb');
test_media_query_applies('height:100svmin');
test_media_query_applies('height:100lvh');
test_media_query_applies('height:100lvb');
test_media_query_applies('height:100lvmin');
test_media_query_applies('height:100dvh');
test_media_query_applies('height:100dvb');
test_media_query_applies('height:100dvmin');
test_media_query_does_not_apply('width:90vw');
test_media_query_does_not_apply('height:90vh');
</script>

19
tests/wpt/web-platform-tests/css/css-values/viewport-units-modify.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<title>Crash when going from non-viewport to viewport units</title>
<link rel="help" href="https://crbug.com/1322613">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="elem" style="padding-left: 1vh">Test passes if there is no crash.</div>
<script>
test((t) => {
assert_not_equals(getComputedStyle(elem).paddingLeft, '0px');
elem.style.paddingLeft = '0';
assert_equals(getComputedStyle(elem).paddingLeft, '0px');
elem.style.paddingLeft = '1vh';
assert_not_equals(getComputedStyle(elem).paddingLeft, '0px');
});
</script>

27
tests/wpt/web-platform-tests/css/css-values/viewport-units-writing-mode-font-size-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!doctype html>
<title>CSS test reference</title>
<meta charset="utf-8">
<style>
.test {
width: 1em;
height: 1em;
background-color: green;
display: inline-block;
}
#t1 {
font-size: 1vh;
}
#t2 {
font-size: 1vw;
}
#t3 {
font-size: 1vh;
}
#t4 {
font-size: 1vw;
}
</style>
<div class="test" id="t1"></div>
<div class="test" id="t2"></div>
<div class="test" id="t3"></div>
<div class="test" id="t4"></div>

35
tests/wpt/web-platform-tests/css/css-values/viewport-units-writing-mode-font-size.html Normal file
View file

@ -0,0 +1,35 @@
<!doctype html>
<title>font-size depends on writing-mode</title>
<meta charset="utf-8">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="match" href="viewport-units-writing-mode-font-size-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#viewport-relative-lengths">
<style>
.test {
width: 1em;
height: 1em;
background-color: green;
display: inline-block;
}
#t1 {
writing-mode: vertical-lr;
font-size: 1vi;
}
#t2 {
writing-mode: vertical-lr;
font-size: 1vb;
}
#t3 {
font-size: 1vi;
writing-mode: vertical-lr;
}
#t4 {
font-size: 1vb;
writing-mode: vertical-lr;
}
</style>
<div class="test" id="t1"></div>
<div class="test" id="t2"></div>
<div class="test" id="t3"></div>
<div class="test" id="t4"></div>

60
tests/wpt/web-platform-tests/css/css-values/viewport-units-writing-mode.html Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<title>Viewport units are responsive to writing-mode changes</title>
<link rel="help" href="https://drafts.csswg.org/css-values-4/#viewport-relative-lengths">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
iframe {
width: 200px;
height: 100px;
}
</style>
<iframe id=iframe></iframe>
<script>
const doc = iframe.contentDocument;
const win = iframe.contentWindow;
function test_writing_mode(value, expected_pre, expected_post) {
test((t) => {
t.add_cleanup(() => { doc.body.innerHTML = ''; });
doc.body.innerHTML = `
<style>
div {
writing-mode: initial;
height: ${value};
}
.vertical {
writing-mode: vertical-rl;
}
</style>
<div></div>
`;
let div = doc.querySelector('div');
assert_equals(win.getComputedStyle(div).height, expected_pre);
// The writing-mode of the document element does not matter.
t.add_cleanup(() => { doc.documentElement.classList.remove('vertical'); })
doc.documentElement.classList.add('vertical');
assert_equals(win.getComputedStyle(div).height, expected_pre);
// The writing-mode of the target element is what matters.
div.classList.add('vertical');
assert_equals(win.getComputedStyle(div).height, expected_post);
}, `${value} computes to ${expected_post} with vertical writing-mode`);
}
test_writing_mode('100vi', '200px', '100px');
test_writing_mode('100svi', '200px', '100px');
test_writing_mode('100lvi', '200px', '100px');
test_writing_mode('100dvi', '200px', '100px');
test_writing_mode('100vb', '100px', '200px');
test_writing_mode('100svb', '100px', '200px');
test_writing_mode('100lvb', '100px', '200px');
test_writing_mode('100dvb', '100px', '200px');
</script>