mirror of
https://github.com/servo/servo.git
synced 2025-10-04 02:29:12 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
6
tests/wpt/web-platform-tests/css/css-values/OWNERS
Normal file
6
tests/wpt/web-platform-tests/css/css-values/OWNERS
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@frivoal
|
||||
@dbaron
|
||||
@FremyCompany
|
||||
@plinss
|
||||
@tabatkins
|
||||
@fantasai
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>absolute length units test</title>
|
||||
<meta name="author" title="Hwanseung Lee" href="mailto:hs1217.lee@samsung.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-3/#absolute-lengths"/>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#t1 { width: 96px; height: 2.54cm; }
|
||||
#t2 { width: 2.54cm; height: 25.4mm; }
|
||||
#t3 { width: 25.4mm; height: 101.6q; }
|
||||
#t4 { width: 101.6q; height: 1in; }
|
||||
#t5 { width: 1in; height: 6pc; }
|
||||
#t6 { width: 6pc; height: 72pt; }
|
||||
#t7 { width: 72pt; height: 96px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="t1"> </div>
|
||||
<div id="t2"> </div>
|
||||
<div id="t3"> </div>
|
||||
<div id="t4"> </div>
|
||||
<div id="t5"> </div>
|
||||
<div id="t6"> </div>
|
||||
<div id="t7"> </div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var test_items = ["t1", "t2", "t3", "t4", "t5", "t6", "t7"]
|
||||
|
||||
function getPropertyValue(id, property) {
|
||||
var elem = document.getElementById(id);
|
||||
return window.getComputedStyle(elem, null).getPropertyValue(property);
|
||||
}
|
||||
|
||||
test(function(){
|
||||
for (var i = 0; i < test_items.length; i++) {
|
||||
assert_equals(getPropertyValue(test_items[i], "width"), getPropertyValue(test_items[i], "height"));
|
||||
}
|
||||
}, "all width and height should be same");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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,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>
|
||||
37
tests/wpt/web-platform-tests/css/css-values/ch-unit-001.html
Normal file
37
tests/wpt/web-platform-tests/css/css-values/ch-unit-001.html
Normal file
|
|
@ -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>
|
||||
39
tests/wpt/web-platform-tests/css/css-values/ch-unit-002.html
Normal file
39
tests/wpt/web-platform-tests/css/css-values/ch-unit-002.html
Normal file
|
|
@ -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>
|
||||
38
tests/wpt/web-platform-tests/css/css-values/ch-unit-003.html
Normal file
38
tests/wpt/web-platform-tests/css/css-values/ch-unit-003.html
Normal file
|
|
@ -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>
|
||||
38
tests/wpt/web-platform-tests/css/css-values/ch-unit-004.html
Normal file
38
tests/wpt/web-platform-tests/css/css-values/ch-unit-004.html
Normal file
|
|
@ -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,11 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test Reference</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<style>
|
||||
div {
|
||||
width: 2ex;
|
||||
height: 2ex;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Calc expression using multiple ex operands</title>
|
||||
<link rel="match" href="ex-calc-expression-001-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values/#funcdef-calc">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<style>
|
||||
/*
|
||||
This is a regression test for:
|
||||
https://github.com/servo/servo/pull/18807
|
||||
https://bugzilla.mozilla.org/show_bug.cgi?id=1407092
|
||||
*/
|
||||
div {
|
||||
width: calc(1ex + 1ex);
|
||||
height: calc(1ex + 1ex);
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
36
tests/wpt/web-platform-tests/css/css-values/ic-unit-001.html
Normal file
36
tests/wpt/web-platform-tests/css/css-values/ic-unit-001.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Values and Units Test: support for the ic unit</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#font-relative-lengths">
|
||||
<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>
|
||||
span {
|
||||
background: green;
|
||||
color: green;
|
||||
top: 0; bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
div {
|
||||
background: red;
|
||||
color: red;
|
||||
position: relative;
|
||||
height: 10ic;
|
||||
width: 5ic;
|
||||
float: left;
|
||||
}
|
||||
|
||||
div + div {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
div + div span {
|
||||
width: 5ic;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div><span>水水水水水</span></div>
|
||||
<div><span></span>水水水水水</div>
|
||||
</body>
|
||||
39
tests/wpt/web-platform-tests/css/css-values/ic-unit-002.html
Normal file
39
tests/wpt/web-platform-tests/css/css-values/ic-unit-002.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Values and Units Test: the ic 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-4/#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/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>
|
||||
span {
|
||||
background: green;
|
||||
color: green;
|
||||
left: 0; right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
div {
|
||||
background: red;
|
||||
color: red;
|
||||
position: relative;
|
||||
height: 5ic;
|
||||
width: 10ic;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
}
|
||||
|
||||
div + div {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div + div span {
|
||||
height: 5ic;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div><span>水水水水水</span></div>
|
||||
<div><span></span>水水水水水</div>
|
||||
</body>
|
||||
39
tests/wpt/web-platform-tests/css/css-values/ic-unit-003.html
Normal file
39
tests/wpt/web-platform-tests/css/css-values/ic-unit-003.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Values and Units Test: the ic 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-4/#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/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>
|
||||
span {
|
||||
background: green;
|
||||
color: green;
|
||||
left: 0; right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
div {
|
||||
background: red;
|
||||
color: red;
|
||||
position: relative;
|
||||
height: 5ic;
|
||||
width: 10ic;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
}
|
||||
|
||||
div + div {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div + div span {
|
||||
height: 5ic;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div><span>水水水水水</span></div>
|
||||
<div><span></span>水水水水水</div>
|
||||
</body>
|
||||
39
tests/wpt/web-platform-tests/css/css-values/ic-unit-004.html
Normal file
39
tests/wpt/web-platform-tests/css/css-values/ic-unit-004.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Values and Units Test: the ic 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-4/#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/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>
|
||||
span {
|
||||
background: green;
|
||||
color: green;
|
||||
left: 0; right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
div {
|
||||
background: red;
|
||||
color: red;
|
||||
position: relative;
|
||||
height: 5ic;
|
||||
width: 10ic;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: sideways;
|
||||
}
|
||||
|
||||
div + div {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div + div span {
|
||||
height: 5ic;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div><span>水水水水水</span></div>
|
||||
<div><span></span>水水水水水</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,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: 10ic; }
|
||||
</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: 10ic;
|
||||
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,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
|
||||
<title>CSS Reference File</title>
|
||||
<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<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">
|
||||
'use strict';
|
||||
|
||||
// We must not capture the screen until the frameTest
|
||||
// and testBoxWithVhOnly elements have finished changing height.
|
||||
var elementsPending = 2;
|
||||
function receiveMessage() {
|
||||
if (--elementsPending === 0) {
|
||||
takeScreenshot();
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('message', receiveMessage, false);
|
||||
|
||||
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";
|
||||
|
||||
window.postMessage('frameTest', '*');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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,79 @@
|
|||
<!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">
|
||||
'use strict';
|
||||
|
||||
// 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);
|
||||
|
||||
if (referenceDimension < 60) {
|
||||
setTimeout(animate, 20);
|
||||
} else {
|
||||
parent.postMessage('testBoxWithVhOnly', '*');
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(animate, 20);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
BIN
tests/wpt/web-platform-tests/css/css-values/support/1x1-lime.png
Normal file
BIN
tests/wpt/web-platform-tests/css/css-values/support/1x1-lime.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
BIN
tests/wpt/web-platform-tests/css/css-values/support/1x1-navy.png
Normal file
BIN
tests/wpt/web-platform-tests/css/css-values/support/1x1-navy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
BIN
tests/wpt/web-platform-tests/css/css-values/support/1x1-red.png
Normal file
BIN
tests/wpt/web-platform-tests/css/css-values/support/1x1-red.png
Normal file
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/support/README
Normal file
28
tests/wpt/web-platform-tests/css/css-values/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/support/cat.png
Normal file
BIN
tests/wpt/web-platform-tests/css/css-values/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 |
BIN
tests/wpt/web-platform-tests/css/css-values/support/test-bl.png
Normal file
BIN
tests/wpt/web-platform-tests/css/css-values/support/test-bl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
tests/wpt/web-platform-tests/css/css-values/support/test-br.png
Normal file
BIN
tests/wpt/web-platform-tests/css/css-values/support/test-br.png
Normal file
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 |
BIN
tests/wpt/web-platform-tests/css/css-values/support/test-tl.png
Normal file
BIN
tests/wpt/web-platform-tests/css/css-values/support/test-tl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
BIN
tests/wpt/web-platform-tests/css/css-values/support/test-tr.png
Normal file
BIN
tests/wpt/web-platform-tests/css/css-values/support/test-tr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,89 @@
|
|||
<!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>
|
||||
|
||||
<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: 0.3s;
|
||||
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">
|
||||
'use strict';
|
||||
|
||||
// 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);
|
||||
|
||||
if (referenceDimension < 60) {
|
||||
setTimeout(animate, 20);
|
||||
} else {
|
||||
parent.postMessage('referenceBoxGrownHorizontallyByJS', '*');
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(animate, 20);
|
||||
|
||||
addEventListener('transitionend', function() {
|
||||
parent.postMessage('testBoxWithTransition', '*');
|
||||
}, false);
|
||||
var transitionedTestBoxStyle = document.getElementById('testBoxWithTransition').style;
|
||||
transitionedTestBoxStyle.height = "60px";
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Storage of "unset" value</title>
|
||||
<meta name="author" title="Xidorn Quan" href="https://www.upsuper.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-3/#common-keywords"/>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div {
|
||||
color: unset;
|
||||
border: unset;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
let properties = ["color", "border", "border-left", "border-color", "border-right-style"];
|
||||
let style = document.styleSheets[0].cssRules[0].style;
|
||||
for (let prop of properties) {
|
||||
assert_equals(style.getPropertyValue(prop), "unset", `${prop} is expected to be "unset"`);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -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>
|
||||
42
tests/wpt/web-platform-tests/css/css-values/vh-inherit.html
Normal file
42
tests/wpt/web-platform-tests/css/css-values/vh-inherit.html
Normal file
|
|
@ -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>
|
||||
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