mirror of
https://github.com/servo/servo.git
synced 2025-08-10 16:05:43 +01:00
Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444
This commit is contained in:
Josh Matthews
Anthony Ramine
parent
25e8bf69e6
commit
665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
6
tests/wpt/web-platform-tests/css/css-values-3/OWNERS
Normal file
6
tests/wpt/web-platform-tests/css/css-values-3/OWNERS
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@frivoal
|
||||
@dbaron
|
||||
@FremyCompany
|
||||
@plinss
|
||||
@tabatkins
|
||||
@fantasai
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
|
||||
<title>CSS Values and Units Test: elements should be the real world size given in mm, cm, inches...</title>
|
||||
<meta name="assert" content="elements are not displayed with the real world size units they should be, when specified in millimeters, centimeters, inches, ...">
|
||||
<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" title="5.1.2. Viewport-percentage lengths: the 'vw', 'vh', 'vmin', 'vmax' units">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
|
||||
|
||||
.s1mm { background: #F00; width: 1mm; height: 1mm; }
|
||||
.s10mm { background: #66F; width: 10mm; height: 10mm; }
|
||||
.s1cm { background: #E90; width: 1cm; height: 1cm; }
|
||||
.s254cm { background: #D0D; width: 2.54cm; height: 2.54cm; }
|
||||
.s1in { background: #00F; width: 1in; height: 1in; }
|
||||
|
||||
.inline { float: left; }
|
||||
|
||||
.newline { clear: left; }
|
||||
|
||||
p { clear: both; margin: 10px 0; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
This should be 1mm (width) by 1mm (height) size
|
||||
</p>
|
||||
|
||||
<div class="s1mm"></div>
|
||||
|
||||
<p>
|
||||
This is 10 1mm x 1mm divs, so it should be 10mm (width) by 1mm (height) size
|
||||
</p>
|
||||
|
||||
<div class="s1mm newline inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
<div class="s1mm inline"></div>
|
||||
|
||||
<p>
|
||||
This should be 10mm (width) by 10mm (height) size.
|
||||
</p>
|
||||
|
||||
<div class="s10mm newline "></div>
|
||||
|
||||
<p>
|
||||
This should be 1cm (width) by 1cm (height) size. So, same width as the line above.
|
||||
</p>
|
||||
|
||||
<div class="s1cm newline "></div>
|
||||
|
||||
<p>
|
||||
This should be 2.54cm (width) by 2.54cm (height) size.
|
||||
</p>
|
||||
|
||||
<div class="s254cm newline "></div>
|
||||
|
||||
<p>
|
||||
This should be 1in (width) by 1in (height) size. So, same size as above.
|
||||
</p>
|
||||
|
||||
<div class="s1in"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Attribute references (colors)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
Invalid color values in referenced attributes are replaced by the fallback value
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: red; width: 200px; height: 200px; }
|
||||
|
||||
#outer { background: attr(data-test color, green); }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer" data-test="qqffuutt"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Attribute references (colors)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
When the fallback value of an attr() function is invalid, the delcaration is ignored.
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: green; width: 200px; height: 200px; }
|
||||
|
||||
#outer { background: attr(data-test color, qqffuutt); }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer" data-test="red"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Attribute references (colors)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
The value of the reference attribute is used correctly in the layout when it's a 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/#attr-notation"/>
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: red; width: 200px; height: 200px; }
|
||||
|
||||
#outer { background: attr(data-test color); }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer" data-test="green"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Attribute references (types)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
When the type of an att() function is known and unexpected, the declaration is ingored
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
|
||||
#outer { width: 200px; width: attr(data-test color); height: 200px; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer" data-test="green"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Attribute references (types)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
When the type of an att() function is known and unexpected, the declaration is ignored
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
|
||||
#outer { width: 200px; width: attr(data-test number); height: 200px; }
|
||||
/* NOTE: while '0' is a valid length AND a valid number, the number type isn't a valid representation of a length. */
|
||||
/* The reason for this is that most numbers aren't valid length */
|
||||
/* ! Spec need some updates to make those assumptions clearly valid (see Tab Atkins for details) */
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer" data-test="0"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Attribute references (types)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
When the type of an att() function is known and unexpected, the declaration is ignored
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
|
||||
#outer { width: 200px; width: attr(data-test number); height: 200px; }
|
||||
/* NOTE: while '0' is a valid length AND a valid number, the number type isn't a valid representation of a length. */
|
||||
/* The reason for this is that most numbers aren't valid length */
|
||||
/* ! Spec need some updates to make those assumptions clearly valid (see Tab Atkins for details) */
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer" data-test="0"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Attribute references (length)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
When the value of referenced attribute isn't a valid length, the fallback value is unsed instead.
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
|
||||
#outer { width: attr(data-test length, 200px); height: 200px; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer" data-test="qqffuutt"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Attribute references (length)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
When the attr() fallback is an invalid length, the delcaration is correctly ignored.
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
|
||||
#outer { width: 200px; width: attr(data-test length, invalid); height: 200px; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer" data-test="300px"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Attribute references (length)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
The value of referenced attribute is used correctly as a length (even if it's 0).
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
#outer2 { background: red; }
|
||||
|
||||
#outer { width: 200px; height: 200px; }
|
||||
#outer2 { width: 200px; width: attr(data-test length); height: 200px; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer"></div>
|
||||
<div id="outer2" data-test="0"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Attribute references (length)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
The value of referenced attribute is used correctly as a length (even if it's 0).
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
#outer2 { background: red; }
|
||||
|
||||
#outer { width: 200px; height: 200px; }
|
||||
#outer2 { width: 200px; width: attr(data-test length, 0); height: 200px; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer"></div>
|
||||
<div id="outer2" data-test="0"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Attribute references (length)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
The value of referenced attribute is used correctly as a length.
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
|
||||
#outer { width: attr(data-test length); height: 200px; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer" data-test="200px"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +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.
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
|
||||
#outer { width: attr(data-test px, 200); height: 200px; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer" data-test="300px"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +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.
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
|
||||
#outer { width: 200px; width: attr(data-test px, 300px); height: 200px; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer" data-test="300"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Attribute references (pixels)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
Attribute references for pixel values are replaced correctly at computed time.
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
|
||||
#outer { width: attr(data-test px); height: 200px; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer" data-test="200"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Calc() inside calc()
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
The calc() function notation is allowed inside a calc() notation.
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: red; overflow: hidden; }
|
||||
#outer { position: absolute; top: 0px; left: 0px; background: green; width: 100%; }
|
||||
#outer { height: calc(calc(100%));
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +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.
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html { background: red; }
|
||||
@media (min-width: calc(100px)) {
|
||||
html { background: green; }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +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).
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html { background: red; }
|
||||
@media (min-width: calc(-100px)) { /* should clamp to 0px */
|
||||
html { background: green; }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +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.
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/200-200-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
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); }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Calc() inside calc()
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
The calc() function notation is allowed inside a calc() notation.
|
||||
" />
|
||||
|
||||
<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="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: red; overflow: hidden; }
|
||||
#outer { position: absolute; top: 0px; left: 0px; background: green; width: 100%; }
|
||||
#outer { height: calc((((((((((((((((((((((((100%)))))))))))))))))))))))); }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables Allowed Syntax</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#lengths" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-type-checking" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style id="style"></style>
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"unitless_zero_in_calc_is_a_numeric_type_not_length": { "assert": "invalid calc expression: unitless zero in calc() is a numeric type, not length" },
|
||||
"0px_in_calc": { "assert": "invalid calc expression: 0px in calc()" },
|
||||
"addition_of_length_and_number": { "assert": "invalid calc expression: addition of length and number" },
|
||||
"addition_of_number_and_length": { "assert": "invalid calc expression: addition of number and length" },
|
||||
"subtraction_of_length_and_number": { "assert": "invalid calc expression: subtraction of length and number" },
|
||||
"subtraction_of_number_and_length": { "assert": "invalid calc expression: subtraction of number and length" },
|
||||
"multiplication_of_length_and_number": { "assert": "invalid calc expression: multiplication of length and number" },
|
||||
"multiplication_of_number_and_length": { "assert": "invalid calc expression: multiplication of number and length" },
|
||||
"multiplication_of_length_and_length": { "assert": "invalid calc expression: multiplication of length and length" }
|
||||
}
|
||||
*/</script>
|
||||
</head>
|
||||
<body onload="run()">
|
||||
<div id=log></div>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
|
||||
function run() {
|
||||
var test_elt = document.getElementById("test");
|
||||
var test_cs = window.getComputedStyle(test_elt, "");
|
||||
|
||||
function description_to_name(description) {
|
||||
return description.replace(/\W+/g, "_").replace(/^_/, "").replace(/_$/, "");
|
||||
}
|
||||
|
||||
function assert_invalid_value(property, value, description) {
|
||||
test(function() {
|
||||
test_elt.style.setProperty(property, "inherit");
|
||||
test_elt.style.setProperty(property, value);
|
||||
assert_equals(test_elt.style.getPropertyValue(property),
|
||||
"inherit");
|
||||
test_elt.style.setProperty(property, value);
|
||||
test_elt.style.removeProperty(property);
|
||||
},
|
||||
description_to_name(description),
|
||||
{ assert: "invalid calc expression: " + description });
|
||||
}
|
||||
|
||||
function assert_valid_value(property, value, computes_to, description) {
|
||||
test(function() {
|
||||
test_elt.style.setProperty(property, "inherit");
|
||||
test_elt.style.setProperty(property, value);
|
||||
assert_not_equals(test_elt.style.getPropertyValue(property),
|
||||
"inherit");
|
||||
assert_equals(test_cs.getPropertyValue(property),
|
||||
computes_to);
|
||||
test_elt.style.removeProperty(property);
|
||||
},
|
||||
description_to_name(description),
|
||||
{ assert: "valid calc expression: " + description });
|
||||
}
|
||||
|
||||
assert_invalid_value("margin-left", "calc(0)",
|
||||
"unitless zero in calc() is a numeric type, not length");
|
||||
assert_valid_value("margin-left", "calc(0px)", "0px",
|
||||
"0px in calc()");
|
||||
assert_invalid_value("margin-left", "calc(1px + 2)",
|
||||
"addition of length and number");
|
||||
assert_invalid_value("margin-left", "calc(2 + 1px)",
|
||||
"addition of number and length");
|
||||
assert_invalid_value("margin-left", "calc(1px - 2)",
|
||||
"subtraction of length and number");
|
||||
assert_invalid_value("margin-left", "calc(2 - 1px)",
|
||||
"subtraction of number and length");
|
||||
assert_valid_value("margin-left", "calc(2px * 2)", "4px",
|
||||
"multiplication of length and number");
|
||||
assert_valid_value("margin-left", "calc(2 * 2px)", "4px",
|
||||
"multiplication of number and length");
|
||||
assert_invalid_value("margin-left", "calc(2px * 1px)",
|
||||
"multiplication of length and length");
|
||||
|
||||
}
|
||||
|
||||
run();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<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>
|
||||
span {
|
||||
background: green;
|
||||
color: green;
|
||||
top: 0; bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
div {
|
||||
background: red;
|
||||
color: red;
|
||||
position: relative;
|
||||
height: 10ch;
|
||||
width: 5ch;
|
||||
float: left;
|
||||
}
|
||||
|
||||
div + div {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
div + div span {
|
||||
width: 5ch;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div><span>00000</span></div>
|
||||
<div><span></span>00000</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Values and Units Test: the ch unit in vertical orientation</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">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#block-flow">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
|
||||
<link rel="match" href="reference/ch-unit-002-ref.html">
|
||||
<meta name="assert" content="In vertical upright, the ch unit is equal to the used vertical advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it.">
|
||||
<style>
|
||||
span {
|
||||
background: green;
|
||||
color: green;
|
||||
left: 0; right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
div {
|
||||
background: red;
|
||||
color: red;
|
||||
position: relative;
|
||||
height: 5ch;
|
||||
width: 10ch;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
}
|
||||
|
||||
div + div {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div + div span {
|
||||
height: 5ch;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div><span>00000</span></div>
|
||||
<div><span></span>00000</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<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>
|
||||
span {
|
||||
background: green;
|
||||
color: green;
|
||||
left: 0; right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
div {
|
||||
background: red;
|
||||
color: red;
|
||||
position: relative;
|
||||
height: 5ch;
|
||||
width: 10ch;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
}
|
||||
|
||||
div + div {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div + div span {
|
||||
height: 5ch;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div><span>00000</span></div>
|
||||
<div><span></span>00000</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<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>
|
||||
span {
|
||||
background: green;
|
||||
color: green;
|
||||
left: 0; right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
div {
|
||||
background: red;
|
||||
color: red;
|
||||
position: relative;
|
||||
height: 5ch;
|
||||
width: 10ch;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: sideways;
|
||||
}
|
||||
|
||||
div + div {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div + div span {
|
||||
height: 5ch;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div><span>00000</span></div>
|
||||
<div><span></span>00000</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Viewports units are supported in transform properties (iframe)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
Viewports units are supported in transform properties (translate)
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-2d-transforms/#css-values">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; overflow: hidden; }
|
||||
|
||||
html { background: green; }
|
||||
#target, #over-target {
|
||||
position: absolute; top: 0px; left: 0px;
|
||||
width: 100px; height: 100px;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
#target {
|
||||
background: red;
|
||||
transform-origin: 200px 200px;
|
||||
}
|
||||
|
||||
#over-target {
|
||||
background: green;
|
||||
transform-origin: 50vw 50vh;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target"></div>
|
||||
<div id="over-target"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Viewports units are supported in transform properties (iframe)
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
Viewports units are supported in transform properties (translate)
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-2d-transforms/#css-values">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; overflow: hidden; }
|
||||
|
||||
html { background: green; }
|
||||
#target, #over-target {
|
||||
position: absolute; top: 0px; left: 0px;
|
||||
width: 100px; height: 100px;
|
||||
}
|
||||
|
||||
#target {
|
||||
background: red;
|
||||
transform: translate(200px, 200px);
|
||||
}
|
||||
|
||||
#over-target {
|
||||
background: green;
|
||||
transform: translate(50vw, 50vh);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target"></div>
|
||||
<div id="over-target"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!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/#attr-notation"/>
|
||||
|
||||
<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; red; width: 100%; height: 100%; }
|
||||
#outer { background: red; background-color: initial; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Viewport units are interpolated correctly (reference rendering)
|
||||
</title>
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: white; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
|
||||
#outer { width: 200px; height: 200px; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<html style="background: green"></html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Values and Units Test Reference File</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<style>
|
||||
svg { width: 10ch; }
|
||||
</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>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Values and Units Test Reference File</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<style>
|
||||
svg {
|
||||
width: 10ch;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
}
|
||||
</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>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
|
||||
<title>CSS Reference File</title>
|
||||
<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
|
||||
|
||||
#frameTest { width: 600px; height: 200px; border: 1px solid #000; }
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var height = 200;
|
||||
|
||||
function resizeReference() {
|
||||
|
||||
var frameTest = document.getElementById('frameTest');
|
||||
|
||||
// let's resize the iframe vertically only, showing that the vh sizes is not updated.
|
||||
if (height <= 300) {
|
||||
|
||||
//frameTest.style.width = height++ + "px";
|
||||
frameTest.style.height = height++ + "px";
|
||||
|
||||
setTimeout(resizeReference, 10);
|
||||
|
||||
} else {
|
||||
|
||||
// uncomment the next line to see how a width resize triggers a layout recalculation
|
||||
//frameTest.style.width = (parseInt(window.getComputedStyle(document.getElementById('frameTest'))['width'], 10) + 1) + "px";
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
setTimeout(resizeReference, 10);
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iframe id="frameTest" src="vh_not_refreshing_on_chrome_iframe-ref.html" frameborder="0"></iframe>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
|
||||
<title>CSS Reference File</title>
|
||||
<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
|
||||
|
||||
#testBoxWithVhOnly { background: #F00; width: 60px; float: left; }
|
||||
#testBoxNotGrownHorizontallyByJS { background: #F0F; height: 60px; float: left; }
|
||||
#testBoxWithTransition { background: #FF0; width: 40px; height: 40px; float: left; }
|
||||
#referenceBoxGrownHorizontallyByJS { background: #0F0; height: 40px; float: left; }
|
||||
|
||||
p { clear: both; margin: 10px 0; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
All boxes should end up the same size. The green box is the reference one.
|
||||
</p>
|
||||
|
||||
<div id="testBoxWithVhOnly"></div>
|
||||
<div id="testBoxNotGrownHorizontallyByJS"></div>
|
||||
<div id="testBoxWithTransition"></div>
|
||||
<div id="referenceBoxGrownHorizontallyByJS"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
// In case this file was opened by mistake, redirects to proper test
|
||||
if (window.top.location.href === document.location.href) {
|
||||
|
||||
window.top.location.href = "vh_not_refreshing_on_chrome-ref.html";
|
||||
|
||||
}
|
||||
|
||||
function setDimension(id, dimension, value) {
|
||||
|
||||
var element = document.getElementById(id);
|
||||
|
||||
element.style[dimension] = value + "px";
|
||||
|
||||
}
|
||||
|
||||
function animate() {
|
||||
|
||||
var viewportHeight = document.documentElement.clientHeight;
|
||||
|
||||
var sizeH = 20;
|
||||
|
||||
var referenceDimension = Math.round(sizeH * viewportHeight / 100);
|
||||
|
||||
setDimension('testBoxWithVhOnly', 'height', referenceDimension);
|
||||
setDimension('testBoxNotGrownHorizontallyByJS', 'width', referenceDimension);
|
||||
setDimension('testBoxWithTransition', 'width', referenceDimension);
|
||||
setDimension('testBoxWithTransition', 'height', referenceDimension);
|
||||
setDimension('referenceBoxGrownHorizontallyByJS', 'width', referenceDimension);
|
||||
setDimension('referenceBoxGrownHorizontallyByJS', 'height', referenceDimension);
|
||||
|
||||
setTimeout(animate, 20);
|
||||
}
|
||||
|
||||
setTimeout(animate, 20);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 224 B |
Binary file not shown.
|
After Width: | Height: | Size: 218 B |
Binary file not shown.
|
After Width: | Height: | Size: 217 B |
28
tests/wpt/web-platform-tests/css/css-values-3/support/README
Normal file
28
tests/wpt/web-platform-tests/css/css-values-3/support/README
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
CSS Global Support Directory
|
||||
============================
|
||||
|
||||
This directory contains common support files (such as images and external
|
||||
style sheets). These are sync'ed into the support directories of all our
|
||||
test suites. If you have test-suite-specific support files, please add
|
||||
them to the appropriate test-suite-specific support/ directory.
|
||||
|
||||
If you add to a support/ directory, please run the tools/supportprop.py
|
||||
script from the top of the repository to cascade support files into the
|
||||
lower-level support directories.
|
||||
|
||||
Description of the Common Support File Collection
|
||||
-------------------------------------------------
|
||||
|
||||
The 1x1-* images are all exactly one pixel.
|
||||
|
||||
The swatch-* images all use 15x15 cells.
|
||||
|
||||
The square-* images all use 15x15 cells with one pixel borders.
|
||||
|
||||
The pattern-* images use cells of various sizes:
|
||||
|
||||
pattern-grg-rgr-grg.png 20x20
|
||||
pattern-rgr-grg-rgr.png 20x20
|
||||
pattern-tr.png 15x15
|
||||
pattern-grg-rrg-rgg.png 15x15
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
.a { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.b { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.c { color: red; }
|
||||
BIN
tests/wpt/web-platform-tests/css/css-values-3/support/cat.png
Normal file
BIN
tests/wpt/web-platform-tests/css/css-values-3/support/cat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
.import { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.import { color: red; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 222 B |
Binary file not shown.
|
After Width: | Height: | Size: 231 B |
Binary file not shown.
|
After Width: | Height: | Size: 223 B |
Binary file not shown.
|
After Width: | Height: | Size: 137 B |
Binary file not shown.
|
After Width: | Height: | Size: 691 B |
Binary file not shown.
|
After Width: | Height: | Size: 671 B |
Binary file not shown.
|
After Width: | Height: | Size: 760 B |
Binary file not shown.
|
After Width: | Height: | Size: 757 B |
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
Binary file not shown.
|
After Width: | Height: | Size: 78 B |
|
|
@ -0,0 +1,4 @@
|
|||
The swatch-green.png file in this directory is really a RED swatch,
|
||||
and the swatch-red.png file is really a green swatch.
|
||||
|
||||
This directory is used to test relative URIs.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 156 B |
Binary file not shown.
|
After Width: | Height: | Size: 85 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 180 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Viewport units are supported inside calc expressions.
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
Check that viewport units add correctly to percentages in calc() expressions
|
||||
" />
|
||||
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: red; }
|
||||
#target { position: absolute; background: green; width: calc(100vw + 50%); height: calc(100vh + 50%); top: -50%; left: -50%; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Viewport units are supported inside calc expressions.
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
Check that viewport units add correctly to pixels in calc() expressions
|
||||
" />
|
||||
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/>
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: red; }
|
||||
#target { position: absolute; background: green; width: calc(100vw + 50px); height: calc(100vh + 50px); top: -50px; left: -50px; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
0vh and 0vw are correctly treated as 0px
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
0vh and 0vw are correctly treated as 0px
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: red; font-size: 100vw; }
|
||||
#target { background: green; width: 1rem; height: 1em; font-size: 100vh; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Viewport units are inherited properly
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
Viewport units are inherited properly
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: red; }
|
||||
#outer { position: relative; background: green; width: 50vw; height: 100vh; }
|
||||
#inner { position: absolute; background: green; left: 100%; width: inherit; height: inherit; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Viewport units are interpolated correctly
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animations"/>
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
@keyframes anim {
|
||||
from { width: 0%; height: 0%; }
|
||||
to { width: 200vw; height: 200vh; }
|
||||
}
|
||||
|
||||
html, body { margin: 0px; padding: 0px; height: 100%; }
|
||||
|
||||
html { background: red; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
#outer { animation: anim 2000000s; animation-delay: -1000000s; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Viewport units are interpolated correctly
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animations"/>
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
@keyframes anim {
|
||||
from { width: 0px; height: 0px; }
|
||||
to { width: 200vw; height: 200vh; }
|
||||
}
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: red; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
#outer { animation: anim 2000000s; animation-delay: -1000000s; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Viewport units are interpolated correctly
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw)
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-animations/#animations"/>
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
@keyframes anim {
|
||||
from { width: 75vw; height: 75vh; }
|
||||
to { width: 125vw; height: 125vh; }
|
||||
}
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: red; overflow: hidden; }
|
||||
#outer { position: relative; background: green; }
|
||||
#outer { animation: anim 2000000s; animation-delay: -1000000s; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Viewports units are supported in @viewport rules
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
Viewports units are supported in @viewport rules
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/>
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-device-adapt-1/" />
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; overflow: hidden; }
|
||||
|
||||
@viewport { width: 1vw; }
|
||||
|
||||
html { background: red; }
|
||||
#target { background: green; width: 100vw; height: 100vh; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Viewports units are supported in margin properties
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
Viewports units are supported in margin properties
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: green; }
|
||||
#target { background: red; width: 100%; height: 100%; margin-left: -100vw; margin-top: -100vh; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Viewports units are supported in transform properties
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
Viewports units are supported in transform properties
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-2d-transforms/#css-values">
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; overflow: hidden; }
|
||||
|
||||
html { background: green; }
|
||||
iframe { width: 400px; height: 400px; margin: 0px; padding: 0px; border: 0px none transparent; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iframe src="iframe/vh-support-transform-origin-iframe.html"></iframe>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Viewports units are supported in transform properties
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
Viewports units are supported in transform properties (translate)
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-2d-transforms/#css-values">
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; overflow: hidden; }
|
||||
|
||||
html { background: green; }
|
||||
iframe { width: 400px; height: 400px; margin: 0px; padding: 0px; border: 0px none transparent; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iframe src="iframe/vh-support-transform-translate-iframe.html"></iframe>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Viewports units are supported in sizing properties
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
Viewports units are supported in sizing properties
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
#target { background: green; width: 100vw; height: 100vh; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
0vh and 0vw are correctly treated as 0px
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
0vh and 0vw are correctly treated as 0px
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: green; }
|
||||
#target { background: red; width: 0vw; height: 0vh; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!-- Submitted from TestTWF Paris -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Values and Units Test: vh-based dimension doesn't change when the element's other dimension doesn't change.</title>
|
||||
<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
||||
<link rel="match" href="reference/vh_not_refreshing_on_chrome-ref.html">
|
||||
<meta name="assert" content="vh-based dimension doesn't change when the element's other dimension doesn't change.">
|
||||
<!-- This test exhibits a bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8 -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
|
||||
|
||||
#frameTest { width: 600px; height: 200px; border: 1px solid #000; }
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var height = 200;
|
||||
|
||||
function resizeReference() {
|
||||
|
||||
var frameTest = document.getElementById('frameTest');
|
||||
|
||||
// let's resize the iframe vertically only, showing that the vh sizes is not updated.
|
||||
if (height <= 300) {
|
||||
|
||||
//frameTest.style.width = height++ + "px";
|
||||
frameTest.style.height = height++ + "px";
|
||||
|
||||
setTimeout(resizeReference, 10);
|
||||
|
||||
} else {
|
||||
|
||||
// uncomment the next line to see how a width resize triggers a layout recalculation
|
||||
//frameTest.style.width = (parseInt(window.getComputedStyle(document.getElementById('frameTest'))['width'], 10) + 1) + "px";
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
setTimeout(resizeReference, 10);
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iframe id="frameTest" src="vh_not_refreshing_on_chrome_iframe.html" frameborder="0"></iframe>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
|
||||
<title>CSS Values and Units Test: vh-based dimension doesn't change when the element other dimension doesn't change.</title>
|
||||
<meta name="assert" content="vh-based dimension doesn't change when the element other dimension doesn't change. Bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8">
|
||||
<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" title="5.1.2. Viewport-percentage lengths: the 'vw', 'vh', 'vmin', 'vmax' units">
|
||||
<link rel="match" href="reference/vh_not_refreshing_on_chrome-ref.html">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
|
||||
|
||||
/* the first test box has its vertical dimension is set to some vh units */
|
||||
#testBoxWithVhOnly { background: #F00; width: 60px; height: 20vh; float: left; }
|
||||
|
||||
/* the second test box, with fixed height */
|
||||
#testBoxNotGrownHorizontallyByJS { background: #F0F; width: 20vh; height: 60px; float: left; }
|
||||
|
||||
/* third box, changed by using CSS transition */
|
||||
#testBoxWithTransition { background: #FF0; width: 20vh; height: 40px; float: left;
|
||||
transition-property: width, height;
|
||||
transition-duration: 1.5s;
|
||||
transition-delay: 0;
|
||||
}
|
||||
|
||||
/* the reference box, growing in both directions (height by js, width by vh unit */
|
||||
#referenceBoxGrownHorizontallyByJS { background: #0F0; width: 20vh; height: 40px; float: left; }
|
||||
|
||||
p { clear: both; margin: 10px 0; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
All boxes should end up the same size. The green box is the reference one.
|
||||
</p>
|
||||
|
||||
<div id="testBoxWithVhOnly"></div>
|
||||
<div id="testBoxNotGrownHorizontallyByJS"></div>
|
||||
<div id="testBoxWithTransition"></div>
|
||||
<div id="referenceBoxGrownHorizontallyByJS"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
// In case this file was opened by mistake, redirects to proper test
|
||||
if (window.top.location.href === document.location.href) {
|
||||
|
||||
window.top.location.href = "vh_not_refreshing_on_chrome.html";
|
||||
|
||||
}
|
||||
|
||||
function setDimension(id, dimension, value) {
|
||||
|
||||
var element = document.getElementById(id);
|
||||
|
||||
element.style[dimension] = value + "px";
|
||||
|
||||
}
|
||||
|
||||
function animate() {
|
||||
|
||||
var viewportHeight = document.documentElement.clientHeight;
|
||||
|
||||
var sizeH = 20;
|
||||
|
||||
var referenceDimension = Math.round(sizeH * viewportHeight / 100);
|
||||
|
||||
setDimension('referenceBoxGrownHorizontallyByJS', 'height', referenceDimension);
|
||||
|
||||
setTimeout(animate, 20);
|
||||
}
|
||||
|
||||
setTimeout(animate, 20);
|
||||
|
||||
var transitionedTestBoxStyle = document.getElementById('testBoxWithTransition').style;
|
||||
transitionedTestBoxStyle.height = "60px";
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<title>CSS Values and Units Test: Viewport units in scaled viewport</title>
|
||||
<meta name="assert" content="viewport relative units scale with viewport.">
|
||||
<link rel="author" title="Emil A Eklund" href="mailto:eae@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
iframe { border: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<iframe id="testFrame" src="javascript:void(0)"></iframe>
|
||||
<script>
|
||||
test(function() {
|
||||
var frameElement = document.getElementById('testFrame');
|
||||
var frameDocument = frameElement.contentDocument;
|
||||
|
||||
var testElement = frameDocument.createElement('div');
|
||||
testElement.style.width = '50vw';
|
||||
testElement.style.height = '50vh';
|
||||
testElement.style.position = 'absolute';
|
||||
testElement.style.left = '0';
|
||||
testElement.style.top = '0';
|
||||
testElement.style.backgroundColor = 'black';
|
||||
frameDocument.body.appendChild(testElement);
|
||||
|
||||
var frameWidth = frameElement.getBoundingClientRect().width;
|
||||
var frameHeight = frameElement.getBoundingClientRect().height;
|
||||
for (var i = 1; i <= 200; i++) {
|
||||
var scale = i / 100;
|
||||
frameDocument.body.style.transform = 'scale(' + scale + ')';
|
||||
var rect = testElement.getBoundingClientRect();
|
||||
var actualWidth = rect.width;
|
||||
var actualHeight = rect.height;
|
||||
var expectedWidth = frameWidth * scale / 2;
|
||||
var expectedHeight = frameHeight * scale / 2;
|
||||
|
||||
assert_approx_equals(actualWidth, expectedWidth, 0.1, '50vw at ' + scale + ' scale');
|
||||
assert_approx_equals(actualHeight, expectedHeight, 0.1, '50vh at ' + scale + ' scale');
|
||||
}
|
||||
}, 'viewport relative units in scaled viewport');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>
|
||||
CSS Values and Units Test:
|
||||
Checks viewport units against CSS 2.1 properties and the CSSOM
|
||||
</title>
|
||||
<meta name="assert" content="Testing what happens when one applies and rereads viewport unit lengths to CSS 2.1 properties that accept length values" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="Christian Schaefer"
|
||||
href="mailto:schaepp@gmx.de"
|
||||
/ >
|
||||
|
||||
<!-- You must have at least one spec link, but may have as many as are covered in the test. -->
|
||||
<!-- Be sure to make the main testing area first in the order -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
|
||||
|
||||
<!-- testharness inclusion for later submission -->
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<!-- testharness fallback for local testing -->
|
||||
<script>
|
||||
window.test || document.write('\
|
||||
<script src="http://www.w3c-test.org/resources/testharness.js"><\/script>\
|
||||
<script src="http://www.w3c-test.org/resources/testharnessreport.js"><\/script>\
|
||||
');
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
#div {
|
||||
position: relative;
|
||||
width: 50vw;
|
||||
height: 10vw;
|
||||
background: green;
|
||||
border: 0 green solid;
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
#table td {
|
||||
border: 1px solid green;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
|
||||
<p>
|
||||
Checks viewport units. Also re-check with zoom in/out.
|
||||
</p>
|
||||
|
||||
<div id="div">
|
||||
Test the Web Forward!
|
||||
</div>
|
||||
|
||||
<table id="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td id="td">Test</td>
|
||||
<td>T</td>
|
||||
<td>W</td>
|
||||
<td>F</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
|
||||
/* Boilerplate code */
|
||||
|
||||
var camelize = function (str) {
|
||||
return str.replace(/\-(\w)/g, function(str, letter){
|
||||
return letter.toUpperCase();
|
||||
});
|
||||
};
|
||||
|
||||
var retrieveComputedStyle = function(element,property){
|
||||
var result =
|
||||
document
|
||||
.defaultView
|
||||
.getComputedStyle(element,null)
|
||||
.getPropertyValue(property);
|
||||
|
||||
// If there are multiple values, cut down to the first
|
||||
result = result.split(' ')[0];
|
||||
|
||||
if(window.console) console.log('Retrieving ' + property + ' property. Result: ' + result);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
var testit = function(element,vunit,property,expectedResult){
|
||||
|
||||
element.style[camelize(property)] = '0px';
|
||||
element.style[camelize(property)] = lengthAmount + vunit;
|
||||
|
||||
if(window.console) console.log(element.nodeName.toLowerCase() + '.style.' + camelize(property) + ' = ' + lengthAmount + vunit);
|
||||
|
||||
var result = retrieveComputedStyle(element,property);
|
||||
|
||||
// Test against WebKit's getComputedStyle bug, where it does not return absolute values
|
||||
// As required here: http://www.w3.org/TR/1998/REC-CSS2-19980512/cascade.html#computed-value
|
||||
// If it returns a pixel value, but this value is 0px then it is considered a fail, too.
|
||||
var px_result = result.search(/^[-\d\.]+px$/) !== -1 && result !== '0px' ? 'non-zero px-based value' : result;
|
||||
|
||||
// If browser returns pixel value, we compare against our expected pixel value
|
||||
if(px_result === 'non-zero px-based value'){
|
||||
test(function(){
|
||||
assert_equals(Math.round(parseFloat(result.replace(/[^-\d\.]+/g,''))),expectedResult);
|
||||
},vunit + ' length applied to ' + property);
|
||||
}
|
||||
// If not, we compare against the value we set initially
|
||||
else {
|
||||
test(function(){
|
||||
assert_equals(result,lengthAmount + vunit);
|
||||
},vunit + ' length applied to ' + property);
|
||||
}
|
||||
|
||||
// Does the browser have a bug in getComputedStyle or not?
|
||||
test(function(){
|
||||
assert_equals(px_result,'non-zero px-based value');
|
||||
},vunit + ' length applied to ' + property + ': getComputedStyle returns a non-zero px-based value');
|
||||
|
||||
element.style[camelize(property)] = '';
|
||||
}
|
||||
|
||||
var lengthAmount = 10;
|
||||
var layoutViewportWidth = document.documentElement.clientWidth;
|
||||
var layoutViewportHeight = document.documentElement.clientHeight;
|
||||
|
||||
var viewportUnits = [
|
||||
{
|
||||
ident: 'vw',
|
||||
expectedResult: Math.round(layoutViewportWidth * (lengthAmount / 100))
|
||||
}
|
||||
,{
|
||||
ident: 'vh',
|
||||
expectedResult: Math.round(layoutViewportHeight * (lengthAmount / 100))
|
||||
}
|
||||
,{
|
||||
ident: 'vmin',
|
||||
expectedResult: layoutViewportWidth < layoutViewportHeight ? Math.round(layoutViewportWidth * (lengthAmount / 100)) : Math.round(layoutViewportHeight * (lengthAmount / 100))
|
||||
}
|
||||
,{
|
||||
ident: 'vmax',
|
||||
expectedResult: layoutViewportWidth > layoutViewportHeight ? Math.round(layoutViewportWidth * (lengthAmount / 100)) : Math.round(layoutViewportHeight * (lengthAmount / 100))
|
||||
}
|
||||
]
|
||||
|
||||
// List of length accepting properties and which element they map to
|
||||
// http://www.w3.org/TR/CSS21/propidx.html
|
||||
var lengthAcceptingProperties = [
|
||||
{
|
||||
name: 'width',
|
||||
element: 'div'
|
||||
}
|
||||
,{
|
||||
name: 'height',
|
||||
element: 'div'
|
||||
}
|
||||
,{
|
||||
name: 'min-width',
|
||||
element: 'div'
|
||||
}
|
||||
,{
|
||||
name: 'min-height',
|
||||
element: 'div'
|
||||
}
|
||||
,{
|
||||
name: 'max-width',
|
||||
element: 'div'
|
||||
}
|
||||
,{
|
||||
name: 'max-height',
|
||||
element: 'div'
|
||||
}
|
||||
,{
|
||||
name: 'margin-top',
|
||||
element: 'div'
|
||||
}
|
||||
,{
|
||||
name: 'padding-top',
|
||||
element: 'div'
|
||||
}
|
||||
,{
|
||||
name: 'border-top-width',
|
||||
element: 'div'
|
||||
}
|
||||
,{
|
||||
name: 'font-size',
|
||||
element: 'div'
|
||||
}
|
||||
,{
|
||||
name: 'line-height',
|
||||
element: 'div'
|
||||
}
|
||||
,{
|
||||
name: 'border-spacing',
|
||||
element: 'table'
|
||||
}
|
||||
,{
|
||||
name: 'top',
|
||||
element: 'div'
|
||||
}
|
||||
,{
|
||||
name: 'right',
|
||||
element: 'div'
|
||||
}
|
||||
,{
|
||||
name: 'bottom',
|
||||
element: 'div'
|
||||
}
|
||||
,{
|
||||
name: 'left',
|
||||
element: 'div'
|
||||
}
|
||||
,{
|
||||
name: 'letter-spacing',
|
||||
element: 'div'
|
||||
}
|
||||
,{
|
||||
name: 'text-indent',
|
||||
element: 'div'
|
||||
}
|
||||
,{
|
||||
name: 'vertical-align',
|
||||
element: 'td'
|
||||
}
|
||||
,{
|
||||
name: 'word-spacing',
|
||||
element: 'div'
|
||||
}
|
||||
];
|
||||
|
||||
var div = document.getElementById('div');
|
||||
var table = document.getElementById('table');
|
||||
var td = document.getElementById('td');
|
||||
|
||||
for(unitEntry in viewportUnits){
|
||||
for(propertyEntry in lengthAcceptingProperties){
|
||||
|
||||
var vunit = viewportUnits[unitEntry].ident;
|
||||
var expectedResult = viewportUnits[unitEntry].expectedResult;
|
||||
var property = lengthAcceptingProperties[propertyEntry].name;
|
||||
var element = window[lengthAcceptingProperties[propertyEntry].element];
|
||||
|
||||
testit(element,vunit,property,expectedResult);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue