mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update web-platform-tests to revision b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'
This commit is contained in:
WPT Sync Bot
cybai
parent
4401622eb1
commit
b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func">
|
||||
<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">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../support/numeric-testcommon.js"></script>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
function test_angle_equals(value, expected) {
|
||||
test_math_used(`rotate(${value})`, `rotate(${expected})`,
|
||||
{prop:'transform', base:'none',
|
||||
msg: `${value} should be used-value-equivalent to ${expected}`});
|
||||
}
|
||||
// Simple tests
|
||||
test_angle_equals('acos(1)', '0deg');
|
||||
test_angle_equals('atan(0)', '0deg');
|
||||
test_angle_equals('asin(0)', '0deg');
|
||||
test_angle_equals('atan2(0,0)', '0deg');
|
||||
|
||||
// Test pi
|
||||
test_math_used('calc(asin(sin(pi/2)))', '90deg', {type:'angle', approx:0.1});
|
||||
test_math_used('calc(acos(cos(pi - 3.14159265358979323846)))', '0deg', {type:'angle', approx:0.1});
|
||||
|
||||
// Test e
|
||||
test_math_used('calc(atan(e - 2.7182818284590452354) )', '0deg', {type:'angle', approx:0.1});
|
||||
|
||||
// General calculations
|
||||
test_math_used('calc(asin(sin(30deg + 1.0471967rad ) ))', '90deg', {type:'angle', approx:0.1});
|
||||
test_math_used('calc(acos(cos(30deg - 0.523599rad ) ))', '0deg'), {type:'angle', approx:0.1};
|
||||
test_math_used('calc(asin(sin(3.14159 / 2 + 1 - 1) ))', '90deg', {type:'angle', approx:0.1});
|
||||
test_math_used('calc(asin(sin(100grad) ))', '90deg', {type:'angle', approx:0.1});
|
||||
test_math_used('calc(acos(cos(0 / 2 + 1 - 1) ))', '0deg', {type:'angle', approx:0.1});
|
||||
test_math_used('calc(atan(tan(30deg + 0.261799rad ) ))', '45deg', {type:'angle', approx:0.1});
|
||||
test_math_used('calc(atan(tan(0.7853975rad ) ))', '45deg', {type:'angle', approx:0.1});
|
||||
test_math_used('calc(atan(tan(3.14159 / 4 + 1 - 1) ))', '45deg', {type:'angle', approx:0.1});
|
||||
test_math_used('calc(asin(sin(0.25turn)) )', '90deg', {type:'angle', approx:0.1});
|
||||
test_math_used('calc(atan2(0,1))', '0deg', {type:'angle', approx:0.1});
|
||||
test_math_used('calc(atan2(0,-1))', '-180deg', {type:'angle', approx:0.1});
|
||||
test_math_used('calc(atan2(1,-1))', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('calc(atan2(-1,1))', '-45deg', {type:'angle', approx:0.1});
|
||||
|
||||
// Test nesting
|
||||
test_math_used('calc(cos(sin(acos(cos(pi)))))', '1', {type:'number', approx:0.1});
|
||||
test_math_used('calc(sin(atan(tan(pi/2))))', '1', {type:'number', approx:0.1});
|
||||
|
||||
// Test types for atan2
|
||||
test_math_used('atan2(1px, -1px)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1cm, -1cm)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1mm, -1mm)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1Q, -1Q)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1in, -1in)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1pc, -1pc)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1pt, -1pt)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1em, -1em)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1ex, -1ex)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1ch, -1ch)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1rem, -1rem)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1vh, -1vh)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1vw, -1vw)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1deg, -1deg)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1grad, -1grad)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1turn, -1turn)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1rad, -1rad)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1s, -1s)', '135deg', {type:'angle', approx:0.1});
|
||||
test_math_used('atan2(1ms, -1ms)', '135deg', {type:'angle', approx:0.1});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func">
|
||||
<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">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../support/parsing-testcommon.js"></script>
|
||||
<script>
|
||||
function test_invalid_angle(value) {
|
||||
test_invalid_value('transform', `rotate(${value})`);
|
||||
}
|
||||
|
||||
// Syntax checking
|
||||
test_invalid_angle('asin()');
|
||||
test_invalid_angle('asin( )');
|
||||
test_invalid_angle('asin(,)');
|
||||
test_invalid_angle('asin(1dag)');
|
||||
test_invalid_angle('asin(1deg, )');
|
||||
test_invalid_angle('asin(, 1deg)');
|
||||
test_invalid_angle('asin(1deg + )');
|
||||
test_invalid_angle('asin(1deg - )');
|
||||
test_invalid_angle('asin(1deg * )');
|
||||
test_invalid_angle('asin(1deg / )');
|
||||
test_invalid_angle('asin(1deg 2deg)');
|
||||
test_invalid_angle('asin(1deg, , 2deg)');
|
||||
test_invalid_angle('acos()');
|
||||
test_invalid_angle('acos( )');
|
||||
test_invalid_angle('acos(,)');
|
||||
test_invalid_angle('acos(1dag)');
|
||||
test_invalid_angle('acos(1deg, )');
|
||||
test_invalid_angle('acos(, 1deg)');
|
||||
test_invalid_angle('acos(1deg + )');
|
||||
test_invalid_angle('acos(1deg - )');
|
||||
test_invalid_angle('acos(1deg * )');
|
||||
test_invalid_angle('acos(1deg / )');
|
||||
test_invalid_angle('acos(1deg 2deg)');
|
||||
test_invalid_angle('acos(1deg, , 2deg)');
|
||||
test_invalid_angle('atan()');
|
||||
test_invalid_angle('atan( )');
|
||||
test_invalid_angle('atan(,)');
|
||||
test_invalid_angle('atan(1dag)');
|
||||
test_invalid_angle('atan(1deg, )');
|
||||
test_invalid_angle('atan(, 1deg)');
|
||||
test_invalid_angle('atan(1deg + )');
|
||||
test_invalid_angle('atan(1deg - )');
|
||||
test_invalid_angle('atan(1deg * )');
|
||||
test_invalid_angle('atan(1deg / )');
|
||||
test_invalid_angle('atan(1deg 2deg)');
|
||||
test_invalid_angle('atan(1deg, , 2deg)');
|
||||
test_invalid_angle('asin(90px)');
|
||||
test_invalid_angle('asin(30deg + 1.0471967rad, 0)');
|
||||
test_invalid_angle('acos( 0 ,)');
|
||||
test_invalid_angle('acos( () 30deg - 0.523599rad )');
|
||||
test_invalid_angle('atan(45deg )');
|
||||
test_invalid_angle('atan(30deg, + 0.261799rad)');
|
||||
test_invalid_angle('atan2()');
|
||||
test_invalid_angle('atan2( )');
|
||||
test_invalid_angle('atan2(,)');
|
||||
test_invalid_angle('atan2(1dag)');
|
||||
test_invalid_angle('atan2(1deg, )');
|
||||
test_invalid_angle('atan2(, 1deg)');
|
||||
test_invalid_angle('atan2(1deg + )');
|
||||
test_invalid_angle('atan2(1deg - )');
|
||||
test_invalid_angle('atan2(1deg * )');
|
||||
test_invalid_angle('atan2(1deg / )');
|
||||
test_invalid_angle('atan2(1deg 2deg)');
|
||||
test_invalid_angle('atan2(1deg, , 2deg)');
|
||||
test_invalid_angle('atan2(90px)');
|
||||
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>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func">
|
||||
<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">
|
||||
<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);
|
||||
}
|
||||
|
||||
// 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);
|
||||
</script>
|
||||
|
|
@ -10,7 +10,6 @@
|
|||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
|
||||
<meta content="This test checks that 'deg' angle unit is case-insensitive." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
|
||||
<meta content="This test checks that 'grad' angle unit is case-insensitive." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
|
||||
<meta content="This test checks that 'rad' angle unit is case-insensitive." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
|
||||
<meta content="This test checks that 'turn' angle unit is case-insensitive." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -37,6 +37,38 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
const APPROX_INFINITY = 3.35544e+07;
|
||||
test_interpolation({
|
||||
property: 'left',
|
||||
from: '0px',
|
||||
to: 'calc(infinity * 1px)',
|
||||
target_names:['CSS Transitions', 'CSS Transitions with transition: all']
|
||||
}, [
|
||||
{at: -0.25, expect: `${APPROX_INFINITY * -0.25 }px`},
|
||||
{at: 0, expect: '0px'},
|
||||
{at: 0.25, expect: `${APPROX_INFINITY * 0.25}px`},
|
||||
{at: 0.5, expect: `${APPROX_INFINITY * 0.5}px`},
|
||||
{at: 0.75, expect: `${APPROX_INFINITY * 0.75}px`},
|
||||
{at: 1, expect: `${APPROX_INFINITY}px`},
|
||||
{at: 1.25, expect: `${APPROX_INFINITY * 1.25}px`}
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'left',
|
||||
from: '0px',
|
||||
to: 'calc(infinity * 1px)',
|
||||
target_names:['CSS Animations', 'Web Animations']
|
||||
}, [
|
||||
{at: -0.25, expect: `${-APPROX_INFINITY}px`},
|
||||
{at: 0, expect: `${APPROX_INFINITY}px`},
|
||||
{at: 0.25, expect: `${APPROX_INFINITY}px`},
|
||||
{at: 0.5, expect: `${APPROX_INFINITY}px`},
|
||||
{at: 0.75, expect: `${APPROX_INFINITY}px`},
|
||||
{at: 1, expect: `${APPROX_INFINITY}px`},
|
||||
{at: 1.25, expect: `${APPROX_INFINITY}px`}
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'left',
|
||||
from: 'calc(50% - 25px)',
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: Test for calc() on background-image gradients</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-background-image-gradient-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: Support calc() on gradient stop positions</title>
|
||||
<link rel="author" title="Yu-Sian (Thomasy) Liu" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594935">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width:100px;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Yu-Sian (Thomasy) Liu" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594935">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-background-linear-gradient-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width:100px;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
<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-3/#calc-computed-value">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta content="This test verifies how 6 calc() functions are computed for 'background-position'." name="assert">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
<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">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta content="This test verifies how 6 calc() functions are serialized for 'background-position'." name="assert">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: Test for calc() on background-position</title>
|
||||
<link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-background-position-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: Test for calc() on background-size</title>
|
||||
<link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-background-size-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: test for border-radius: calc()</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-border-radius-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: Test for height:calc() or min-height:calc() on blocks</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; width: 1px; background: blue; }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-height-block-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; height: 100px; width: 1px; }
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: Test that height:calc() with no percentages has an effect on inner table elements</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
tbody, tr, td {
|
||||
height: 500px;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-height-table-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
tbody, tr, td {
|
||||
height: calc(500px);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: Test of margin-*: calc()</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
div { border: medium solid green; width: 500px }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-margin-block-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
div { border: medium solid green; width: 500px }
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: Test for max-height:calc() on blocks</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; width: 1px; background: blue; }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-max-height-block-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; height: 100px; width: 1px; }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-width-block-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body { width: 500px }
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: intrinsic width of max-width: calc() on blocks</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-max-width-block-intrinsic-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body { font-size: 10px }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-height-block-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; height: 100px; width: 1px; }
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ https://chromium.googlesource.com/chromium/src/+/c825d655f6aaf73484f9d56e9012793
|
|||
<link rel="help" href="https://www.w3.org/TR/css-values-3/#calc-notation">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks how 'min-height' with calc(percentage) and 'box-sizing' are handled. The percentage in the calc() is calculated on the content box height of div#container.">
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-width-block-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body { width: 500px }
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: intrinsic width of min-width: calc() on blocks</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-min-width-block-intrinsic-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body { font-size: 10px }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-offsets-absolute-top-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; margin-top: -90px; height: 100px; margin-bottom: 90px; width: 3px; position: relative }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-offsets-relative-left-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
body { margin: 0 100px; width: 200px }
|
||||
body > div { height: 3px; position: relative }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-offsets-relative-left-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
body { margin: 0; width: 200px }
|
||||
body > div { height: 3px; position: relative }
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: Test for top:calc() on absolutely positioned elements</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; height: 100px; width: 3px; }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-offsets-absolute-top-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; height: 100px; width: 3px; position: relative }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-offsets-relative-top-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; height: 100px; width: 3px; }
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: Test for left:calc() on relatively positioned elements</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
body { margin: 0 100px; width: 100px }
|
||||
div[style] { background: blue; position: relative; height: 3px; }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-offsets-relative-left-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
body { margin: 0 100px; width: 100px }
|
||||
div[style] { background: blue; position: relative; height: 3px; }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-offsets-relative-left-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
body { margin: 0 100px; width: 100px }
|
||||
div[style] { background: blue; position: relative; height: 3px; }
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: Test for top:calc() on relatively positioned elements</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; height: 100px; width: 3px; }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-offsets-relative-top-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
body { margin: 0 }
|
||||
body > div { float: left; height: 100px; width: 3px; }
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: Test of padding-*: calc()</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body { width: 500px }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-padding-block-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body { width: 500px }
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
<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/#combine-integers">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: text-indent: calc()</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body { width: 500px }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-text-indent-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body { width: 500px }
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: intrinsic width of text-indent: calc() on blocks</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-text-indent-intrinsic-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body { font-size: 10px }
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: Test for calc() on transform-origin</title>
|
||||
<link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body { margin: 100px }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-transform-origin-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body { margin: 100px }
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: Test for vertical-align:calc()</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<div style="line-height: 100px; margin-top: 100px">
|
||||
<span>x</span>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-vertical-align-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<div style="line-height: 100px; margin-top: 100px">
|
||||
<span>x</span>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: width: calc() and min-width: calc() on blocks</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body { width: 500px }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-width-block-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body { width: 500px }
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: intrinsic width of width: calc() on blocks</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-width-block-intrinsic-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
|
||||
body { font-size: 10px }
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: width: calc() on table-layout: auto tables</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<table border>
|
||||
<tr>
|
||||
<td style="width: 500px">x</td>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-width-table-auto-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<table border>
|
||||
<tr>
|
||||
<td style="width: calc(500px)">x</td>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>CSS Reference: width: calc() on table-layout: auto tables</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
table { table-layout: fixed; width: 500px; border-spacing: 0 }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
<link rel="match" href="calc-width-table-fixed-1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
table { table-layout: fixed; width: 500px; border-spacing: 0 }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
<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-range">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta content="This test verifies how 2 calc() functions are computed for 'z-index' when involved expressions end up being numbers halfway between adjacent integers." name="assert">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Values and Units Test: support for the cap unit</title>
|
||||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#font-relative-lengths">
|
||||
<link rel="match" href="reference/cap-unit-001-ref.html">
|
||||
<meta name="assert" content="The cap unit is equal to the used cap-height of the first available font.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
span {
|
||||
background: green;
|
||||
color: green;
|
||||
position: absolute;
|
||||
}
|
||||
div {
|
||||
font: 50px Ahem; /* cap-height of Ahem is 0.8em */
|
||||
background: red;
|
||||
position: relative;
|
||||
height: 180px;
|
||||
height: calc(180px - 2cap); /* reduce to 100px if cap correctly supported */
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div span {
|
||||
width: 2.5cap;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div><span></span></div>
|
||||
</body>
|
||||
|
|
@ -3,7 +3,6 @@
|
|||
<title>CSS Values and Units Test: support for the ch unit</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-3/#font-relative-lengths">
|
||||
<meta name="flags" content="">
|
||||
<link rel="match" href="reference/ch-unit-001-ref.html">
|
||||
<meta name="assert" content="The ch unit is equal to the used advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<title>CSS Values and Units Test: support for the ch unit</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-3/#font-relative-lengths">
|
||||
<meta name="flags" content="">
|
||||
<link rel="match" href="reference/ch-unit-001-ref.html">
|
||||
<meta name="assert" content="In vertical mixed, The ch unit is equal to the used horizontal advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<title>CSS Values and Units Test: support for the ch unit</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-3/#font-relative-lengths">
|
||||
<meta name="flags" content="">
|
||||
<link rel="match" href="reference/ch-unit-001-ref.html">
|
||||
<meta name="assert" content="In vertical sideways, The ch unit is equal to the used horizontal advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
|
||||
<link rel="match" href="reference/ch-unit-008-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
|
||||
<link rel="match" href="reference/ch-unit-009-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
|
||||
<link rel="match" href="reference/ch-unit-009-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="In this test, the ch unit is the advance width measure of the 0 (ZERO, U+0030) glyph.">
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
|
||||
<link rel="match" href="reference/ch-unit-011-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="In this test, the ch unit is the advance height measure of the 0 (ZERO, U+0030) glyph.">
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
|
||||
<link rel="match" href="reference/ch-unit-009-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="In this test, the ch unit is the advance width measure of the 0 (ZERO, U+0030) glyph.">
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<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/#viewport-relative-lengths">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<body style="display: none">
|
||||
<script>
|
||||
promise_test(async function() {
|
||||
let frame = document.createElement("iframe");
|
||||
let load = new Promise(resolve => {
|
||||
frame.addEventListener("load", resolve);
|
||||
});
|
||||
frame.setAttribute("scrolling", "no");
|
||||
frame.setAttribute("frameborder", "0");
|
||||
frame.style.width = "100px";
|
||||
frame.style.height = "100px";
|
||||
frame.srcdoc = `
|
||||
<!doctype html>
|
||||
<style>
|
||||
body { margin: 0 }
|
||||
#parent, #child { width: 100vw; height: 100vh; }
|
||||
</style>
|
||||
<div id="parent">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(frame);
|
||||
|
||||
await load;
|
||||
|
||||
{
|
||||
let resize = new Promise(resolve => {
|
||||
frame.contentWindow.addEventListener("resize", resolve);
|
||||
});
|
||||
document.body.style.display = "";
|
||||
await resize;
|
||||
}
|
||||
|
||||
let doc = frame.contentDocument;
|
||||
function assertDimensions(expected, description) {
|
||||
for (let id of ["parent", "child"]) {
|
||||
let element = doc.getElementById(id);
|
||||
let rect = element.getBoundingClientRect();
|
||||
assert_equals(rect.width, expected, `${description}: ${id} width`);
|
||||
assert_equals(rect.height, expected, `${description}: ${id} height`);
|
||||
}
|
||||
}
|
||||
assertDimensions(100, "before resize");
|
||||
let resize = new Promise(resolve => {
|
||||
frame.contentWindow.addEventListener("resize", resolve);
|
||||
});
|
||||
frame.style.width = "200px";
|
||||
frame.style.height = "200px";
|
||||
await resize;
|
||||
assertDimensions(200, "after resize");
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func">
|
||||
<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">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../support/numeric-testcommon.js"></script>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
// Simple tests
|
||||
test_math_used('log(1)', '0', {type:'number'});
|
||||
test_math_used('log(10, 10)', '1', {type:'number'});
|
||||
test_math_used('exp(0)', '1', {type:'number'});
|
||||
|
||||
// Test e
|
||||
test_math_used('calc(log(e) )', '1', {type:'number', approx:0.1});
|
||||
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(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};
|
||||
test_math_used('calc(log(e) / log(e) + exp(0)*2 * log(e))', '3', {type:'number', approx:0.1});
|
||||
test_math_used('calc(log((1 + 1) /2) / log(e) + exp(0*1)*2 * log(e))', '2', {type:'number', approx:0.1});
|
||||
test_math_used('calc(log((3 + 1) /2, 2) / log(e) + exp(0*1)*2 * log(e))', '3', {type:'number', approx:0.1});
|
||||
test_math_used('calc(log((3 + 1) /2, 2) / log(e, e) + exp(0*1)*2 * log(e, e))', '3', {type:'number', approx:0.1});
|
||||
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>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func">
|
||||
<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">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../support/parsing-testcommon.js"></script>
|
||||
<script>
|
||||
function test_invalid_number(value) {
|
||||
test_invalid_value('opacity', value);
|
||||
}
|
||||
|
||||
// Syntax checking
|
||||
test_invalid_number('exp()');
|
||||
test_invalid_number('exp( )');
|
||||
test_invalid_number('exp(,)');
|
||||
test_invalid_number('exp(1, )');
|
||||
test_invalid_number('exp(, 1)');
|
||||
test_invalid_number('exp(1 + )');
|
||||
test_invalid_number('exp(1 - )');
|
||||
test_invalid_number('exp(1 * )');
|
||||
test_invalid_number('exp(1 / )');
|
||||
test_invalid_number('exp(1 2)');
|
||||
test_invalid_number('exp(1, , 2)');
|
||||
test_invalid_number('log()');
|
||||
test_invalid_number('log( )');
|
||||
test_invalid_number('log(,)');
|
||||
test_invalid_number('log(1, )');
|
||||
test_invalid_number('log(, 1)');
|
||||
test_invalid_number('log(1 + )');
|
||||
test_invalid_number('log(1 - )');
|
||||
test_invalid_number('log(1 * )');
|
||||
test_invalid_number('log(1 / )');
|
||||
test_invalid_number('log(1 2)');
|
||||
test_invalid_number('log(1, , 2)');
|
||||
|
||||
// Type checking
|
||||
test_invalid_number('exp(0px)');
|
||||
test_invalid_number('exp(0s)');
|
||||
test_invalid_number('exp(0deg)');
|
||||
test_invalid_number('exp(0Hz)');
|
||||
test_invalid_number('exp(0dpi)');
|
||||
test_invalid_number('exp(0fr)');
|
||||
test_invalid_number('exp(1, 1%)');
|
||||
test_invalid_number('exp(1, 0px)');
|
||||
test_invalid_number('exp(1, 0s)');
|
||||
test_invalid_number('exp(1, 0deg)');
|
||||
test_invalid_number('exp(1, 0Hz)');
|
||||
test_invalid_number('exp(1, 0dpi)');
|
||||
test_invalid_number('exp(1, 0fr)');
|
||||
test_invalid_number('log(0px)');
|
||||
test_invalid_number('log(0s)');
|
||||
test_invalid_number('log(0deg)');
|
||||
test_invalid_number('log(0Hz)');
|
||||
test_invalid_number('log(0dpi)');
|
||||
test_invalid_number('log(0fr)');
|
||||
test_invalid_number('log(1, 1%)');
|
||||
test_invalid_number('log(1, 0px)');
|
||||
test_invalid_number('log(1, 0s)');
|
||||
test_invalid_number('log(1, 0deg)');
|
||||
test_invalid_number('log(1, 0Hz)');
|
||||
test_invalid_number('log(1, 0dpi)');
|
||||
test_invalid_number('log(1, 0fr)');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func">
|
||||
<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">
|
||||
<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(${s})`);
|
||||
test_computed_serialization('opacity', t, c);
|
||||
test_computed_serialization('transform', `scale(${t})`, `matrix(${c}, 0, 0, ${c}, 0, 0)`);
|
||||
}
|
||||
|
||||
test_serialization(
|
||||
'exp(0)',
|
||||
'calc(1)',
|
||||
'1');
|
||||
test_serialization(
|
||||
'log(1)',
|
||||
'calc(0)',
|
||||
'0');
|
||||
|
||||
test_serialization(
|
||||
'calc(exp(0) + log(1) + log(1))',
|
||||
'calc(1)',
|
||||
'1');
|
||||
|
||||
test_serialization(
|
||||
'calc(log(1) + 0.5)',
|
||||
'calc(0.5)',
|
||||
'0.5');
|
||||
test_serialization(
|
||||
'calc(log(0))',
|
||||
'calc(-infinity)',
|
||||
'-infinity');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func">
|
||||
<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">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../support/numeric-testcommon.js"></script>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
|
||||
// Identity tests
|
||||
test_math_used('pow(1,1)', '1', {type:'number'});
|
||||
test_math_used('sqrt(1)', '1', {type:'number'});
|
||||
test_math_used('hypot(1)', '1', {type:'number'});
|
||||
|
||||
// Nestings
|
||||
test_math_used('sqrt(pow(1,1))', '1');
|
||||
test_math_used('hypot(pow(1, sqrt(1)))', '1');
|
||||
test_math_used('calc(hypot(pow((1 + sqrt(1)) / 2, sqrt(1))))', '1');
|
||||
|
||||
// General calculations
|
||||
test_math_used('calc(100px * pow(2, pow(2, 2)))','1600px');
|
||||
test_math_used('calc(1px * pow(2, 3))', '8px')
|
||||
test_math_used('calc(100px * sqrt(100))', '1000px');
|
||||
test_math_used('calc(1px * pow(2, sqrt(100))', '1024px');
|
||||
test_math_used('hypot(3px, 4px)', '5px');
|
||||
test_math_used('calc(100px * hypot(3, 4))', '500px');
|
||||
test_math_used('hypot(-5px)', '5px');
|
||||
test_math_used('calc(1px * hypot(-5))', '5px');
|
||||
test_math_used('calc(1px * hypot(10000))','10000px');
|
||||
test_math_used('calc(2px * sqrt(100000000))','20000px');
|
||||
test_math_used('calc(3px * pow(200, 4))', '33554428px');
|
||||
|
||||
//Type checking hypot
|
||||
test_math_used('hypot(1px)', '1px');
|
||||
test_math_used('hypot(1cm)', '1cm');
|
||||
test_math_used('hypot(1mm)', '1mm');
|
||||
test_math_used('hypot(1Q)', '1Q');
|
||||
test_math_used('hypot(1in)', '1in');
|
||||
test_math_used('hypot(1pc)', '1pc');
|
||||
test_math_used('hypot(1pt)', '1pt');
|
||||
test_math_used('hypot(1em)', '1em');
|
||||
test_math_used('hypot(1ex)', '1ex');
|
||||
test_math_used('hypot(1ch)', '1ch');
|
||||
test_math_used('hypot(1rem)', '1rem');
|
||||
test_math_used('hypot(1vh)', '1vh');
|
||||
test_math_used('hypot(1vw)', '1vw');
|
||||
test_math_used('hypot(1vmin)', '1vmin');
|
||||
test_math_used('hypot(1vmax)', '1vmax');
|
||||
test_math_used('hypot(1s)', '1s', {type:'time'});
|
||||
test_math_used('hypot(1ms)', '1ms', {type:'time'});
|
||||
test_math_used('hypot(1deg)', '1deg', {type:'angle', approx:0.001});
|
||||
test_math_used('hypot(1grad)', '1grad', {type:'angle', approx:0.001});
|
||||
test_math_used('hypot(1rad)', '1rad', {type:'angle', approx:0.001});
|
||||
test_math_used('hypot(1turn)', '1turn', {type:'angle', approx:0.001});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func">
|
||||
<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">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../support/parsing-testcommon.js"></script>
|
||||
<script>
|
||||
function test_invalid_number(value) {
|
||||
test_invalid_value('opacity', value);
|
||||
}
|
||||
function test_invalid_length(value) {
|
||||
// 'letter-spacing' accepts <length> only, not <percentage> or any mixes.
|
||||
test_invalid_value('letter-spacing', value);
|
||||
}
|
||||
|
||||
// Syntax checking
|
||||
test_invalid_number('hypot()');
|
||||
test_invalid_number('hypot( )');
|
||||
test_invalid_number('hypot(,)');
|
||||
test_invalid_number('hypot(1, )');
|
||||
test_invalid_number('hypot(, 1)');
|
||||
test_invalid_number('hypot(1 + )');
|
||||
test_invalid_number('hypot(1 - )');
|
||||
test_invalid_number('hypot(1 * )');
|
||||
test_invalid_number('hypot(1 / )');
|
||||
test_invalid_number('hypot(1 2)');
|
||||
test_invalid_number('hypot(1, , 2)');
|
||||
test_invalid_number('hypot(1, 2)');
|
||||
test_invalid_number('sqrt()');
|
||||
test_invalid_number('sqrt( )');
|
||||
test_invalid_number('sqrt(,)');
|
||||
test_invalid_number('sqrt(1, )');
|
||||
test_invalid_number('sqrt(, 1)');
|
||||
test_invalid_number('sqrt(1 + )');
|
||||
test_invalid_number('sqrt(1 - )');
|
||||
test_invalid_number('sqrt(1 * )');
|
||||
test_invalid_number('sqrt(1 / )');
|
||||
test_invalid_number('sqrt(1 2)');
|
||||
test_invalid_number('sqrt(1, , 2)');
|
||||
test_invalid_number('sqrt(1, 2)');
|
||||
test_invalid_number('pow( )');
|
||||
test_invalid_number('pow(,)');
|
||||
test_invalid_number('pow(1, )');
|
||||
test_invalid_number('pow(, 1)');
|
||||
test_invalid_number('pow(1 + )');
|
||||
test_invalid_number('pow(1 - )');
|
||||
test_invalid_number('pow(1 * )');
|
||||
test_invalid_number('pow(1 / )');
|
||||
test_invalid_number('pow(1 2)');
|
||||
test_invalid_number('pow(1, , 2)');
|
||||
test_invalid_number('pow(1, 2)');
|
||||
|
||||
// General tests
|
||||
test_invalid_length('calc(1px * pow(1))');
|
||||
test_invalid_length('calc(1px * pow(2px, 3px))');
|
||||
test_invalid_length('calc(sqrt(100px)');
|
||||
test_invalid_length('hypot(2px, 40%)');
|
||||
test_invalid_length('hypot(2px, 3)');
|
||||
test_invalid_length('hypot(3, ,4)');
|
||||
test_invalid_length('calc(1px * pow(2 3))');
|
||||
test_invalid_length('hypot()');
|
||||
test_invalid_length('calc(pow(2))');
|
||||
test_invalid_length('pow())');
|
||||
test_invalid_length('calc(sqrt())');
|
||||
test_invalid_length('calc(sqrt(100, 200))');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func">
|
||||
<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">
|
||||
<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)`);
|
||||
}
|
||||
|
||||
test_serialization(
|
||||
'pow(1,1)',
|
||||
'calc(1)',
|
||||
'1');
|
||||
test_serialization(
|
||||
'hypot(1)',
|
||||
'calc(1)',
|
||||
'1');
|
||||
test_serialization(
|
||||
'sqrt(1)',
|
||||
'calc(1)',
|
||||
'1');
|
||||
|
||||
test_serialization(
|
||||
'calc(pow(1,1) + 1)',
|
||||
'calc(2)',
|
||||
'2');
|
||||
test_serialization(
|
||||
'calc(hypot(1) * 2)',
|
||||
'calc(2)',
|
||||
'2');
|
||||
test_serialization(
|
||||
'calc(sqrt(1) - 1)',
|
||||
'calc(0)',
|
||||
'0');
|
||||
</script>
|
||||
|
|
@ -6,13 +6,20 @@
|
|||
<link rel="match" href="reference/ic-unit-001-ref.html">
|
||||
<meta name="assert" content="The ic unit is equal to the used advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it.">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: IcTestFullWidth;
|
||||
src: url(resources/IcTestFullWidth.woff2);
|
||||
}
|
||||
|
||||
span {
|
||||
font: 20px IcTestFullWidth;
|
||||
background: green;
|
||||
color: green;
|
||||
top: 0; bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
div {
|
||||
font: 20px IcTestFullWidth;
|
||||
background: red;
|
||||
color: red;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -8,13 +8,21 @@
|
|||
<link rel="match" href="reference/ic-unit-002-ref.html">
|
||||
<meta name="assert" content="In vertical upright, the ic unit is equal to the used vertical advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it.">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: IcTestFullWidth;
|
||||
src: url(resources/IcTestFullWidth.woff2);
|
||||
}
|
||||
|
||||
span {
|
||||
font: 20px IcTestFullWidth;
|
||||
background: green;
|
||||
color: green;
|
||||
left: 0; right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
div {
|
||||
font: 20px IcTestFullWidth;
|
||||
background: red;
|
||||
color: red;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -8,13 +8,21 @@
|
|||
<link rel="match" href="reference/ic-unit-002-ref.html">
|
||||
<meta name="assert" content="In vertical mixed, the ic unit is equal to the used vertical advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it.">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: IcTestFullWidth;
|
||||
src: url(resources/IcTestFullWidth.woff2);
|
||||
}
|
||||
|
||||
span {
|
||||
font: 20px IcTestFullWidth;
|
||||
background: green;
|
||||
color: green;
|
||||
left: 0; right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
div {
|
||||
font: 20px IcTestFullWidth;
|
||||
background: red;
|
||||
color: red;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -8,13 +8,21 @@
|
|||
<link rel="match" href="reference/ic-unit-001-ref.html">
|
||||
<meta name="assert" content="In vertical sideways, the ic unit is equal to the used horizontal advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it.">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: IcTestFullWidth;
|
||||
src: url(resources/IcTestFullWidth.woff2);
|
||||
}
|
||||
|
||||
span {
|
||||
font: 20px IcTestFullWidth;
|
||||
background: green;
|
||||
color: green;
|
||||
left: 0; right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
div {
|
||||
font: 20px IcTestFullWidth;
|
||||
background: red;
|
||||
color: red;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -8,13 +8,19 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-values-4/#font-relative-lengths">
|
||||
<link rel="match" href="reference/ic-unit-008-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="In this test, the ic unit is the advance width measure of the 水 (CJK water ideograph, U+6C34) glyph.">
|
||||
|
||||
<style>
|
||||
@font-face
|
||||
{
|
||||
font-family: IcTestFullWidth;
|
||||
src: url(resources/IcTestFullWidth.woff2);
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
float: left;
|
||||
font-family: IcTestFullWidth;
|
||||
font-size: 80px; /* arbitrary font size */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,13 +8,19 @@
|
|||
<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">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="In this test, the ic unit is the advance height measure of the 水 (CJK water ideograph, U+6C34) glyph.">
|
||||
|
||||
<style>
|
||||
@font-face
|
||||
{
|
||||
font-family: IcTestFullWidth;
|
||||
src: url(resources/IcTestFullWidth.woff2);
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
float: left;
|
||||
font-family: IcTestFullWidth;
|
||||
font-size: 80px; /* arbitrary font size */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,13 +8,19 @@
|
|||
<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">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="In this test, the ic unit is the advance height measure of the 水 (CJK water ideograph, U+6C34) glyph.">
|
||||
|
||||
<style>
|
||||
@font-face
|
||||
{
|
||||
font-family: IcTestFullWidth;
|
||||
src: url(resources/IcTestFullWidth.woff2);
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
float: left;
|
||||
font-family: IcTestFullWidth;
|
||||
font-size: 80px; /* arbitrary font size */
|
||||
text-orientation: mixed;
|
||||
writing-mode: vertical-rl;
|
||||
|
|
@ -47,4 +53,4 @@
|
|||
|
||||
水 (CJK water ideograph, U+6C34) glyph == 水
|
||||
|
||||
-->
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -8,13 +8,19 @@
|
|||
<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">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="In this test, the ic unit is the advance height measure of the 水 (CJK water ideograph, U+6C34) glyph.">
|
||||
|
||||
<style>
|
||||
@font-face
|
||||
{
|
||||
font-family: IcTestFullWidth;
|
||||
src: url(resources/IcTestFullWidth.woff2);
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
float: left;
|
||||
font-family: IcTestFullWidth;
|
||||
font-size: 80px; /* arbitrary font size */
|
||||
text-orientation: upright;
|
||||
writing-mode: vertical-rl;
|
||||
|
|
@ -47,4 +53,4 @@
|
|||
|
||||
水 (CJK water ideograph, U+6C34) glyph == 水
|
||||
|
||||
-->
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -8,13 +8,19 @@
|
|||
<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">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="In this test, the ic unit is the advance width measure of the 水 (CJK water ideograph, U+6C34) glyph.">
|
||||
|
||||
<style>
|
||||
@font-face
|
||||
{
|
||||
font-family: IcTestFullWidth;
|
||||
src: url(resources/IcTestFullWidth.woff2);
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
float: left;
|
||||
font-family: IcTestFullWidth;
|
||||
font-size: 80px; /* arbitrary font size */
|
||||
text-orientation: sideways;
|
||||
writing-mode: vertical-rl;
|
||||
|
|
@ -47,4 +53,4 @@
|
|||
|
||||
水 (CJK water ideograph, U+6C34) glyph == 水
|
||||
|
||||
-->
|
||||
-->
|
||||
|
|
|
|||
34
tests/wpt/web-platform-tests/css/css-values/ic-unit-013.html
Normal file
34
tests/wpt/web-platform-tests/css/css-values/ic-unit-013.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Values and Units Test: support for the ic unit</title>
|
||||
<link rel="author" title="Kiet Ho" href="mailto:tho22@apple.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-values-4/#ic">
|
||||
<link rel="match" href="reference/ic-unit-013-ref.html">
|
||||
<meta name="assert" content="The ic unit is equal to 0em if the CJK water glyph's advance is 0.">
|
||||
<style>
|
||||
/* The following font contains the CJK water (U+6C34) glyph as a zero-width character. */
|
||||
@font-face {
|
||||
font-family: IcTestZeroWidth;
|
||||
src: url(resources/IcTestZeroWidth.woff2);
|
||||
}
|
||||
|
||||
.test {
|
||||
font: 20px IcTestZeroWidth;
|
||||
width: calc(100px + 10ic);
|
||||
height: 20px;
|
||||
background: green;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ref {
|
||||
/* Each ic should be equal to 0px because the CJK water glyph in the font is zero-width. */
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if there are two green rectangles of equal length.</p>
|
||||
<div class="test"></div>
|
||||
<div class="ref"></div>
|
||||
41
tests/wpt/web-platform-tests/css/css-values/ic-unit-014.html
Normal file
41
tests/wpt/web-platform-tests/css/css-values/ic-unit-014.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Values and Units Test: support for the ic unit</title>
|
||||
<link rel="author" title="Kiet Ho" href="mailto:tho22@apple.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-values-4/#ic">
|
||||
<link rel="match" href="reference/ic-unit-014-ref.html">
|
||||
<meta name="assert" content="The ic unit is equal to 0.5em if the CJK water glyph's advance is 0.5em.">
|
||||
<style>
|
||||
/* The following font contains the CJK water (U+6C34) glyph as a rectangle box,
|
||||
with the width being exactly half of its height. */
|
||||
@font-face {
|
||||
font-family: IcTestHalfWidth;
|
||||
src: url(resources/IcTestHalfWidth.woff2);
|
||||
}
|
||||
|
||||
.test {
|
||||
font-family: IcTestHalfWidth;
|
||||
font-size: 20px;
|
||||
width: calc(100px + 10ic);
|
||||
height: 20px;
|
||||
background: green;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ref {
|
||||
/*
|
||||
Each ic is equal to 10px, the width of a CJK water glyph.
|
||||
(its height is 20px, and its width is half the height).
|
||||
The width of .test is then:
|
||||
100px + (10ic * 10px / ic) = 200px
|
||||
*/
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if there are two green rectangles of equal length.</p>
|
||||
<div class="test"></div>
|
||||
<div class="ref"></div>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!doctype html>
|
||||
<title>Testing if integer interpolation is rounded towards positive infinity</title>
|
||||
<link rel="author" title="Joonghun Park" href="pjh0718@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#combine-integers">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
#flex-container {
|
||||
display: flex;
|
||||
animation: anim-order 4s steps(4) forwards 1;
|
||||
animation-delay: -1s;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes anim-order {
|
||||
from {
|
||||
order: -2;
|
||||
}
|
||||
|
||||
to {
|
||||
order: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="flex-container"></div>
|
||||
<script>
|
||||
var test_description = "Integer interpolation should be rounded towards positive infinity";
|
||||
test(
|
||||
t => {
|
||||
const container = document.getElementById("flex-container");
|
||||
const order_value = Number.parseFloat(getComputedStyle(container).getPropertyValue('order'));
|
||||
|
||||
assert_equals(order_value, -1, "Interpolation result for order should be rounded towards positive infinity");
|
||||
},
|
||||
test_description
|
||||
);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!doctype html>
|
||||
<title>Testing if integer interpolation is rounded towards positive infinity</title>
|
||||
<link rel="author" title="Joonghun Park" href="pjh0718@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#combine-integers">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
#anim-target {
|
||||
animation: anim-z 4s steps(4) forwards 1;
|
||||
animation-delay: -1s;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes anim-z {
|
||||
from {
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
to {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="anim-target"></div>
|
||||
<script>
|
||||
var test_description = "Integer interpolation should be rounded towards positive infinity";
|
||||
test(
|
||||
t => {
|
||||
const target = document.getElementById("anim-target");
|
||||
const z_index_value = Number.parseFloat(getComputedStyle(target).getPropertyValue('z-index'));
|
||||
|
||||
assert_equals(z_index_value, -1, "Interpolation result for z-index should be rounded towards positive infinity");
|
||||
},
|
||||
test_description
|
||||
);
|
||||
</script>
|
||||
|
|
@ -10,7 +10,6 @@
|
|||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
|
||||
<meta content="This test checks that 'Q' unit is case-insensitive." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div#test-overlapping-green
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
|
||||
<meta content="This test checks that 'Q' unit is case-insensitive." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div#test-overlapping-green
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Values and Units reference: support for the cap unit</title>
|
||||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
|
||||
<style>
|
||||
div {
|
||||
background: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
|
@ -3,9 +3,13 @@
|
|||
<title>CSS Values and Units Test Reference File</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<style>
|
||||
svg { width: 10ic; }
|
||||
.ref {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<svg viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="green"></svg>
|
||||
<div class="ref"></div>
|
||||
</body>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue