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

This commit is contained in:
Mihaela Velimiroviciu 2014-01-31 10:58:05 +02:00
Родитель 62b7295d4b
Коммит 44f55a7b5f
11 изменённых файлов: 97 добавлений и 0 удалений

Просмотреть файл

@ -59,6 +59,10 @@ default-preferences pref(layout.css.variables.enabled,true)
== variable-declaration-58.html support/color-green-ref.html
== variable-declaration-59.html support/color-green-ref.html
== variable-declaration-60.html support/color-green-ref.html
== variable-external-declaration-01.html support/color-green-ref.html
== variable-external-font-face-01.html variable-font-face-01-ref.html
== variable-external-reference-01.html support/color-green-ref.html
== variable-external-supports-01.html support/color-green-ref.html
== variable-font-face-01.html variable-font-face-01-ref.html
== variable-font-face-02.html variable-font-face-02-ref.html
== variable-reference-01.html support/color-green-ref.html

Просмотреть файл

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

Просмотреть файл

@ -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;
}

Просмотреть файл

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

Просмотреть файл

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

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -29,6 +29,7 @@ ifdef COMPILE_ENVIRONMENT
MOCHITEST_FILES += \
test_property_database.html \
css_properties.js \
support/external-variable-url.css \
$(NULL)
css_properties.js: host_ListCSSProperties$(HOST_BIN_SUFFIX) css_properties_like_longhand.js Makefile

Просмотреть файл

@ -3,6 +3,7 @@
<script src="/MochiKit/MochiKit.js"></script>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css">
<link rel="stylesheet" href="external-variable-url.css" type="text/css">
<style id="test1">
p { var-a:123!important; }
@ -16,6 +17,8 @@ p { var-a: a !important; }
p { border-left-style: inset; padding: 1px; var-decoration: line-through; }
</style>
<div id="t4"></div>
<script>
var tests = [
function() {
@ -37,6 +40,16 @@ var tests = [
var declaration = document.getElementById("test3").sheet.cssRules[0].style;
is(declaration[declaration.length - 1], "var-decoration");
},
function() {
// https://bugzilla.mozilla.org/show_bug.cgi?id=959973
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 +"\")");
},
];
tests.forEach(function(fn) { fn(); });