mirror of
https://github.com/servo/servo.git
synced 2025-06-25 17:44:33 +01:00
106 lines
No EOL
5 KiB
HTML
106 lines
No EOL
5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Tests css variable invalidation</title>
|
|
|
|
<meta rel="author" title="Kevin Babbitt">
|
|
<meta rel="author" title="Greg Whitworth">
|
|
<link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
|
|
<!-- This is not directly specified in the spec but should work -->
|
|
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
|
|
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
#test1 {
|
|
--var1:red;
|
|
}
|
|
#test2 {
|
|
--var2:red!important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="test1"><div><div><div class="testElem"></div></div></div></div>
|
|
<div id="test2"><div><div><div class="testElem"></div></div></div></div>
|
|
<div id="test3" style="--var3:red"><div><div><div class="testElem"></div></div></div></div>
|
|
<div id="test4" style="--var4:red!important"><div><div><div class="testElem"></div></div></div></div>
|
|
|
|
<script type="text/javascript">
|
|
"use strict";
|
|
|
|
// This is a helper function to avoid repitition
|
|
function testExpectations(testProperty, cssStyle, testElement, testDescription, expectedValue, expectedCssText, expectedPriority, expectedLength, expectedItem0) {
|
|
assert_equals(cssStyle.cssText, expectedCssText, "cssText " + testDescription + ".");
|
|
assert_equals(cssStyle.getPropertyValue(testProperty), expectedValue, "Value " + testDescription + ".");
|
|
assert_equals(cssStyle.getPropertyPriority(testProperty), expectedPriority, "Priority " + testDescription + ".");
|
|
assert_equals(cssStyle.length, expectedLength, "style length " + testDescription + ".");
|
|
assert_equals(cssStyle.item(0), expectedItem0, "item(0) " + testDescription + ".");
|
|
|
|
var computedStyle = window.getComputedStyle(testElement);
|
|
assert_equals(computedStyle.getPropertyValue(testProperty), expectedValue, "Computed Style value " + testDescription + ".");
|
|
}
|
|
|
|
// This is a boilerplate to build a testcase and then test the expected outcome
|
|
function testCase(cssStyle, testProperty, testElement, testImportant) {
|
|
var initialCssText = testProperty + (testImportant ? ": red !important;" : ": red;");
|
|
|
|
testExpectations(testProperty, cssStyle, testElement, "initial", "red", initialCssText, testImportant ? "important" : "", 1, testProperty);
|
|
|
|
cssStyle.setProperty(testProperty, "blue");
|
|
|
|
if (!testImportant) {
|
|
testExpectations(testProperty, cssStyle, testElement, "after setProperty", "blue", testProperty + ": blue;", "", 1, testProperty);
|
|
}
|
|
|
|
if (testProperty) {
|
|
cssStyle.setProperty(testProperty, "pink", 'important');
|
|
testExpectations(testProperty, cssStyle, testElement, "after setProperty important", "pink", testProperty + ": pink !important;", "important", 1, testProperty);
|
|
}
|
|
|
|
cssStyle.removeProperty(testProperty);
|
|
testExpectations(testProperty, cssStyle, testElement, "after removeProperty", "", "", "", 0, "");
|
|
|
|
var cssText = testProperty + (testImportant ? ":green!important;" : ":green;");
|
|
var expectedCssText = testProperty + (testImportant ? ": green !important;" : ": green;");
|
|
cssStyle.cssText = cssText;
|
|
testExpectations(testProperty, cssStyle, testElement, "after setting cssText", "green", expectedCssText, testImportant ? "important" : "", 1, testProperty);
|
|
}
|
|
|
|
// The actual tests that utilize the boilerplate & helper methods above
|
|
test( function () {
|
|
var cssStyle = document.styleSheets[0].cssRules[0].style;
|
|
var testProperty = "--var1";
|
|
var testElement = document.querySelectorAll("#test1 .testElem")[0];
|
|
|
|
testCase(cssStyle, testProperty, testElement, false);
|
|
}, "css rule test");
|
|
|
|
test( function () {
|
|
var cssStyle = document.styleSheets[0].cssRules[1].style;
|
|
var testProperty = "--var2";
|
|
var testElement = document.querySelectorAll("#test2 .testElem")[0];
|
|
|
|
testCase(cssStyle, testProperty, testElement, true);
|
|
}, "css rule test important");
|
|
|
|
test( function () {
|
|
var element = document.getElementById("test3");
|
|
var cssStyle = element.style;
|
|
var testProperty = "--var3";
|
|
var testElement = document.querySelectorAll("#test3 .testElem")[0];
|
|
|
|
testCase(cssStyle, testProperty, testElement, false);
|
|
}, "inline style test");
|
|
|
|
test( function () {
|
|
var element = document.getElementById("test4");
|
|
var cssStyle = element.style;
|
|
var testProperty = "--var4";
|
|
var testElement = document.querySelectorAll("#test4 .testElem")[0];
|
|
|
|
testCase(cssStyle, testProperty, testElement, true);
|
|
}, "inline style test important");
|
|
</script>
|
|
</body>
|
|
</html> |