mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
296fa2512b
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
179 lines
No EOL
10 KiB
HTML
179 lines
No EOL
10 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml"><!-- Submitted from TestTWF Paris --><head>
|
|
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" />
|
|
<title> CSS Transitions: Animatable CSS properties </title>
|
|
<meta content="Check that all animatable CSS properties are animatable and then accepted by the 'transition-property' property" name="assert" />
|
|
<link href="mailto:daniel.glazman@disruptive-innovations.com" rel="author" title="Daniel Glazman" />
|
|
<link href="http://www.w3.org/TR/css3-transitions/#transitions" rel="help" />
|
|
<link href="http://www.w3.org/TR/css3-transitions/#animatable-properties" rel="help" />
|
|
<link href="mailto:stearns@adobe.com" rel="reviewer" title="Alan Stearns" />
|
|
|
|
<style type="text/css">
|
|
|
|
html, body { margin: 0px; padding: 0px; }
|
|
|
|
.w50vw { width: 50vw; )
|
|
.h50vh { height: 50vh; }
|
|
|
|
.w50vm { width: 50vm; }
|
|
.h50vm { height: 50vm; }
|
|
</style>
|
|
|
|
<script src="/resources/testharness.js" type="text/javascript"></script>
|
|
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
|
|
|
<style type="text/css" id="newStyles"></style>
|
|
</head>
|
|
<body>
|
|
<p>Check that all animatable CSS properties are animatable and
|
|
then accepted by the 'transition-property' property.<br />
|
|
</p>
|
|
|
|
<p id="testP">THIS PROSE NEEDED FOR TEST ITSELF</p>
|
|
|
|
<div id="log"></div><a href="transitions-animatable-properties-01.html" id="" title="transitions-animatable-properties-01">transitions-animatable-properties-01</a>
|
|
|
|
<script type="text/javascript">
|
|
var kANIMATABLE_CSS_PROPERTIES = [
|
|
["background-color", "white", "rgb(0, 128, 0)", "", false],
|
|
["background-position", "0px 0px", "100% 100%", "", false],
|
|
["border-color", "white", "rgb(0, 128, 0)", "", false],
|
|
["border-bottom-color", "white", "rgb(0, 128, 0)", "", false],
|
|
["border-bottom-width", "0px", "10px", "border-style: solid; border-color: black", false],
|
|
["border-left-color", "white", "rgb(0, 128, 0)", "", false],
|
|
["border-left-width", "0px", "10px", "border-style: solid; border-color: black", false],
|
|
["border-right-color", "white", "rgb(0, 128, 0)", "", false],
|
|
["border-right-width", "0px", "10px", "border-style: solid; border-color: black", false],
|
|
["border-spacing", "0px", "10px 15px", "", false],
|
|
["border-top-color", "white", "rgb(0, 128, 0)", "", false],
|
|
["border-top-width", "0px", "10px", "border-style: solid; border-color: black", false],
|
|
["bottom", "0px", "10px", "", false],
|
|
["clip", "rect(0px, 0px, 10px, 10px)", "rect(10px, 10px, 20px, 20px)", "", false],
|
|
["color", "white", "rgb(0, 128, 0)", "", false],
|
|
["crop", "rect(0px, 0px, 10px, 10px)", "rect(10px 10px 20px 20px)", "", false],
|
|
["font-size", "12pt", "32px", "", false],
|
|
["font-weight", "400", "900", "", false],
|
|
["height", "1em", "64px", "", false],
|
|
["left", "0px", "10px", "", false],
|
|
["letter-spacing", "1em", "64px", "", false],
|
|
["line-height", "1em", "64px", "", false],
|
|
["margin-bottom", "0px", "10px", "", false],
|
|
["margin-left", "0px", "10px", "", false],
|
|
["margin-right", "0px", "10px", "", false],
|
|
["margin-top", "0px", "10px", "", false],
|
|
["max-height", "0px", "10px", "", false],
|
|
["max-width", "0px", "10px", "", false],
|
|
["min-height", "0px", "10px", "", false],
|
|
["min-width", "0px", "10px", "", false],
|
|
["opacity", "0", "1", "", false],
|
|
["outline-color", "white", "rgb(0, 128, 0)", "", false],
|
|
["outline-offset", "0px", "10px", "", false],
|
|
["outline-width", "0px", "10px", "outline-style: solid; outline-style: black", false],
|
|
["padding-bottom", "0px", "10px", "", false],
|
|
["padding-left", "0px", "10px", "", false],
|
|
["padding-right", "0px", "10px", "", false],
|
|
["padding-top", "0px", "10px", "", false],
|
|
["right", "0px", "10px", "", false],
|
|
["text-indent", "0px", "10px", "", false],
|
|
["text-shadow", "orange 0 -2px", "rgb(0, 128, 0) 0px 2px 0px", "", false],
|
|
["top", "0px", "10px", "", false],
|
|
["vertical-align", "0px", "10px", "", false],
|
|
["visibility", "visible", "hidden", "", true],
|
|
["width", "0px", "10px", "", false],
|
|
["word-spacing", "0px", "10px", "", false],
|
|
["z-index", "1", "10", "", false]
|
|
];
|
|
|
|
// page timeout
|
|
var kTIMEOUT = 3000000;
|
|
|
|
var p = document.getElementById("testP");
|
|
var style = document.getElementById("newStyles");
|
|
|
|
var testsIntermediate = [];
|
|
var testsEnd = [];
|
|
|
|
setup({timeout: kTIMEOUT});
|
|
|
|
// create all the tests we need
|
|
for (var i = 0; i < kANIMATABLE_CSS_PROPERTIES.length; i++) {
|
|
testsIntermediate.push(async_test(kANIMATABLE_CSS_PROPERTIES[i][0] + " intermediate",
|
|
{ timeout: 2000, assert: "property " + kANIMATABLE_CSS_PROPERTIES[i][0] + " is animatable" }));
|
|
testsEnd.push(async_test(kANIMATABLE_CSS_PROPERTIES[i][0] + " end",
|
|
{ timeout: 2000, assert: "property " + kANIMATABLE_CSS_PROPERTIES[i][0] + " has correct value after transition's end" }));
|
|
}
|
|
|
|
// getComputedStyle helper
|
|
function gCS(aProperty)
|
|
{
|
|
return document.defaultView
|
|
.getComputedStyle(p, "")
|
|
.getPropertyValue(aProperty);
|
|
}
|
|
|
|
function Scheduler(aIndex)
|
|
{
|
|
if (aIndex >= kANIMATABLE_CSS_PROPERTIES.length) // we're done here
|
|
return;
|
|
|
|
var property = kANIMATABLE_CSS_PROPERTIES[aIndex][0];
|
|
var startValue = kANIMATABLE_CSS_PROPERTIES[aIndex][1];
|
|
var endValue = kANIMATABLE_CSS_PROPERTIES[aIndex][2];
|
|
var extras = kANIMATABLE_CSS_PROPERTIES[aIndex][3];
|
|
var discrete = kANIMATABLE_CSS_PROPERTIES[aIndex][4];
|
|
|
|
// create a style rule
|
|
var s = "#testP { ";
|
|
s += property + ": " + startValue + ";\n";
|
|
s += "transition-property: " + property + ";\n";
|
|
s += "transition-duration: 0.5s;\n";
|
|
s += "transition-delay: 0s;\n";
|
|
s += "transition-timing-function: linear;\n";
|
|
s += extras;
|
|
s += "}";
|
|
style.textContent = s;
|
|
|
|
// flush styles
|
|
gCS(property);
|
|
|
|
// set property to endValue
|
|
p.setAttribute("style", property + ": " + endValue + "; ");
|
|
|
|
// test for intermediate value
|
|
setTimeout(function()
|
|
{
|
|
testsIntermediate[aIndex].step(function()
|
|
{
|
|
var cs = gCS(property);
|
|
if (discrete) {
|
|
assert_equals(cs, startValue);
|
|
}
|
|
else {
|
|
assert_true((cs != startValue) && (null != cs));
|
|
}
|
|
});
|
|
testsIntermediate[aIndex].done();
|
|
}, 250);
|
|
|
|
// test for final value
|
|
setTimeout(function()
|
|
{
|
|
testsEnd[aIndex].step(function()
|
|
{
|
|
var cs = gCS(property);
|
|
assert_equals(cs, endValue);
|
|
}
|
|
);
|
|
testsEnd[aIndex].done();
|
|
Scheduler(aIndex + 1);
|
|
}, 600);
|
|
|
|
}
|
|
|
|
// let's start
|
|
Scheduler(0);
|
|
|
|
</script>
|
|
|
|
|
|
</body></html> |