Bug 959973 - Add tests for using variables in external style sheets. r=heycam,ted

This commit is contained in:
Mihaela Velimiroviciu 2014-03-05 12:29:44 +11:00
parent eb542f3937
commit 1d73211714
11 changed files with 111 additions and 1 deletions

View File

@ -0,0 +1,5 @@
p {
color: red;
var-a: green;
color: var(a);
}

View File

@ -0,0 +1,15 @@
@font-face {
var-a: MyTestFontName;
font-family: var(a);
src: url(../../../../fonts/Ahem.ttf);
}
@font-face {
font-family: MyTestFontName2;
src: url(../../../../fonts/Ahem.ttf);
}
#a {
font-family: MyTestFontName;
}
#b {
font-family: MyTestFontName2;
}

View File

@ -0,0 +1,6 @@
:root {
var-a: green;
}
p {
color: var(a);
}

View File

@ -0,0 +1,4 @@
body { color: red; }
@supports (color:var(a)) {
p { color: green; }
}

View File

@ -0,0 +1,12 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test declaring a variable in an external CSS file.</title>
<link rel="author" title="Mihaela Velimiroviciu" href="mailto:mihaela.velimiroviciu@softvisioninc.eu">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<link rel="match" href="support/color-green-ref.html">
<link rel="stylesheet" type="text/css" href="support/external-variable-declaration.css">
<p>This text must be green.</p>

View File

@ -0,0 +1,13 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test the invalid declaration and use of a variable in an @font-face rule within an external CSS.</title>
<link rel="author" title="Mihaela Velimiroviciu" href="mailto:mihaela.velimiroviciu@softvisioninc.eu">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
<link rel="match" href="variable-font-face-01-ref.html">
<link rel="stylesheet" type="text/css" href="support/external-variable-font-face.css">
<meta name="flags" content="ahem">
<p id=a>This text must not be in Ahem.</p>
<p id=b>But this text must be in Ahem.</p>

View File

@ -0,0 +1,12 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test the use of a variable in a non-custom property where the variable value is inherited within an external CSS.</title>
<link rel="author" title="Mihaela Velimiroviciu" href="mailto:mihaela.velimiroviciu@softvisioninc.eu">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
<link rel="stylesheet" type="text/css" href="support/external-variable-reference.css">
<link rel="match" href="support/color-green-ref.html">
<p>This text must be green.</p>

View File

@ -0,0 +1,12 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference within an external stylesheet file.</title>
<link rel="author" title="Mihaela Velimiroviciu" href="mailto:mihaela.velimiroviciu@softvisioninc.eu">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
<link rel="stylesheet" type="text/css" href="support/external-variable-supports.css">
<link rel="match" href="support/color-green-ref.html">
<p>This text must be green.</p>

View File

@ -201,6 +201,7 @@ skip-if = toolkit == 'android'
[test_variable_serialization_computed.html]
[test_variable_serialization_specified.html]
[test_variables.html]
support-files = support/external-variable-url.css
[test_viewport_units.html]
[test_visited_image_loading.html]
skip-if = toolkit == 'android' #TIMED_OUT

View File

@ -0,0 +1,3 @@
div {
var-a: url('image.png');
}

View File

@ -13,6 +13,11 @@
<style id="test3">
</style>
<style id="test4">
</style>
<div id="t4"></div>
<script>
var tests = [
function() {
@ -40,8 +45,30 @@ var tests = [
var declaration = test3.sheet.cssRules[0].style;
is(declaration[declaration.length - 1], "var-decoration");
},
function() {
// https://bugzilla.mozilla.org/show_bug.cgi?id=959973
var test4 = document.getElementById("test4");
test4.textContent = "#t4 { background-image: var(a); }";
var element = document.getElementById("t4");
var path = window.location.pathname;
var currentDir = path.substring(0, path.lastIndexOf('/'));
var imageURL = "http://mochi.test:8888" + currentDir + "/image.png";
is(window.getComputedStyle(element).getPropertyValue("background-image"), "url(\"" + imageURL +"\")");
},
];
function prepareTest() {
// Load an external style sheet for test 4.
var e = document.createElement("link");
e.addEventListener("load", runTest);
e.setAttribute("rel", "stylesheet");
e.setAttribute("href", "support/external-variable-url.css");
document.head.appendChild(e);
}
function runTest() {
tests.forEach(function(fn) { fn(); });
SimpleTest.finish();
@ -49,5 +76,5 @@ function runTest() {
SimpleTest.waitForExplicitFinish();
SpecialPowers.pushPrefEnv({ set: [["layout.css.variables.enabled", true ]] },
runTest);
prepareTest);
</script>