diff options
Diffstat (limited to 'layout/reftests/w3c-css/received/css-values-3')
84 files changed, 1744 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-cast.html b/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-cast.html new file mode 100644 index 0000000000..d538eebdd9 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-cast.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-fallback.html b/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-fallback.html new file mode 100644 index 0000000000..92258893b9 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-fallback.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-color-valid.html b/layout/reftests/w3c-css/received/css-values-3/attr-color-valid.html new file mode 100644 index 0000000000..8817e6b94c --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-color-valid.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-001.html b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-001.html new file mode 100644 index 0000000000..a56c144c3f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-001.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-002.html b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-002.html new file mode 100644 index 0000000000..69766c0e11 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-002.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-003.html b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-003.html new file mode 100644 index 0000000000..69766c0e11 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-003.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-cast.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-cast.html new file mode 100644 index 0000000000..9308323636 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-cast.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-fallback.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-fallback.html new file mode 100644 index 0000000000..6a5d4dfe68 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-fallback.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero-nofallback.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero-nofallback.html new file mode 100644 index 0000000000..b8a042fd40 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero-nofallback.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero.html new file mode 100644 index 0000000000..fcdebc6fad --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-valid.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid.html new file mode 100644 index 0000000000..c78258ffe6 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-cast.html b/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-cast.html new file mode 100644 index 0000000000..93b2d21827 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-cast.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-fallback.html b/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-fallback.html new file mode 100644 index 0000000000..778697d0d1 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-fallback.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-px-valid.html b/layout/reftests/w3c-css/received/css-values-3/attr-px-valid.html new file mode 100644 index 0000000000..ec96924a68 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-px-valid.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-in-calc.html b/layout/reftests/w3c-css/received/css-values-3/calc-in-calc.html new file mode 100644 index 0000000000..3e035fecfd --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/calc-in-calc.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-001.html b/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-001.html new file mode 100644 index 0000000000..af59969635 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-001.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-002.html b/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-002.html new file mode 100644 index 0000000000..4b7d7c8703 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-002.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-invalid-range-clamping.html b/layout/reftests/w3c-css/received/css-values-3/calc-invalid-range-clamping.html new file mode 100644 index 0000000000..a88416a2c2 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/calc-invalid-range-clamping.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-parenthesis-stack.html b/layout/reftests/w3c-css/received/css-values-3/calc-parenthesis-stack.html new file mode 100644 index 0000000000..1d9033d7ee --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/calc-parenthesis-stack.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/ch-unit-001.html b/layout/reftests/w3c-css/received/css-values-3/ch-unit-001.html new file mode 100644 index 0000000000..8bb0b893c5 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/ch-unit-001.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/initial-background-color.html b/layout/reftests/w3c-css/received/css-values-3/initial-background-color.html new file mode 100644 index 0000000000..f382266517 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/initial-background-color.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/200-200-green.html b/layout/reftests/w3c-css/received/css-values-3/reference/200-200-green.html new file mode 100644 index 0000000000..f3da3ddb3b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/reference/200-200-green.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/all-green.html b/layout/reftests/w3c-css/received/css-values-3/reference/all-green.html new file mode 100644 index 0000000000..c70532129a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/reference/all-green.html @@ -0,0 +1 @@ +<html style="background: green"></html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-001-ref.html b/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-001-ref.html new file mode 100644 index 0000000000..499d430940 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-001-ref.html @@ -0,0 +1,18 @@ +<!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/"> +<meta name="flags" content=""> +<style> +div { + background: green; + height: 10ch; + width: 10ch; + float: left; +} + +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> +</body> diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/vh_not_refreshing_on_chrome-ref.html b/layout/reftests/w3c-css/received/css-values-3/reference/vh_not_refreshing_on_chrome-ref.html new file mode 100644 index 0000000000..eb5b15d4aa --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/reference/vh_not_refreshing_on_chrome-ref.html @@ -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> diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-green.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-green.png Binary files differnew file mode 100644 index 0000000000..b98ca0ba0a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-green.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-lime.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-lime.png Binary files differnew file mode 100644 index 0000000000..cb397fb090 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-lime.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-maroon.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-maroon.png Binary files differnew file mode 100644 index 0000000000..3f86b07219 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-maroon.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-navy.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-navy.png Binary files differnew file mode 100644 index 0000000000..9b9a03955b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-navy.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-red.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-red.png Binary files differnew file mode 100644 index 0000000000..6bd73ac101 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-red.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-white.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-white.png Binary files differnew file mode 100644 index 0000000000..dd43faec54 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-white.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/60x60-gg-rr.png b/layout/reftests/w3c-css/received/css-values-3/support/60x60-gg-rr.png Binary files differnew file mode 100644 index 0000000000..84f5b2a4f1 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/60x60-gg-rr.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/60x60-green.png b/layout/reftests/w3c-css/received/css-values-3/support/60x60-green.png Binary files differnew file mode 100644 index 0000000000..b3c8cf3eb4 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/60x60-green.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/60x60-red.png b/layout/reftests/w3c-css/received/css-values-3/support/60x60-red.png Binary files differnew file mode 100644 index 0000000000..823f125b8e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/60x60-red.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/README b/layout/reftests/w3c-css/received/css-values-3/support/README new file mode 100644 index 0000000000..2e5f2ad073 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/README @@ -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 + diff --git a/layout/reftests/w3c-css/received/css-values-3/support/a-green.css b/layout/reftests/w3c-css/received/css-values-3/support/a-green.css new file mode 100644 index 0000000000..b0dbb071d5 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/layout/reftests/w3c-css/received/css-values-3/support/b-green.css b/layout/reftests/w3c-css/received/css-values-3/support/b-green.css new file mode 100644 index 0000000000..a0473f5ca2 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/b-green.css @@ -0,0 +1 @@ +.b { color: green; }
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-values-3/support/c-red.css b/layout/reftests/w3c-css/received/css-values-3/support/c-red.css new file mode 100644 index 0000000000..d4ba5c64e9 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/c-red.css @@ -0,0 +1 @@ +.c { color: red; }
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-values-3/support/cat.png b/layout/reftests/w3c-css/received/css-values-3/support/cat.png Binary files differnew file mode 100644 index 0000000000..85dd732481 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/cat.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/import-green.css b/layout/reftests/w3c-css/received/css-values-3/support/import-green.css new file mode 100644 index 0000000000..537104e663 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/import-green.css @@ -0,0 +1 @@ +.import { color: green; } diff --git a/layout/reftests/w3c-css/received/css-values-3/support/import-red.css b/layout/reftests/w3c-css/received/css-values-3/support/import-red.css new file mode 100644 index 0000000000..9945ef4711 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/import-red.css @@ -0,0 +1 @@ +.import { color: red; } diff --git a/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rgr-grg.png b/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rgr-grg.png Binary files differnew file mode 100644 index 0000000000..9b88fbd811 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rgr-grg.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rrg-rgg.png b/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rrg-rgg.png Binary files differnew file mode 100644 index 0000000000..fcf4f3fd7d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rrg-rgg.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/pattern-rgr-grg-rgr.png b/layout/reftests/w3c-css/received/css-values-3/support/pattern-rgr-grg-rgr.png Binary files differnew file mode 100644 index 0000000000..d454e3a630 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/pattern-rgr-grg-rgr.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/pattern-tr.png b/layout/reftests/w3c-css/received/css-values-3/support/pattern-tr.png Binary files differnew file mode 100644 index 0000000000..8b4b25364e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/pattern-tr.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50%.png b/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50%.png Binary files differnew file mode 100644 index 0000000000..cf2eea6b43 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50%.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50px.png b/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50px.png Binary files differnew file mode 100644 index 0000000000..9f46583665 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50px.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-100px.png b/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-100px.png Binary files differnew file mode 100644 index 0000000000..a837eca222 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-100px.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-50px.png b/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-50px.png Binary files differnew file mode 100644 index 0000000000..8414102802 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-50px.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/square-purple.png b/layout/reftests/w3c-css/received/css-values-3/support/square-purple.png Binary files differnew file mode 100644 index 0000000000..0f522d7872 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/square-purple.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/square-teal.png b/layout/reftests/w3c-css/received/css-values-3/support/square-teal.png Binary files differnew file mode 100644 index 0000000000..e567f51b91 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/square-teal.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/square-white.png b/layout/reftests/w3c-css/received/css-values-3/support/square-white.png Binary files differnew file mode 100644 index 0000000000..5853cbb238 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/square-white.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/support/README b/layout/reftests/w3c-css/received/css-values-3/support/support/README new file mode 100644 index 0000000000..ea8cb9ef35 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/support/README @@ -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.
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-green.png b/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-green.png Binary files differnew file mode 100644 index 0000000000..1caf25c992 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-green.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-red.png b/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-red.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-red.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-blue.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-blue.png Binary files differnew file mode 100644 index 0000000000..bf2759634d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-blue.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-green.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-green.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-green.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-lime.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-lime.png Binary files differnew file mode 100644 index 0000000000..55fd7fdaed --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-lime.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-orange.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-orange.png Binary files differnew file mode 100644 index 0000000000..d3cd498b52 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-orange.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-red.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-red.png Binary files differnew file mode 100644 index 0000000000..1caf25c992 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-red.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-teal.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-teal.png Binary files differnew file mode 100644 index 0000000000..0293ce89de --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-teal.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-white.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-white.png Binary files differnew file mode 100644 index 0000000000..1a7d4323d7 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-white.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-yellow.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-yellow.png Binary files differnew file mode 100644 index 0000000000..1591aa0e2e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-yellow.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-bl.png b/layout/reftests/w3c-css/received/css-values-3/support/test-bl.png Binary files differnew file mode 100644 index 0000000000..904e24e996 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/test-bl.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-br.png b/layout/reftests/w3c-css/received/css-values-3/support/test-br.png Binary files differnew file mode 100644 index 0000000000..f413ff5c1a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/test-br.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-inner-half-size.png b/layout/reftests/w3c-css/received/css-values-3/support/test-inner-half-size.png Binary files differnew file mode 100644 index 0000000000..e473bf80ef --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/test-inner-half-size.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-outer.png b/layout/reftests/w3c-css/received/css-values-3/support/test-outer.png Binary files differnew file mode 100644 index 0000000000..82eeace7fc --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/test-outer.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-tl.png b/layout/reftests/w3c-css/received/css-values-3/support/test-tl.png Binary files differnew file mode 100644 index 0000000000..f6ac0ef7e8 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/test-tl.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-tr.png b/layout/reftests/w3c-css/received/css-values-3/support/test-tr.png Binary files differnew file mode 100644 index 0000000000..59843ae54b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/test-tr.png diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-calc-support-pct.html b/layout/reftests/w3c-css/received/css-values-3/vh-calc-support-pct.html new file mode 100644 index 0000000000..3a422d4ce4 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-calc-support-pct.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 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> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-calc-support.html b/layout/reftests/w3c-css/received/css-values-3/vh-calc-support.html new file mode 100644 index 0000000000..0e98941ab4 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-calc-support.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-em-inherit.html b/layout/reftests/w3c-css/received/css-values-3/vh-em-inherit.html new file mode 100644 index 0000000000..1affbd093d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-em-inherit.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-inherit.html b/layout/reftests/w3c-css/received/css-values-3/vh-inherit.html new file mode 100644 index 0000000000..99890e309c --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-inherit.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-pct.html b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-pct.html new file mode 100644 index 0000000000..293d686c84 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-pct.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-px.html b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-px.html new file mode 100644 index 0000000000..f071357434 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-px.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-vh.html b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-vh.html new file mode 100644 index 0000000000..d6671174ef --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-vh.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support-atviewport.html b/layout/reftests/w3c-css/received/css-values-3/vh-support-atviewport.html new file mode 100644 index 0000000000..c79ace6df1 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-support-atviewport.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support-margin.html b/layout/reftests/w3c-css/received/css-values-3/vh-support-margin.html new file mode 100644 index 0000000000..06b2375a82 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-support-margin.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-origin.html b/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-origin.html new file mode 100644 index 0000000000..4b06a09fc3 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-origin.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-translate.html b/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-translate.html new file mode 100644 index 0000000000..e273026a02 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-translate.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support.html b/layout/reftests/w3c-css/received/css-values-3/vh-support.html new file mode 100644 index 0000000000..c65b5493fe --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-support.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-zero-support.html b/layout/reftests/w3c-css/received/css-values-3/vh-zero-support.html new file mode 100644 index 0000000000..1c1bcd1761 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-zero-support.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome.html b/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome.html new file mode 100644 index 0000000000..11b973a291 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome.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> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome_iframe.html b/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome_iframe.html new file mode 100644 index 0000000000..89ed75a52b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome_iframe.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> |
