mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
WPT Sync Bot
cybai
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
|
|
@ -1,43 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Attributes references (pixels)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
When the value of the referenced attribute is not a pixel value, the fallback value is used instead.
|
||||
" />
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Attributes references (pixels)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
When the value of the referenced attribute is not a pixel value, the fallback value is used instead.
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
|
||||
#outer { width: attr(data-test px, 200); height: 200px; }
|
||||
#outer { width: attr(data-test px, 200px); height: 200px; }
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer" data-test="300px"></div>
|
||||
<div id="outer" data-test="300px"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Attribute references (pixels)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
When the fallback of a pixel attribute reference is invalid, the declaration is ignored.
|
||||
" />
|
||||
<meta name="flags" content="invalid">
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Attribute references (pixels)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
When the fallback of a pixel attribute reference is invalid, the declaration is ignored.
|
||||
" />
|
||||
<meta name="flags" content="invalid">
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
|
||||
#outer { width: 200px; width: attr(data-test px, 300px); height: 200px; }
|
||||
#outer { width: 200px; width: attr(data-test px, 300); height: 200px; }
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer" data-test="300"></div>
|
||||
<div id="outer" data-test="300"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
|
|
@ -34,134 +35,6 @@
|
|||
function startTesting()
|
||||
{
|
||||
|
||||
var targetElement = document.getElementById("target");
|
||||
|
||||
function compareValueCloseTo(property_name, calcValue, epsilon, expectedValue, description)
|
||||
{
|
||||
|
||||
test(function()
|
||||
{
|
||||
|
||||
targetElement.style.setProperty(property_name, "initial");
|
||||
|
||||
/*
|
||||
Since we are running many consecutive tests on the same
|
||||
element, then it is necessary to reset its property
|
||||
to an initial value before actually re-testing it.
|
||||
*/
|
||||
|
||||
targetElement.style.setProperty(property_name, calcValue);
|
||||
|
||||
var computedCalcValue = getComputedStyle(targetElement)[property_name];
|
||||
|
||||
/*
|
||||
We first strip out the word "matrix" with the
|
||||
opening parenthesis "(" and the closing
|
||||
parenthesis ")"
|
||||
*/
|
||||
|
||||
computedCalcValue = computedCalcValue.replace("matrix(", "").replace(")", "");
|
||||
|
||||
/*
|
||||
Then, we split the string at each comma ","
|
||||
and store the resulting 6 sub-strings into
|
||||
tableSplitComputedCalcValue
|
||||
*/
|
||||
|
||||
var tableSplitCalcValue = computedCalcValue.split(",");
|
||||
|
||||
/*
|
||||
We convert the 6 sub-strings into numerical floating values
|
||||
so that mathematical operations (substraction, absolute value,
|
||||
comparison) can be performed.
|
||||
*/
|
||||
|
||||
tableSplitCalcValue[0] = parseFloat(tableSplitCalcValue[0]);
|
||||
tableSplitCalcValue[1] = parseFloat(tableSplitCalcValue[1]);
|
||||
tableSplitCalcValue[2] = parseFloat(tableSplitCalcValue[2]);
|
||||
tableSplitCalcValue[3] = parseFloat(tableSplitCalcValue[3]);
|
||||
tableSplitCalcValue[4] = parseFloat(tableSplitCalcValue[4]);
|
||||
tableSplitCalcValue[5] = parseFloat(tableSplitCalcValue[5]);
|
||||
|
||||
/*
|
||||
Now, we execute the same steps with the expectedValue
|
||||
*/
|
||||
|
||||
targetElement.style.setProperty(property_name, expectedValue);
|
||||
|
||||
var computedExpectedValue = getComputedStyle(targetElement)[property_name];
|
||||
|
||||
/*
|
||||
We first strip out the word "matrix" with the
|
||||
opening parenthesis "(" and the closing
|
||||
parenthesis ")"
|
||||
*/
|
||||
|
||||
computedExpectedValue = computedExpectedValue.replace("matrix(", "").replace(")", "");
|
||||
|
||||
/*
|
||||
Then, we split the string at each comma ","
|
||||
and store the resulting 6 sub-strings into
|
||||
tableSplitComputedCalcValue
|
||||
*/
|
||||
|
||||
var tableSplitExpectedValue = computedExpectedValue.split(",");
|
||||
|
||||
/*
|
||||
We convert the 6 sub-strings into numerical floating values
|
||||
so that mathematical operations (substraction, absolute value,
|
||||
comparison) can be performed.
|
||||
*/
|
||||
|
||||
tableSplitExpectedValue[0] = parseFloat(tableSplitExpectedValue[0]);
|
||||
tableSplitExpectedValue[1] = parseFloat(tableSplitExpectedValue[1]);
|
||||
tableSplitExpectedValue[2] = parseFloat(tableSplitExpectedValue[2]);
|
||||
tableSplitExpectedValue[3] = parseFloat(tableSplitExpectedValue[3]);
|
||||
tableSplitExpectedValue[4] = parseFloat(tableSplitExpectedValue[4]);
|
||||
tableSplitExpectedValue[5] = parseFloat(tableSplitExpectedValue[5]);
|
||||
|
||||
assert_array_approx_equals(tableSplitCalcValue, tableSplitExpectedValue, epsilon);
|
||||
|
||||
/*
|
||||
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).
|
||||
*/
|
||||
|
||||
} , description);
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
deg
|
||||
Degrees. There are 360 degrees in a full circle.
|
||||
|
||||
grad
|
||||
Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.
|
||||
|
||||
rad
|
||||
Radians. There are 2π radians in a full circle.
|
||||
|
||||
1rad == 57.295779513°
|
||||
https://www.rapidtables.com/convert/number/radians-to-degrees.html
|
||||
|
||||
π == Math.PI == 3.141592653589793
|
||||
|
||||
turn
|
||||
Turns. There is 1 turn in a full circle.
|
||||
|
||||
*/
|
||||
|
||||
|
||||
/* Addition of angle units */
|
||||
|
||||
|
||||
/* compareValueCloseTo(property_name, calcValue, epsilon, expectedValue, description) */
|
||||
|
||||
compareValueCloseTo("transform", "rotate(calc(45deg + 45deg))", 0.0001, "rotate(90deg)", "addition of 2 angle units: deg plus deg");
|
||||
|
|
|
|||
|
|
@ -1,42 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units and Media Queries Test:
|
||||
Calc function inside media queries
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
The calc() expression is supported in the min-width media query properly (=with range clamping).
|
||||
" />
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units and Media Queries Test:
|
||||
Calc function inside media queries
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
The calc() expression is supported in the min-width media query properly (=with range clamping).
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#width">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-range">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#width">
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
|
||||
html { background: red; }
|
||||
@media (min-width: calc(-100px)) { /* should clamp to 0px */
|
||||
html { background: green; }
|
||||
}
|
||||
html { background: red; }
|
||||
@media (min-width: calc(-100px)) { /* should clamp to 0px */
|
||||
html { background: green; }
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target"></div>
|
||||
<div id="target"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,32 @@ test_computed_value_greater_or_lower_than("margin-left", "calc(max(10000px, 0px)
|
|||
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);
|
||||
|
||||
// ----------------
|
||||
// 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_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);
|
||||
|
||||
// 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)");
|
||||
|
||||
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)");
|
||||
|
||||
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)");
|
||||
|
||||
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)");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>Infinity and NaN: calc() serialization for length 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>
|
||||
function test_serialization(t,s, {prop="transform"}={}) {
|
||||
test_specified_serialization(prop, t, s)
|
||||
}
|
||||
//TEST CASE | EXPECTED
|
||||
var test_map = {
|
||||
"1deg * NaN" :"calc(NaN * 1deg)",
|
||||
"1rad * NaN" :"calc(NaN * 1rad)",
|
||||
"1turn * NaN" :"calc(NaN * 1turn)",
|
||||
"1grad * nan" :"calc(NaN * 1grad)",
|
||||
"1deg * infinity / infinity" :"calc(NaN * 1deg)",
|
||||
"1deg * 0 * infinity" :"calc(NaN * 1deg)",
|
||||
"1deg * (infinity + -infinity)" :"calc(NaN * 1deg)",
|
||||
"1deg * (-infinity + infinity)" :"calc(NaN * 1deg)",
|
||||
"1deg * (infinity - infinity)" :"calc(NaN * 1deg)",
|
||||
"1deg * infinity" :"calc(infinity * 1deg)",
|
||||
"1deg * -infinity" :"calc(-infinity * 1deg)",
|
||||
"1deg * iNFinIty" :"calc(infinity * 1deg)",
|
||||
"1deg * (infinity + infinity)" :"calc(infinity * 1deg)",
|
||||
"1deg * (-infinity + -infinity)" :"calc(-infinity * 1deg)",
|
||||
"1deg * 1/infinity" :"calc(0deg)",
|
||||
"1deg * infinity * infinity" :"calc(infinity * 1deg)",
|
||||
"1deg * -infinity * -infinity" :"calc(infinity * 1deg)",
|
||||
"1 * max(INFinity*3deg, 0deg)" :"calc(infinity * 1deg)",
|
||||
"1 * min(inFInity*4deg, 0deg)" :"calc(0deg)",
|
||||
"1 * max(nAn*2deg, 0deg)" :"calc(NaN * 1deg)",
|
||||
"1 * min(nan*3deg, 0deg)" :"calc(NaN * 1deg)",
|
||||
"1 * clamp(-INFINITY*20deg, 0deg, infiniTY*10deg)" :"calc(0deg)",
|
||||
|
||||
"1deg * max(NaN, min(0,10))" :"calc(NaN * 1deg)",
|
||||
"1deg * clamp(NaN, 0, 10)" :"calc(NaN * 1deg)",
|
||||
|
||||
"1deg * max(0, min(10, NaN))" :"calc(NaN * 1deg)",
|
||||
"1deg * clamp(0, 10, NaN)" :"calc(NaN * 1deg)",
|
||||
|
||||
"1deg * max(0, min(NaN, 10))" :"calc(NaN * 1deg)",
|
||||
"1deg * clamp(0, NaN, 10)" :"calc(NaN * 1deg)",
|
||||
|
||||
"1deg * clamp(-Infinity, 0, infinity)" :"calc(0deg)",
|
||||
"1deg * clamp(-inFinity, infinity, 10)" :"calc(10deg)",
|
||||
};
|
||||
|
||||
for (var exp in test_map) {
|
||||
test_serialization("rotate(calc("+exp+"))", "rotate("+test_map[exp]+")");
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>Infinity and NaN: calc() serialization.</title>
|
||||
<title>Infinity and NaN: calc() serialization for length 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>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!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>
|
||||
function test_serialization(t,s, {prop="animationDuration"}={}) {
|
||||
test_specified_serialization(prop, t, s)
|
||||
}
|
||||
//TEST CASE | EXPECTED
|
||||
var test_map = {
|
||||
"1s * NaN" :"calc(NaN * 1s)",
|
||||
"1s * nan" :"calc(NaN * 1s)",
|
||||
"1s * infinity / infinity" :"calc(NaN * 1s)",
|
||||
"1s * 0 * infinity" :"calc(NaN * 1s)",
|
||||
"1s * (infinity + -infinity)" :"calc(NaN * 1s)",
|
||||
"1s * (-infinity + infinity)" :"calc(NaN * 1s)",
|
||||
"1s * (infinity - infinity)" :"calc(NaN * 1s)",
|
||||
"1s * infinity" :"calc(infinity * 1s)",
|
||||
"1s * -infinity" :"calc(-infinity * 1s)",
|
||||
"1s * iNFinIty" :"calc(infinity * 1s)",
|
||||
"1s * (infinity + infinity)" :"calc(infinity * 1s)",
|
||||
"1s * (-infinity + -infinity)" :"calc(-infinity * 1s)",
|
||||
"1s * 1/infinity" :"calc(0s)",
|
||||
"1s * infinity * infinity" :"calc(infinity * 1s)",
|
||||
"1s * -infinity * -infinity" :"calc(infinity * 1s)",
|
||||
"1 * max(INFinity*3s, 0s)" :"calc(infinity * 1s)",
|
||||
"1 * min(inFInity*4s, 0s)" :"calc(0s)",
|
||||
"1 * max(nAn*2s, 0s)" :"calc(NaN * 1s)",
|
||||
"1 * min(nan*3s, 0s)" :"calc(NaN * 1s)",
|
||||
"1 * clamp(-INFINITY*20s, 0s, infiniTY*10s)" :"calc(0s)",
|
||||
|
||||
"1s * max(NaN, min(0,10))" :"calc(NaN * 1s)",
|
||||
"1s * clamp(NaN, 0, 10)" :"calc(NaN * 1s)",
|
||||
|
||||
"1s * max(0, min(10, NaN))" :"calc(NaN * 1s)",
|
||||
"1s * clamp(0, 10, NaN)" :"calc(NaN * 1s)",
|
||||
|
||||
"1s * max(0, min(NaN, 10))" :"calc(NaN * 1s)",
|
||||
"1s * clamp(0, NaN, 10)" :"calc(NaN * 1s)",
|
||||
|
||||
"1s * clamp(-Infinity, 0, infinity)" :"calc(0s)",
|
||||
"1s * clamp(-inFinity, infinity, 10)" :"calc(10s)",
|
||||
};
|
||||
|
||||
for (var exp in test_map) {
|
||||
test_serialization("calc("+exp+")", test_map[exp]);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,44 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Range clamping into calc() expressions
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
A calc expression can evaluate to a value which is outside the validity range.
|
||||
If it does, this value must be clamped into the range.
|
||||
The declaration must not be ignored.
|
||||
" />
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Range clamping into calc() expressions
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
A calc expression can evaluate to a value which is outside the validity range.
|
||||
If it does, this value must be clamped into the range.
|
||||
The declaration must not be ignored.
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/>
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/>
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-range"/>
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { background: green; width: 200px; height: 200px; }
|
||||
#outer { border-radius: 10px; border-radius: calc(-10px); }
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { background: green; width: 200px; height: 200px; }
|
||||
#outer { border-radius: 10px; border-radius: calc(-10px); }
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer"></div>
|
||||
<div id="outer"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,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/#calc-serialize">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-values-3/#calc-notation">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Length unit 'ch' used in pseudo elements without text should be recalculated after loading a web font</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-values-4/#font-relative-lengths">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-font-loading-3/#font-face-load">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4#generated-content">
|
||||
<link rel="author" href="xiaochengh@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Length unit 'ch' used in pseudo elements should be recalculated after loading a web font</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-values-4/#font-relative-lengths">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-font-loading-3/#font-face-load">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
|
||||
<link rel="author" href="xiaochengh@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Length unit 'ch' should be recalculated after loading a web font</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-values-4/#font-relative-lengths">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-font-loading-3/#font-face-load">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
|
||||
<link rel="author" href="mailto:xiaochengh@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,10 @@ function test_length_equals(value, expected) {
|
|||
test_length_equals('clamp(10px, 20px, 30px)', '20px');
|
||||
test_length_equals('clamp(10px, 5px, 30px)', '10px');
|
||||
test_length_equals('clamp(10px, 35px, 30px)', '30px');
|
||||
test_length_equals('clamp(10px, 35px , 30px)', '30px');
|
||||
test_length_equals('clamp(10px, 35px /*foo*/, 30px)', '30px');
|
||||
test_length_equals('clamp(10px /* foo */ , 35px, 30px)', '30px');
|
||||
test_length_equals('clamp(10px , 35px, 30px)', '30px');
|
||||
|
||||
// clamp(MIN, VAL, MAX) is identical to max(MIN, min(VAL, MAX)),
|
||||
// so MIN wins over MAX if they are in the wrong order.
|
||||
|
|
|
|||
|
|
@ -16,10 +16,8 @@
|
|||
@font-face {
|
||||
font-family: foo;
|
||||
font-weight: 900;
|
||||
/* It doesn't really matter if Arial is not found, as
|
||||
long as we fall-back to a font with different metrics
|
||||
than Ahem */
|
||||
src: local(Arial);
|
||||
/* A font with significantly different ex-height metric than Aham. */
|
||||
src: url('/fonts/noto/noto-sans-v8-latin-regular.woff');
|
||||
}
|
||||
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units + CSS Background and Borders Test:
|
||||
Initial property and background-color
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
The initial keyword is supported on background-color.
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords"/>
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: green; overflow: hidden; }
|
||||
#outer { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
|
||||
#outer { background: red; background-color: initial; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -65,8 +65,8 @@ test_serialization(
|
|||
|
||||
test_serialization(
|
||||
'calc(min(1%, 2%) + max(3%, 4%) + 10%)',
|
||||
'calc(15%)',
|
||||
'15%',
|
||||
'calc(10% + min(1%, 2%) + max(3%, 4%))',
|
||||
'calc(10% + min(1%, 2%) + max(3%, 4%))',
|
||||
'15px');
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,13 @@
|
|||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: foo;
|
||||
font-weight: 900;
|
||||
src: url('/fonts/noto/noto-sans-v8-latin-regular.woff');
|
||||
}
|
||||
div {
|
||||
font-family: Arial, sans-serif;
|
||||
font-family: foo, sans-serif;
|
||||
font-weight: 900;
|
||||
width: 10ex;
|
||||
height: 20px;
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Storage of "unset" value</title>
|
||||
<meta name="author" title="Xidorn Quan" href="https://www.upsuper.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-3/#common-keywords"/>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div {
|
||||
color: unset;
|
||||
border: unset;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
let properties = ["color", "border", "border-left", "border-color", "border-right-style"];
|
||||
let style = document.styleSheets[0].cssRules[0].style;
|
||||
for (let prop of properties) {
|
||||
assert_equals(style.getPropertyValue(prop), "unset", `${prop} is expected to be "unset"`);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<title>CSS Values: Viewport units are computed correctly after font load.</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#viewport-relative-lengths">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-values-3/#viewport-relative-lengths">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1620359">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue