mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 959973 - Add tests for using variables in external style sheets. r=heycam,ted
This commit is contained in:
Mihaela Velimiroviciu
parent
eb542f3937
commit
1d73211714
@ -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>
|
||||||
@ -201,6 +201,7 @@ skip-if = toolkit == 'android'
|
|||||||
[test_variable_serialization_computed.html]
|
[test_variable_serialization_computed.html]
|
||||||
[test_variable_serialization_specified.html]
|
[test_variable_serialization_specified.html]
|
||||||
[test_variables.html]
|
[test_variables.html]
|
||||||
|
support-files = support/external-variable-url.css
|
||||||
[test_viewport_units.html]
|
[test_viewport_units.html]
|
||||||
[test_visited_image_loading.html]
|
[test_visited_image_loading.html]
|
||||||
skip-if = toolkit == 'android' #TIMED_OUT
|
skip-if = toolkit == 'android' #TIMED_OUT
|
||||||
|
|||||||
3
layout/style/test/support/external-variable-url.css
Normal file
3
layout/style/test/support/external-variable-url.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
div {
|
||||||
|
var-a: url('image.png');
|
||||||
|
}
|
||||||
@ -13,6 +13,11 @@
|
|||||||
<style id="test3">
|
<style id="test3">
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<style id="test4">
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="t4"></div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var tests = [
|
var tests = [
|
||||||
function() {
|
function() {
|
||||||
@ -40,8 +45,30 @@ var tests = [
|
|||||||
var declaration = test3.sheet.cssRules[0].style;
|
var declaration = test3.sheet.cssRules[0].style;
|
||||||
is(declaration[declaration.length - 1], "var-decoration");
|
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() {
|
function runTest() {
|
||||||
tests.forEach(function(fn) { fn(); });
|
tests.forEach(function(fn) { fn(); });
|
||||||
SimpleTest.finish();
|
SimpleTest.finish();
|
||||||
@ -49,5 +76,5 @@ function runTest() {
|
|||||||
|
|
||||||
SimpleTest.waitForExplicitFinish();
|
SimpleTest.waitForExplicitFinish();
|
||||||
SpecialPowers.pushPrefEnv({ set: [["layout.css.variables.enabled", true ]] },
|
SpecialPowers.pushPrefEnv({ set: [["layout.css.variables.enabled", true ]] },
|
||||||
runTest);
|
prepareTest);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user