2009-10-07 20:22:42 -07:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<!--
|
|
|
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=435441
|
|
|
|
|
-->
|
|
|
|
|
<head>
|
|
|
|
|
<title>Test for Bug 435441</title>
|
|
|
|
|
<script type="application/javascript" src="/MochiKit/packed.js"></script>
|
|
|
|
|
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
|
|
|
<script type="text/javascript" src="property_database.js"></script>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
|
|
|
|
#display > p { margin-top: 0; margin-bottom: 0; }
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=435441">Mozilla Bug 435441</a>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
fixed-height container so percentage heights compute to different
|
|
|
|
|
(i.e., nonzero) values
|
2009-10-13 19:38:20 -07:00
|
|
|
fixed-width container so that percentages for margin-top and
|
|
|
|
|
margin-bottom are all relative to the same size container (rather than
|
|
|
|
|
one that depends on whether we're tall enough to need a scrollbar)
|
2010-06-26 11:58:06 -07:00
|
|
|
|
|
|
|
|
Use a 20px font size and line-height so that percentage line-height
|
|
|
|
|
and vertical-align doesn't accumulate rounding error.
|
2009-10-07 20:22:42 -07:00
|
|
|
-->
|
2010-06-26 11:58:06 -07:00
|
|
|
<div style="height: 50px; width: 300px; font-size: 20px; line-height: 20px">
|
2009-10-07 20:22:42 -07:00
|
|
|
|
|
|
|
|
<div id="display">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<pre id="test">
|
|
|
|
|
<script type="application/javascript">
|
|
|
|
|
|
|
|
|
|
/** Test for Bug 435441 **/
|
|
|
|
|
|
|
|
|
|
function has_num(str)
|
|
|
|
|
{
|
|
|
|
|
return !!String(str).match(/^([\d.]+)/);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function any_unit_to_num(str)
|
|
|
|
|
{
|
|
|
|
|
return Number(String(str).match(/^([\d.]+)/)[1]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var supported_properties = {
|
2009-10-28 20:22:27 -07:00
|
|
|
"-moz-border-radius-bottomleft": [ test_radius_transition ],
|
|
|
|
|
"-moz-border-radius-bottomright": [ test_radius_transition ],
|
|
|
|
|
"-moz-border-radius-topleft": [ test_radius_transition ],
|
|
|
|
|
"-moz-border-radius-topright": [ test_radius_transition ],
|
2009-12-11 08:13:19 -08:00
|
|
|
"-moz-box-flex": [ test_float_zeroToOne_transition,
|
|
|
|
|
test_float_aboveOne_transition ],
|
2009-10-21 03:53:46 -07:00
|
|
|
"-moz-box-shadow": [ test_shadow_transition ],
|
2009-12-11 08:13:19 -08:00
|
|
|
"-moz-column-count": [ test_pos_integer_or_auto_transition ],
|
2009-10-07 20:22:42 -07:00
|
|
|
"-moz-column-gap": [ test_length_transition ],
|
2010-04-06 19:03:12 -07:00
|
|
|
"-moz-column-rule-color": [ test_color_transition,
|
|
|
|
|
test_border_color_transition ],
|
2009-12-11 08:13:19 -08:00
|
|
|
"-moz-column-rule-width": [ test_length_transition ],
|
2009-10-07 20:22:42 -07:00
|
|
|
"-moz-column-width": [ test_length_transition ],
|
2009-12-21 13:46:25 -08:00
|
|
|
"-moz-image-region": [ test_rect_transition ],
|
2009-10-28 20:22:27 -07:00
|
|
|
"-moz-outline-radius-bottomleft": [ test_radius_transition ],
|
|
|
|
|
"-moz-outline-radius-bottomright": [ test_radius_transition ],
|
|
|
|
|
"-moz-outline-radius-topleft": [ test_radius_transition ],
|
|
|
|
|
"-moz-outline-radius-topright": [ test_radius_transition ],
|
2010-07-02 21:18:56 -07:00
|
|
|
"-moz-transform": [ test_transform_transition ],
|
2009-12-11 08:13:19 -08:00
|
|
|
"-moz-transform-origin": [ test_length_pair_transition,
|
|
|
|
|
test_length_percent_pair_transition ],
|
2009-10-07 20:22:42 -07:00
|
|
|
"background-color": [ test_color_transition ],
|
2009-12-21 13:46:25 -08:00
|
|
|
"background-position": [ test_background_position_transition ],
|
2010-06-08 18:44:33 -07:00
|
|
|
"background-size": [ test_background_size_transition ],
|
2010-04-06 19:03:12 -07:00
|
|
|
"border-bottom-color": [ test_color_transition,
|
|
|
|
|
test_border_color_transition ],
|
2009-10-13 19:38:20 -07:00
|
|
|
"border-bottom-width": [ test_length_transition ],
|
2010-04-06 19:03:12 -07:00
|
|
|
"border-left-color": [ test_color_transition,
|
|
|
|
|
test_border_color_transition ],
|
2009-10-13 19:38:20 -07:00
|
|
|
"border-left-width": [ test_length_transition ],
|
2010-04-06 19:03:12 -07:00
|
|
|
"border-right-color": [ test_color_transition,
|
|
|
|
|
test_border_color_transition ],
|
2009-10-13 19:38:20 -07:00
|
|
|
"border-right-width": [ test_length_transition ],
|
2009-12-11 08:13:19 -08:00
|
|
|
"border-spacing": [ test_length_pair_transition ],
|
2010-04-06 19:03:12 -07:00
|
|
|
"border-top-color": [ test_color_transition,
|
|
|
|
|
test_border_color_transition ],
|
2009-10-13 19:38:20 -07:00
|
|
|
"border-top-width": [ test_length_transition ],
|
2009-10-07 20:22:42 -07:00
|
|
|
"bottom": [ test_length_transition, test_percent_transition ],
|
2009-12-21 13:46:25 -08:00
|
|
|
"clip": [ test_rect_transition ],
|
2009-10-07 20:22:42 -07:00
|
|
|
"color": [ test_color_transition ],
|
|
|
|
|
"fill": [ test_color_transition ],
|
2009-10-08 18:30:49 -07:00
|
|
|
"fill-opacity" : [ test_float_zeroToOne_transition ],
|
2009-10-07 20:22:42 -07:00
|
|
|
"flood-color": [ test_color_transition ],
|
2009-10-08 18:30:49 -07:00
|
|
|
"flood-opacity" : [ test_float_zeroToOne_transition ],
|
2009-10-07 20:22:42 -07:00
|
|
|
"font-size": [ test_length_transition, test_percent_transition ],
|
2009-10-08 18:30:51 -07:00
|
|
|
"font-size-adjust": [ test_float_zeroToOne_transition,
|
|
|
|
|
test_float_aboveOne_transition ],
|
2009-11-14 19:16:59 -08:00
|
|
|
"font-stretch": [ test_font_stretch ],
|
|
|
|
|
"font-weight": [ test_font_weight ],
|
2009-10-07 20:22:42 -07:00
|
|
|
"height": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"left": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"letter-spacing": [ test_length_transition ],
|
|
|
|
|
"lighting-color": [ test_color_transition ],
|
|
|
|
|
"line-height": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"margin-bottom": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"margin-left": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"margin-right": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"margin-top": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"marker-offset": [ test_length_transition ],
|
|
|
|
|
"max-height": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"max-width": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"min-height": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"min-width": [ test_length_transition, test_percent_transition ],
|
2009-10-08 18:30:49 -07:00
|
|
|
"opacity" : [ test_float_zeroToOne_transition ],
|
2009-10-13 19:38:20 -07:00
|
|
|
"outline-color": [ test_color_transition ],
|
2009-10-07 20:22:42 -07:00
|
|
|
"outline-offset": [ test_length_transition ],
|
|
|
|
|
"outline-width": [ test_length_transition ],
|
|
|
|
|
"padding-bottom": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"padding-left": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"padding-right": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"padding-top": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"right": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"stop-color": [ test_color_transition ],
|
2009-10-08 18:30:49 -07:00
|
|
|
"stop-opacity" : [ test_float_zeroToOne_transition ],
|
2009-10-07 20:22:42 -07:00
|
|
|
"stroke": [ test_color_transition ],
|
2009-10-21 07:17:40 -07:00
|
|
|
"stroke-dasharray": [ test_dasharray_transition ],
|
2009-10-07 20:22:42 -07:00
|
|
|
"stroke-dashoffset": [ test_length_transition, test_percent_transition ],
|
2009-10-08 18:30:49 -07:00
|
|
|
"stroke-miterlimit": [ test_float_aboveOne_transition ],
|
|
|
|
|
"stroke-opacity" : [ test_float_zeroToOne_transition ],
|
2009-10-07 20:22:42 -07:00
|
|
|
"stroke-width": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"text-indent": [ test_length_transition, test_percent_transition ],
|
2009-10-21 03:53:46 -07:00
|
|
|
"text-shadow": [ test_shadow_transition ],
|
2009-10-07 20:22:42 -07:00
|
|
|
"top": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"vertical-align": [ test_length_transition, test_percent_transition ],
|
2009-12-21 13:46:25 -08:00
|
|
|
"visibility": [ test_visibility_transition ],
|
2009-10-07 20:22:42 -07:00
|
|
|
"width": [ test_length_transition, test_percent_transition ],
|
|
|
|
|
"word-spacing": [ test_length_transition ],
|
2009-12-11 08:13:19 -08:00
|
|
|
"z-index": [ test_zindex_transition, test_pos_integer_or_auto_transition ],
|
2009-10-07 20:22:42 -07:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var div = document.getElementById("display");
|
|
|
|
|
var cs = getComputedStyle(div, "");
|
|
|
|
|
|
|
|
|
|
var prop;
|
|
|
|
|
for (prop in supported_properties) {
|
|
|
|
|
// Test that prop is in the property database.
|
|
|
|
|
ok(prop in gCSSProperties, "property " + prop + " in gCSSProperties");
|
|
|
|
|
|
|
|
|
|
// Test that the entry has at least one test function.
|
|
|
|
|
ok(supported_properties[prop].length > 0,
|
|
|
|
|
"property " + prop + " must have at least one test function");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Test that transitions don't do anything (i.e., aren't supported) on
|
|
|
|
|
// the properties not in our test list above (and not transition
|
|
|
|
|
// properties themselves).
|
|
|
|
|
for (prop in gCSSProperties) {
|
|
|
|
|
var info = gCSSProperties[prop];
|
|
|
|
|
if (!(prop in supported_properties) &&
|
|
|
|
|
info.type != CSS_TYPE_TRUE_SHORTHAND &&
|
|
|
|
|
!prop.match(/^-moz-transition-/) &&
|
2009-10-13 19:38:20 -07:00
|
|
|
// FIXME (Bug 119078): THIS SHOULD REALLY NOT BE NEEDED!
|
2009-10-07 20:22:42 -07:00
|
|
|
prop != "-moz-binding") {
|
|
|
|
|
|
|
|
|
|
if ("prerequisites" in info) {
|
|
|
|
|
var prereqs = info.prerequisites;
|
|
|
|
|
for (var prereq in prereqs) {
|
|
|
|
|
div.style.setProperty(prereq, prereqs[prereq], "");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var all_values = info.initial_values.concat(info.other_values);
|
|
|
|
|
var all_computed = [];
|
|
|
|
|
for (var idx in all_values) {
|
|
|
|
|
var val = all_values[idx];
|
|
|
|
|
div.style.setProperty(prop, val, "");
|
|
|
|
|
all_computed.push(cs.getPropertyValue(prop));
|
|
|
|
|
}
|
|
|
|
|
div.style.removeProperty(prop);
|
|
|
|
|
|
|
|
|
|
div.style.setProperty("-moz-transition", prop + " 20s linear", "");
|
|
|
|
|
for (var i = 0; i < all_values.length; ++i) {
|
|
|
|
|
for (var j = i + 1; j < all_values.length; ++j) {
|
|
|
|
|
div.style.setProperty(prop, all_values[i], "");
|
|
|
|
|
is(cs.getPropertyValue(prop), all_computed[i],
|
|
|
|
|
"transitions not supported for property " + prop +
|
|
|
|
|
" value " + all_values[i]);
|
|
|
|
|
div.style.setProperty(prop, all_values[j], "");
|
|
|
|
|
is(cs.getPropertyValue(prop), all_computed[j],
|
|
|
|
|
"transitions not supported for property " + prop +
|
|
|
|
|
" value " + all_values[j]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.style.removeProperty("-moz-transition");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.removeProperty(prop);
|
2009-10-07 20:22:42 -07:00
|
|
|
if ("prerequisites" in info) {
|
|
|
|
|
var prereqs = info.prerequisites;
|
|
|
|
|
for (var prereq in prereqs) {
|
|
|
|
|
div.style.removeProperty(prereq);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2010-06-26 11:58:06 -07:00
|
|
|
// Do 4-second linear transitions with -1 second transition delay and
|
2009-10-07 20:22:42 -07:00
|
|
|
// linear timing function so that we can expect the transition to be
|
2010-06-26 11:58:06 -07:00
|
|
|
// one quarter of the way through the value space right after changing
|
|
|
|
|
// the property.
|
2009-10-07 20:22:42 -07:00
|
|
|
div.style.setProperty("-moz-transition-duration", "4s", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty("-moz-transition-delay", "-1s", "");
|
2009-10-07 20:22:42 -07:00
|
|
|
div.style.setProperty("-moz-transition-timing-function", "linear", "");
|
|
|
|
|
for (prop in supported_properties) {
|
|
|
|
|
var tinfo = supported_properties[prop];
|
|
|
|
|
var info = gCSSProperties[prop];
|
|
|
|
|
|
|
|
|
|
isnot(info.type, CSS_TYPE_TRUE_SHORTHAND,
|
|
|
|
|
prop + " must not be a shorthand");
|
|
|
|
|
if ("prerequisites" in info) {
|
|
|
|
|
var prereqs = info.prerequisites;
|
|
|
|
|
for (var prereq in prereqs) {
|
2010-06-26 11:58:06 -07:00
|
|
|
// We don't want the 19px font-size prereq of line-height, since we
|
|
|
|
|
// want to leave it 20px.
|
|
|
|
|
if (prop != "line-height" || prereq != "font-size") {
|
|
|
|
|
div.style.setProperty(prereq, prereqs[prereq], "");
|
|
|
|
|
}
|
2009-10-07 20:22:42 -07:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (var idx in tinfo) {
|
|
|
|
|
tinfo[idx](prop);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Make sure to unset the property and stop transitions on it.
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
2009-10-07 20:22:42 -07:00
|
|
|
div.style.removeProperty(prop);
|
|
|
|
|
cs.getPropertyValue(prop);
|
|
|
|
|
|
|
|
|
|
if ("prerequisites" in info) {
|
|
|
|
|
var prereqs = info.prerequisites;
|
|
|
|
|
for (var prereq in prereqs) {
|
|
|
|
|
div.style.removeProperty(prereq);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
div.style.removeProperty("-moz-transition");
|
|
|
|
|
|
|
|
|
|
function test_length_transition(prop) {
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, "4px", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "4px",
|
|
|
|
|
"length-valued property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
|
|
|
|
div.style.setProperty(prop, "12px", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "6px",
|
2009-10-07 20:22:42 -07:00
|
|
|
"length-valued property " + prop + ": interpolation of lengths");
|
|
|
|
|
}
|
|
|
|
|
|
2009-10-08 18:30:49 -07:00
|
|
|
// Test using float values in the range [0, 1] (e.g. opacity)
|
|
|
|
|
function test_float_zeroToOne_transition(prop) {
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, "0.3", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "0.3",
|
|
|
|
|
"float-valued property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
|
|
|
|
div.style.setProperty(prop, "0.8", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "0.425",
|
2009-10-08 18:30:49 -07:00
|
|
|
"float-valued property " + prop + ": interpolation of floats");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Test using float values in the range [1, infinity) (e.g. stroke-miterlimit)
|
|
|
|
|
function test_float_aboveOne_transition(prop) {
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, "1", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "1",
|
|
|
|
|
"float-valued property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
|
|
|
|
div.style.setProperty(prop, "2.1", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "1.275",
|
2009-10-08 18:30:49 -07:00
|
|
|
"float-valued property " + prop + ": interpolation of floats");
|
|
|
|
|
}
|
|
|
|
|
|
2009-10-07 20:22:42 -07:00
|
|
|
function test_percent_transition(prop) {
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, "25%", "");
|
|
|
|
|
var av = cs.getPropertyValue(prop);
|
|
|
|
|
var a = any_unit_to_num(av);
|
|
|
|
|
div.style.setProperty(prop, "75%", "");
|
|
|
|
|
var bv = cs.getPropertyValue(prop);
|
|
|
|
|
var b = any_unit_to_num(bv);
|
|
|
|
|
isnot(b, a, "different percentages (" + av + " and " + bv +
|
|
|
|
|
") should be different for " + prop);
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
|
|
|
|
div.style.setProperty(prop, "25%", "");
|
|
|
|
|
var res = cs.getPropertyValue(prop);
|
2010-06-26 11:58:06 -07:00
|
|
|
is(any_unit_to_num(res) * 4, 3 * b + a,
|
2009-10-07 20:22:42 -07:00
|
|
|
"percent-valued property " + prop + ": interpolation of percents: " +
|
2010-06-26 11:58:06 -07:00
|
|
|
res + " should be a quarter of the way between " + bv + " and " + av);
|
2009-10-07 20:22:42 -07:00
|
|
|
ok(has_num(res),
|
|
|
|
|
"percent-valued property " + prop + ": percent computes to number");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function test_color_transition(prop) {
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, "rgb(255, 28, 0)", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "rgb(255, 28, 0)",
|
2009-10-08 18:30:49 -07:00
|
|
|
"color-valued property " + prop + ": computed value before transition");
|
2009-10-07 20:22:42 -07:00
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty(prop, "rgb(75, 84, 128)", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "rgb(210, 42, 32)",
|
2009-10-08 18:30:49 -07:00
|
|
|
"color-valued property " + prop + ": interpolation of colors");
|
2010-04-06 19:03:12 -07:00
|
|
|
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, "rgb(128, 64, 0)", "");
|
|
|
|
|
(prop == "color" ? div.parentNode : div).style.
|
|
|
|
|
setProperty("color", "rgb(0, 0, 128)", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "rgb(128, 64, 0)",
|
|
|
|
|
"color-valued property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
|
|
|
|
div.style.setProperty(prop, "currentColor", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "rgb(96, 48, 32)",
|
2010-04-06 19:03:12 -07:00
|
|
|
"color-valued property " + prop + ": interpolation of currentColor");
|
|
|
|
|
(prop == "color" ? div.parentNode : div).style.removeProperty("color");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function test_border_color_transition(prop) {
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, "rgb(128, 64, 0)", "");
|
|
|
|
|
div.style.setProperty("color", "rgb(0, 0, 128)", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "rgb(128, 64, 0)",
|
|
|
|
|
"color-valued property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
|
|
|
|
div.style.removeProperty(prop);
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "rgb(96, 48, 32)",
|
2010-04-06 19:03:12 -07:00
|
|
|
"color-valued property " + prop + ": interpolation of initial value");
|
|
|
|
|
div.style.removeProperty("color");
|
2009-10-07 20:22:42 -07:00
|
|
|
}
|
|
|
|
|
|
2009-10-21 03:53:46 -07:00
|
|
|
function test_shadow_transition(prop) {
|
|
|
|
|
var spreadStr = (prop == "-moz-box-shadow") ? " 0px" : "";
|
|
|
|
|
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, "none", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "none",
|
|
|
|
|
"shadow-valued property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
|
|
|
|
div.style.setProperty(prop, "4px 8px 3px red", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "rgba(255, 0, 0, 0.25) 1px 2px 0.75px" + spreadStr,
|
2009-10-21 03:53:46 -07:00
|
|
|
"shadow-valued property " + prop + ": interpolation of shadows");
|
|
|
|
|
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty(prop, "#038000 4px 4px, 2px 2px blue", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "rgb(3, 128, 0) 4px 4px 0px" + spreadStr + ", rgb(0, 0, 255) 2px 2px 0px" + spreadStr,
|
2009-10-21 03:53:46 -07:00
|
|
|
"shadow-valued property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
|
|
|
|
div.style.setProperty(prop, "8px 8px 8px red", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "rgb(66, 96, 0) 5px 5px 2px" + spreadStr + ", rgba(0, 0, 255, 0.75) 1.5px 1.5px 0px" + spreadStr,
|
2009-10-21 03:53:46 -07:00
|
|
|
"shadow-valued property " + prop + ": interpolation of shadows");
|
|
|
|
|
|
|
|
|
|
if (prop == "-moz-box-shadow") {
|
|
|
|
|
div.style.setProperty(prop, "8px 8px 8px red inset", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "rgb(255, 0, 0) 8px 8px 8px 0px inset",
|
|
|
|
|
"shadow-valued property " + prop + ": non-interpolable cases");
|
|
|
|
|
div.style.setProperty(prop, "8px 8px 8px 8px red inset", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "rgb(255, 0, 0) 8px 8px 8px 2px inset",
|
2009-10-21 03:53:46 -07:00
|
|
|
"shadow-valued property " + prop + ": interpolation of spread");
|
|
|
|
|
// Leave in same state whether in the |if| or not.
|
|
|
|
|
div.style.setProperty(prop, "8px 8px 8px red", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "rgb(255, 0, 0) 8px 8px 8px 0px",
|
|
|
|
|
"shadow-valued property " + prop + ": non-interpolable cases");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var defaultColor = cs.getPropertyValue("color") + " ";
|
|
|
|
|
div.style.setProperty(prop, "2px 2px 2px", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), defaultColor + "2px 2px 2px" + spreadStr,
|
|
|
|
|
"shadow-valued property " + prop + ": non-interpolable cases");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty(prop, "6px 14px 10px", "");
|
2009-10-21 03:53:46 -07:00
|
|
|
is(cs.getPropertyValue(prop), defaultColor + "3px 5px 4px" + spreadStr,
|
|
|
|
|
"shadow-valued property " + prop + ": interpolation without color");
|
|
|
|
|
}
|
|
|
|
|
|
2009-10-21 07:17:40 -07:00
|
|
|
function test_dasharray_transition(prop) {
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, "3", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "3",
|
|
|
|
|
"dasharray-valued property " + prop +
|
|
|
|
|
": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty(prop, "15px", "");
|
2009-10-21 07:17:40 -07:00
|
|
|
is(cs.getPropertyValue(prop), "6",
|
|
|
|
|
"dasharray-valued property " + prop + ": interpolation of dasharray");
|
|
|
|
|
div.style.setProperty(prop, "none", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "none",
|
|
|
|
|
"dasharray-valued property " + prop + ": non-interpolability of none");
|
|
|
|
|
div.style.setProperty(prop, "6,8px,4,4", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "6, 8px, 4, 4",
|
|
|
|
|
"dasharray-valued property " + prop +
|
|
|
|
|
": computed value before transition");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty(prop, "14, 12,16,16px", "");
|
2009-10-21 07:17:40 -07:00
|
|
|
is(cs.getPropertyValue(prop), "8, 9, 7, 7",
|
|
|
|
|
"dasharray-valued property " + prop + ": interpolation of dasharray");
|
|
|
|
|
div.style.setProperty(prop, "none", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "none",
|
|
|
|
|
"dasharray-valued property " + prop + ": non-interpolability of none");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty(prop, "8,16,4", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "8, 16, 4",
|
2009-10-21 07:17:40 -07:00
|
|
|
"dasharray-valued property " + prop +
|
|
|
|
|
": computed value before transition");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty(prop, "4,8,12,16", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "7, 14, 6, 10, 13, 5, 9, 16, 4, 8, 15, 7",
|
2009-10-21 07:17:40 -07:00
|
|
|
"dasharray-valued property " + prop + ": interpolation of dasharray");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty(prop, "2,50%,6,10", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "2, 50%, 6, 10",
|
2009-10-21 07:17:40 -07:00
|
|
|
"dasharray-valued property " + prop + ": non-interpolability of mixed units");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty(prop, "6,30%,2,2", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "3, 45%, 5, 8",
|
2009-10-21 07:17:40 -07:00
|
|
|
"dasharray-valued property " + prop + ": interpolation of dasharray");
|
|
|
|
|
}
|
|
|
|
|
|
2009-10-28 20:22:27 -07:00
|
|
|
function test_radius_transition(prop) {
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
|
|
|
|
|
// FIXME: Test a square for now, since we haven't updated to the spec
|
|
|
|
|
// for vertical components being relative to the height.
|
|
|
|
|
div.style.setProperty("width", "200px", "");
|
|
|
|
|
div.style.setProperty("height", "200px", "");
|
|
|
|
|
div.style.setProperty("border", "none", "");
|
|
|
|
|
div.style.setProperty("padding", "0", "");
|
|
|
|
|
|
|
|
|
|
div.style.setProperty(prop, "3px", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "3px",
|
|
|
|
|
"radius-valued property " + prop +
|
|
|
|
|
": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty(prop, "15px", "");
|
2009-10-28 20:22:27 -07:00
|
|
|
is(cs.getPropertyValue(prop), "6px",
|
|
|
|
|
"radius-valued property " + prop + ": interpolation of radius");
|
|
|
|
|
div.style.setProperty(prop, "5%", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "10px",
|
|
|
|
|
"radius-valued property " + prop + ": non-interpolability of unit change");
|
|
|
|
|
div.style.setProperty(prop, "25%", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "20px",
|
2009-10-28 20:22:27 -07:00
|
|
|
"radius-valued property " + prop + ": interpolation of radius");
|
|
|
|
|
div.style.setProperty(prop, "3px 8px", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "3px 8px",
|
|
|
|
|
"radius-valued property " + prop + ": non-interpolability of unit change");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty(prop, "15px 12px", "");
|
2009-10-28 20:22:27 -07:00
|
|
|
is(cs.getPropertyValue(prop), "6px 9px",
|
|
|
|
|
"radius-valued property " + prop + ": interpolation of radius");
|
|
|
|
|
div.style.setProperty(prop, "5% 15%", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "10px 30px",
|
|
|
|
|
"radius-valued property " + prop + ": non-interpolability of unit change");
|
|
|
|
|
div.style.setProperty(prop, "25%", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "20px 35px",
|
2009-10-28 20:22:27 -07:00
|
|
|
"radius-valued property " + prop + ": interpolation of radius");
|
|
|
|
|
|
|
|
|
|
div.style.removeProperty("width");
|
|
|
|
|
div.style.removeProperty("height");
|
|
|
|
|
div.style.removeProperty("border");
|
|
|
|
|
div.style.removeProperty("padding");
|
|
|
|
|
}
|
|
|
|
|
|
2009-11-12 17:40:05 -08:00
|
|
|
function test_zindex_transition(prop) {
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, "4", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "4",
|
|
|
|
|
"integer-valued property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty(prop, "-14", "");
|
2009-11-12 17:40:05 -08:00
|
|
|
is(cs.getPropertyValue(prop), "-1",
|
|
|
|
|
"integer-valued property " + prop + ": interpolation of lengths");
|
|
|
|
|
div.style.setProperty(prop, "auto", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "auto",
|
|
|
|
|
"integer-valued property " + prop + ": auto not interpolable");
|
|
|
|
|
div.style.setProperty(prop, "-4", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "-4",
|
|
|
|
|
"integer-valued property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty(prop, "8", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "-1",
|
2009-11-12 17:40:05 -08:00
|
|
|
"integer-valued property " + prop + ": interpolation of lengths");
|
|
|
|
|
}
|
|
|
|
|
|
2009-11-14 19:16:59 -08:00
|
|
|
function test_font_stretch(prop) {
|
|
|
|
|
is(prop, "font-stretch", "only designed for one property");
|
|
|
|
|
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, "normal", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "normal",
|
|
|
|
|
"font-stretch property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
|
|
|
|
div.style.setProperty(prop, "ultra-expanded", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "semi-expanded",
|
2009-11-14 19:16:59 -08:00
|
|
|
"font-stretch property " + prop + ": interpolation of font-stretches");
|
|
|
|
|
div.style.setProperty(prop, "wider", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "wider",
|
|
|
|
|
"font-stretch property " + prop + ": can't interpolate wider/narrower");
|
|
|
|
|
div.style.setProperty(prop, "expanded", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "expanded",
|
|
|
|
|
"font-stretch property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty(prop, "extra-condensed", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "normal",
|
2009-11-14 19:16:59 -08:00
|
|
|
"font-stretch property " + prop + ": interpolation of font-stretches");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function test_font_weight(prop) {
|
|
|
|
|
is(prop, "font-weight", "only designed for one property");
|
|
|
|
|
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, "normal", "");
|
2009-11-14 19:16:59 -08:00
|
|
|
is(cs.getPropertyValue(prop), "400",
|
2009-11-14 19:16:59 -08:00
|
|
|
"font-weight property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
|
|
|
|
div.style.setProperty(prop, "900", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "500",
|
2009-11-14 19:16:59 -08:00
|
|
|
"font-weight property " + prop + ": interpolation of font-weights");
|
|
|
|
|
div.style.setProperty(prop, "lighter", "");
|
2009-11-14 19:16:59 -08:00
|
|
|
is(cs.getPropertyValue(prop), "lighter",
|
2009-11-14 19:16:59 -08:00
|
|
|
"font-weight property " + prop + ": can't interpolate bolder/lighter");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty(prop, "900", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "900",
|
2009-11-14 19:16:59 -08:00
|
|
|
"font-weight property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty(prop, "100", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "700",
|
2009-11-14 19:16:59 -08:00
|
|
|
"font-weight property " + prop + ": interpolation of font-weights");
|
|
|
|
|
}
|
|
|
|
|
|
2009-12-11 08:13:19 -08:00
|
|
|
function test_pos_integer_or_auto_transition(prop) {
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, "4", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "4",
|
|
|
|
|
"integer-valued property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty(prop, "11", "");
|
2009-12-11 08:13:19 -08:00
|
|
|
is(cs.getPropertyValue(prop), "5",
|
|
|
|
|
"integer-valued property " + prop + ": interpolation of lengths");
|
|
|
|
|
div.style.setProperty(prop, "auto", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "auto",
|
|
|
|
|
"integer-valued property " + prop + ": auto not interpolable");
|
|
|
|
|
div.style.setProperty(prop, "8", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "8",
|
|
|
|
|
"integer-valued property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty(prop, "4", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "7",
|
2009-12-11 08:13:19 -08:00
|
|
|
"integer-valued property " + prop + ": interpolation of lengths");
|
|
|
|
|
}
|
|
|
|
|
|
2009-12-11 08:13:19 -08:00
|
|
|
function test_length_pair_transition(prop) {
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty(prop, "4px 6px", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "4px 6px",
|
2009-12-11 08:13:19 -08:00
|
|
|
"length-valued property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
|
|
|
|
div.style.setProperty(prop, "12px 10px", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "6px 7px",
|
2009-12-11 08:13:19 -08:00
|
|
|
"length-valued property " + prop + ": interpolation of lengths");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function test_length_percent_pair_transition(prop) {
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, "4px 50%", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "4px 50%",
|
|
|
|
|
"length-valued property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
|
|
|
|
div.style.setProperty(prop, "12px 70%", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "6px 55%",
|
2009-12-11 08:13:19 -08:00
|
|
|
"length-valued property " + prop + ": interpolation of lengths");
|
|
|
|
|
}
|
|
|
|
|
|
2009-12-21 13:46:25 -08:00
|
|
|
function test_rect_transition(prop) {
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty(prop, "rect(4px, 16px, 12px, 6px)", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "rect(4px, 16px, 12px, 6px)",
|
2009-12-21 13:46:25 -08:00
|
|
|
"rect-valued property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
2010-06-26 11:58:06 -07:00
|
|
|
div.style.setProperty(prop, "rect(0px, 4px, 4px, 2px)", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "rect(3px, 13px, 10px, 5px)",
|
2009-12-21 13:46:25 -08:00
|
|
|
"rect-valued property " + prop + ": interpolation of rects");
|
|
|
|
|
if (prop == "clip") {
|
|
|
|
|
div.style.setProperty(prop, "rect(0px, 6px, 4px, auto)", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "rect(0px, 6px, 4px, auto)",
|
|
|
|
|
"rect-valued property " + prop + ": can't interpolate auto components");
|
|
|
|
|
div.style.setProperty(prop, "rect(0px, 6px, 4px, 2px)", "");
|
|
|
|
|
}
|
|
|
|
|
div.style.setProperty(prop, "auto", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "auto",
|
|
|
|
|
"rect-valued property " + prop + ": can't interpolate auto components");
|
|
|
|
|
}
|
|
|
|
|
|
2009-12-21 13:46:25 -08:00
|
|
|
function test_visibility_transition(prop) {
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, "visible", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "visible",
|
|
|
|
|
"visibility property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
|
|
|
|
div.style.setProperty(prop, "hidden", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "visible",
|
|
|
|
|
"visibility property " + prop + ": interpolation of visibility");
|
|
|
|
|
}
|
|
|
|
|
|
2009-12-21 13:46:25 -08:00
|
|
|
function test_background_size_transition(prop) {
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, "50% 80%", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "50% 80%",
|
|
|
|
|
"property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
|
|
|
|
div.style.setProperty(prop, "100% 100%", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "62.5% 85%",
|
2009-12-21 13:46:25 -08:00
|
|
|
"property " + prop + ": interpolation of percents");
|
|
|
|
|
div.style.setProperty(prop, "contain", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "contain",
|
|
|
|
|
"property " + prop + ": can't interpolate 'contain'");
|
|
|
|
|
test_background_position_size_common(prop);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function test_background_position_transition(prop) {
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, "center 80%", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "50% 80%",
|
|
|
|
|
"property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
|
|
|
|
div.style.setProperty(prop, "bottom right", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "62.5% 85%",
|
2009-12-21 13:46:25 -08:00
|
|
|
"property " + prop + ": interpolation of percents");
|
|
|
|
|
test_background_position_size_common(prop);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function test_background_position_size_common(prop) {
|
|
|
|
|
div.style.setProperty(prop, "10px 40px", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "10px 40px",
|
|
|
|
|
"property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty(prop, "50px 0", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "20px 30px",
|
2009-12-21 13:46:25 -08:00
|
|
|
"property " + prop + ": interpolation of lengths");
|
|
|
|
|
div.style.setProperty(prop, "10px 40px, 50px 50px, 30px 20px", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "10px 40px, 50px 50px, 30px 20px",
|
|
|
|
|
"property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty(prop, "50px 20px, 70px 50px, 30px 40px", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "20px 35px, 55px 50px, 30px 25px",
|
2009-12-21 13:46:25 -08:00
|
|
|
"property " + prop + ": interpolation of lists of lengths");
|
|
|
|
|
div.style.setProperty(prop, "10px 40%, 50% 50px, 30% 20%", "");
|
|
|
|
|
is(cs.getPropertyValue(prop), "10px 40%, 50% 50px, 30% 20%",
|
|
|
|
|
"property " + prop + ": computed value before transition");
|
|
|
|
|
div.style.setProperty(prop, "50px 20%, 70% 50px, 30% 40%", "");
|
2010-06-26 11:58:06 -07:00
|
|
|
is(cs.getPropertyValue(prop), "20px 35%, 55% 50px, 30% 25%",
|
2009-12-21 13:46:25 -08:00
|
|
|
"property " + prop + ": interpolation of lists of lengths and percents");
|
|
|
|
|
}
|
|
|
|
|
|
2010-07-02 21:18:56 -07:00
|
|
|
function test_transform_transition(prop) {
|
|
|
|
|
function c(v) {
|
|
|
|
|
div.style.setProperty(prop, v, "");
|
|
|
|
|
var result = cs.getPropertyValue(prop);
|
|
|
|
|
div.style.removeProperty(prop);
|
|
|
|
|
return result;
|
|
|
|
|
}
|
|
|
|
|
var c_rot_15 = c("rotate(15deg)");
|
|
|
|
|
is(c_rot_15.substring(0,6), "matrix", "should compute to matrix value");
|
|
|
|
|
var c_rot_60 = c("rotate(60deg)");
|
|
|
|
|
is(c_rot_60.substring(0,6), "matrix", "should compute to matrix value");
|
|
|
|
|
|
|
|
|
|
var tests = [
|
|
|
|
|
// rotate
|
|
|
|
|
{ start: 'none', end: 'rotate(60deg)',
|
|
|
|
|
expected: c_rot_15 },
|
|
|
|
|
{ start: 'rotate(0)', end: 'rotate(60deg)',
|
|
|
|
|
expected: c_rot_15 },
|
|
|
|
|
{ start: 'rotate(0deg)', end: 'rotate(60deg)',
|
|
|
|
|
expected: c_rot_15 },
|
|
|
|
|
{ start: 'none', end: c_rot_60,
|
|
|
|
|
expected: c_rot_15 },
|
|
|
|
|
{ start: 'none', end: 'rotate(360deg)', expected: c('rotate(90deg)') },
|
|
|
|
|
{ start: 'none', end: 'rotate(720deg)', expected: c('rotate(180deg)') },
|
|
|
|
|
{ start: 'none', end: 'rotate(1080deg)', expected: c('rotate(270deg)') },
|
|
|
|
|
{ start: 'none', end: 'rotate(1440deg)', expected: c('scale(1)'),
|
|
|
|
|
round_error_ok: true },
|
|
|
|
|
|
|
|
|
|
// translate
|
|
|
|
|
{ start: 'translate(20px)', end: 'none',
|
|
|
|
|
expected: 'matrix(1, 0, 0, 1, 15px, 0px)' },
|
|
|
|
|
{ start: 'translate(20px, 12px)', end: 'none',
|
|
|
|
|
expected: 'matrix(1, 0, 0, 1, 15px, 9px)' },
|
|
|
|
|
{ start: 'translateX(-20px)', end: 'none',
|
|
|
|
|
expected: 'matrix(1, 0, 0, 1, -15px, 0px)' },
|
|
|
|
|
{ start: 'translateY(-40px)', end: 'none',
|
|
|
|
|
expected: 'matrix(1, 0, 0, 1, 0px, -30px)' },
|
|
|
|
|
// percentages are relative to 300px (width) and 50px (height)
|
|
|
|
|
// per the prerequisites in property_database.js
|
|
|
|
|
{ start: 'translate(20%)', end: 'none',
|
|
|
|
|
expected: 'matrix(1, 0, 0, 1, 45px, 0px)' },
|
|
|
|
|
{ start: 'translate(20%, 12%)', end: 'none',
|
|
|
|
|
expected: 'matrix(1, 0, 0, 1, 45px, 4.5px)' },
|
|
|
|
|
{ start: 'translateX(-20%)', end: 'none',
|
|
|
|
|
expected: 'matrix(1, 0, 0, 1, -45px, 0px)' },
|
|
|
|
|
{ start: 'translateY(-40%)', end: 'none',
|
|
|
|
|
expected: 'matrix(1, 0, 0, 1, 0px, -15px)' },
|
|
|
|
|
{ start: 'none', end: 'rotate(90deg) translate(20%, 20%) rotate(-90deg)',
|
|
|
|
|
expected: c('rotate(22.5deg) translate(5%, 5%) rotate(-22.5deg)') },
|
|
|
|
|
{ start: 'none', end: 'rotate(-90deg) translate(20%, 20%) rotate(90deg)',
|
|
|
|
|
expected: c('rotate(-22.5deg) translate(5%, 5%) rotate(22.5deg)') },
|
|
|
|
|
// test percent translation using matrix decomposition
|
|
|
|
|
{ start: 'rotate(45deg) rotate(-45deg)',
|
|
|
|
|
end: 'rotate(90deg) translate(20%, 20%) rotate(-90deg)',
|
|
|
|
|
expected: 'matrix(1, 0, 0, 1, -2.5px, 15px)' },
|
|
|
|
|
{ start: 'rotate(45deg) rotate(-45deg)',
|
|
|
|
|
end: 'rotate(-90deg) translate(20%, 20%) rotate(90deg)',
|
|
|
|
|
expected: 'matrix(1, 0, 0, 1, 2.5px, -15px)' },
|
|
|
|
|
// test calc() in translate
|
|
|
|
|
// Note that font-size: is 20px, and that percentages are relative
|
|
|
|
|
// to 300px (width) and 50px (height) per the prerequisites in
|
|
|
|
|
// property_database.js
|
|
|
|
|
{ start: 'translateX(20%)', /* 60px */
|
|
|
|
|
end: 'translateX(-moz-calc(10% + 1em))', /* 30px + 20px = 50px */
|
|
|
|
|
expected: 'matrix(1, 0, 0, 1, 57.5px, 0px)' },
|
|
|
|
|
{ start: 'translate(-moz-calc(0.75 * 3em + 1.5 * 10%), -moz-calc(0.5 * 5em + 0.5 * 8%))', /* 90px, 52px */
|
|
|
|
|
end: 'rotate(90deg) translateY(20%) rotate(90deg) translateY(-moz-calc(10% + 0.5em)) rotate(180deg)', /* -10px, -15px */
|
|
|
|
|
expected: 'matrix(1, 0, 0, 1, 65px, 35.25px)' },
|
|
|
|
|
|
|
|
|
|
// scale
|
|
|
|
|
{ start: 'scale(2)', end: 'none',
|
|
|
|
|
expected: 'matrix(1.75, 0, 0, 1.75, 0px, 0px)' },
|
|
|
|
|
{ start: 'none', end: 'scale(0.4)',
|
|
|
|
|
expected: 'matrix(0.85, 0, 0, 0.85, 0px, 0px)' },
|
|
|
|
|
{ start: 'scale(2)', end: 'scale(-2)',
|
|
|
|
|
expected: 'matrix(1, 0, 0, 1, 0px, 0px)' },
|
|
|
|
|
{ start: 'scale(2)', end: 'scale(-6)',
|
|
|
|
|
expected: 'matrix(0, 0, 0, 0, 0px, 0px)' },
|
|
|
|
|
{ start: 'scale(2, 0.4)', end: 'none',
|
|
|
|
|
expected: 'matrix(1.75, 0, 0, 0.55, 0px, 0px)' },
|
|
|
|
|
{ start: 'scaleX(3)', end: 'none',
|
|
|
|
|
expected: 'matrix(2.5, 0, 0, 1, 0px, 0px)' },
|
|
|
|
|
{ start: 'scaleY(5)', end: 'none',
|
|
|
|
|
expected: 'matrix(1, 0, 0, 4, 0px, 0px)' },
|
|
|
|
|
|
|
|
|
|
// skew
|
|
|
|
|
{ start: 'skewX(45deg)', end: 'none',
|
|
|
|
|
expected: 'matrix(1, 0, 0.75, 1, 0px, 0px)' },
|
|
|
|
|
{ start: 'skewY(45deg)', end: 'none',
|
|
|
|
|
expected: 'matrix(1, 0.75, 0, 1, 0px, 0px)' },
|
|
|
|
|
{ start: 'skew(45deg)', end: 'none',
|
|
|
|
|
expected: 'matrix(1, 0, 0.75, 1, 0px, 0px)' },
|
|
|
|
|
{ start: 'skew(45deg, 45deg)', end: 'none',
|
|
|
|
|
expected: 'matrix(1, 0.75, 0.75, 1, 0px, 0px)' },
|
|
|
|
|
{ start: 'skewX(45deg)', end: 'skewX(-45deg)',
|
|
|
|
|
expected: 'matrix(1, 0, 0.5, 1, 0px, 0px)' },
|
|
|
|
|
{ start: 'skewX(0)', end: 'skewX(-45deg)',
|
|
|
|
|
expected: 'matrix(1, 0, -0.25, 1, 0px, 0px)' },
|
|
|
|
|
{ start: 'skewY(45deg)', end: 'skewY(-45deg)',
|
|
|
|
|
expected: 'matrix(1, 0.5, 0, 1, 0px, 0px)' },
|
|
|
|
|
|
|
|
|
|
// matrix : skewX
|
|
|
|
|
{ start: 'matrix(1, 0, 3, 1, 0px, 0px)', end: 'none',
|
|
|
|
|
expected: 'matrix(1, 0, 2.25, 1, 0px, 0px)' },
|
|
|
|
|
{ start: 'skewX(0)', end: 'skewX(-45deg) translate(0)',
|
|
|
|
|
expected: 'matrix(1, 0, -0.25, 1, 0px, 0px)' },
|
|
|
|
|
// matrix : rotate
|
|
|
|
|
{ start: 'rotate(-30deg)', end: 'matrix(0, 1, -1, 0, 0px, 0px)',
|
|
|
|
|
expected: 'matrix(1, 0, 0, 1, 0px, 0px)' },
|
|
|
|
|
{ start: 'rotate(-30deg) translateX(0)',
|
|
|
|
|
end: 'translateX(0) rotate(-90deg)',
|
|
|
|
|
expected: c('rotate(-45deg)') },
|
|
|
|
|
// matrix decomposition of skewY
|
|
|
|
|
{ start: 'skewY(60deg)', end: 'skewY(-60deg) translateX(0)',
|
|
|
|
|
expected: c('rotate(30deg) skewX(' + Math.atan(Math.tan(Math.PI / 3) / 2) + 'rad) scale(2, 0.5)') },
|
|
|
|
|
|
|
|
|
|
// matrix decomposition
|
|
|
|
|
|
|
|
|
|
// Four pairs of the same matrix expressed different ways.
|
|
|
|
|
{ start: 'matrix(-1, 0, 0, -1, 0pt, 0pt)', /* rotate(180deg) */
|
|
|
|
|
end: 'matrix(1, 0, 0, 1, 0, 0)',
|
|
|
|
|
expected: c('rotate(135deg)') },
|
|
|
|
|
{ start: 'scale(-1)', end: 'none',
|
|
|
|
|
expected: 'matrix(-0.5, 0, 0, -0.5, 0px, 0px)' },
|
|
|
|
|
{ start: 'rotate(180deg)', end: 'none',
|
|
|
|
|
expected: c('rotate(135deg)') },
|
|
|
|
|
{ start: 'rotate(-180deg)', end: 'none',
|
|
|
|
|
expected: c('rotate(225deg)') },
|
|
|
|
|
|
|
|
|
|
// ... and a bunch of similar possibilities. The spec isn't settled
|
|
|
|
|
// here; there are multiple options. See:
|
|
|
|
|
// http://lists.w3.org/Archives/Public/www-style/2010Jun/0602.html
|
|
|
|
|
{ start: 'matrix(-1, 0, 0, 1, 0pt, 0pt)', /* scaleX(-1) */
|
|
|
|
|
end: 'matrix(1, 0, 0, 1, 0, 0)',
|
|
|
|
|
expected: c('scaleX(-0.5)') },
|
|
|
|
|
|
|
|
|
|
{ start: 'matrix(1, 0, 0, -1, 0pt, 0pt)', /* rotate(-180deg) scaleX(-1) */
|
|
|
|
|
end: 'matrix(1, 0, 0, 1, 0, 0)',
|
|
|
|
|
expected: c('rotate(-135deg) scaleX(-0.5)') },
|
|
|
|
|
|
|
|
|
|
{ start: 'matrix(0, 1, 1, 0, 0pt, 0pt)', /* rotate(-90deg) scaleX(-1) */
|
|
|
|
|
end: 'matrix(1, 0, 0, 1, 0, 0)',
|
|
|
|
|
expected: c('rotate(-67.5deg) scaleX(-0.5)') },
|
|
|
|
|
|
|
|
|
|
{ start: 'matrix(0, -1, 1, 0, 0pt, 0pt)', /* rotate(-90deg) */
|
|
|
|
|
end: 'matrix(1, 0, 0, 1, 0, 0)',
|
|
|
|
|
expected: c('rotate(-67.5deg)') },
|
|
|
|
|
|
|
|
|
|
{ start: 'matrix(0, 1, -1, 0, 0pt, 0pt)', /* rotate(90deg) */
|
|
|
|
|
end: 'matrix(1, 0, 0, 1, 0, 0)',
|
|
|
|
|
expected: c('rotate(67.5deg)') },
|
|
|
|
|
|
|
|
|
|
{ start: 'matrix(0, -1, -1, 0, 0pt, 0pt)', /* rotate(90deg) scaleX(-1) */
|
|
|
|
|
end: 'matrix(1, 0, 0, 1, 0, 0)',
|
|
|
|
|
expected: c('rotate(67.5deg) scaleX(-0.5)') },
|
|
|
|
|
|
|
|
|
|
// Similar decomposition tests, but with skewX. I checked visually
|
|
|
|
|
// that the sign of the skew was correct by checking visually that
|
|
|
|
|
// the animations in
|
|
|
|
|
// http://dbaron.org/css/test/2010/transition-negative-determinant
|
|
|
|
|
// don't flip when they finish, and then wrote tests corresponding
|
|
|
|
|
// to the current code's behavior.
|
|
|
|
|
// ... start with four with positive determinants
|
|
|
|
|
{ start: 'none',
|
|
|
|
|
end: 'matrix(1, 0, 1.5, 1, 0pt, 0pt)',
|
|
|
|
|
/* skewX(atan(1.5)) */
|
|
|
|
|
expected: c('matrix(1, 0, 0.375, 1, 0, 0)') },
|
|
|
|
|
{ start: 'none',
|
|
|
|
|
end: 'matrix(-1, 0, 2, -1, 0pt, 0pt)',
|
|
|
|
|
/* rotate(180deg) skewX(atan(-2)) */
|
|
|
|
|
expected: c('rotate(45deg) matrix(1, 0, -0.5, 1, 0, 0)') },
|
|
|
|
|
{ start: 'none',
|
|
|
|
|
end: 'matrix(0, -1, 1, -3, 0pt, 0pt)',
|
|
|
|
|
/* rotate(-90deg) skewX(atan(3)) */
|
|
|
|
|
expected: c('rotate(-22.5deg) matrix(1, 0, 0.75, 1, 0, 0)') },
|
|
|
|
|
{ start: 'none',
|
|
|
|
|
end: 'matrix(0, 1, -1, 4, 0pt, 0pt)',
|
|
|
|
|
/* rotate(90deg) skewX(atan(4)) */
|
|
|
|
|
expected: c('rotate(22.5deg) matrix(1, 0, 1, 1, 0, 0)') },
|
|
|
|
|
// and then four with negative determinants
|
|
|
|
|
{ start: 'none',
|
|
|
|
|
end: 'matrix(1, 0, 1, -1, 0pt, 0pt)',
|
|
|
|
|
/* rotate(-180deg) skewX(atan(-1)) scaleX(-1) */
|
|
|
|
|
expected: c('rotate(-45deg) matrix(1, 0, -0.25, 1, 0, 0) scaleX(0.5)'),
|
|
|
|
|
round_error_ok: true },
|
|
|
|
|
{ start: 'none',
|
|
|
|
|
end: 'matrix(-1, 0, -1, 1, 0pt, 0pt)',
|
|
|
|
|
/* skewX(atan(-1)) scaleX(-1) */
|
|
|
|
|
expected: c('matrix(1, 0, -0.25, 1, 0, 0) scaleX(0.5)') },
|
|
|
|
|
{ start: 'none',
|
|
|
|
|
end: 'matrix(0, 1, 1, -2, 0pt, 0pt)',
|
|
|
|
|
/* rotate(-90deg) skewX(atan(2)) scaleX(-1) */
|
|
|
|
|
expected: c('rotate(-22.5deg) matrix(1, 0, 0.5, 1, 0, 0) scaleX(0.5)') },
|
|
|
|
|
{ start: 'none',
|
|
|
|
|
end: 'matrix(0, -1, -1, 0.5, 0pt, 0pt)',
|
|
|
|
|
/* rotate(90deg) skewX(atan(0.5)) scaleX(-1) */
|
|
|
|
|
expected: c('rotate(22.5deg) matrix(1, 0, 0.125, 1, 0, 0) scaleX(0.5)') },
|
|
|
|
|
|
|
|
|
|
// lists vs. matrix decomposition
|
|
|
|
|
{ start: 'translate(10px) skewY(45deg)',
|
|
|
|
|
end: 'translate(30px) skewY(-45deg)',
|
|
|
|
|
expected: 'matrix(1, 0.5, 0, 1, 15px, 0px)' },
|
|
|
|
|
{ start: 'skewY(45deg) rotate(90deg)',
|
|
|
|
|
end: 'skewY(-45deg) rotate(90deg)',
|
|
|
|
|
expected: c('matrix(1, 0.5, 0, 1, 0px, 0px) rotate(90deg)') },
|
|
|
|
|
{ start: 'skewY(45deg) rotate(90deg) translate(0)',
|
|
|
|
|
end: 'skewY(-45deg) rotate(90deg)',
|
|
|
|
|
expected: c('matrix(1, 0.5, 0, 1, 0px, 0px) rotate(90deg)') },
|
|
|
|
|
{ start: 'skewX(45deg) rotate(90deg)',
|
|
|
|
|
end: 'skewX(-45deg) rotate(90deg)',
|
|
|
|
|
expected: c('matrix(1, 0, 0.5, 1, 0px, 0px) rotate(90deg)') },
|
|
|
|
|
{ start: 'skewX(-60deg) rotate(90deg) translate(0)',
|
|
|
|
|
end: 'skewX(60deg) rotate(90deg)',
|
|
|
|
|
expected: c('rotate(120deg) skewX(' +
|
|
|
|
|
Math.atan(Math.tan(Math.PI / 3) / 2) +
|
|
|
|
|
'rad) scale(2, 0.5)') },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
for (var i in tests) {
|
|
|
|
|
var test = tests[i];
|
|
|
|
|
div.style.setProperty("-moz-transition-property", "none", "");
|
|
|
|
|
div.style.setProperty(prop, test.start, "");
|
|
|
|
|
cs.getPropertyValue(prop);
|
|
|
|
|
div.style.setProperty("-moz-transition-property", prop, "");
|
|
|
|
|
div.style.setProperty(prop, test.end, "");
|
|
|
|
|
var actual = cs.getPropertyValue(prop);
|
|
|
|
|
if (!test.round_error_ok || actual == test.expected) {
|
|
|
|
|
// In most cases, we'll get an exact match, but in some cases
|
|
|
|
|
// there can be a small amount of rounding error.
|
|
|
|
|
is(actual, test.expected,
|
|
|
|
|
"interpolation of transitions: " + test.start + " to " + test.end);
|
|
|
|
|
} else {
|
|
|
|
|
function s(mat) {
|
|
|
|
|
return mat.match(/^matrix\(([^,]*), ([^,]*), ([^,]*), ([^,]*), ([^,]*)px, ([^,]*)px\)$/).slice(1,7);
|
|
|
|
|
}
|
|
|
|
|
var pass = true;
|
|
|
|
|
var actual_split = s(actual);
|
|
|
|
|
var expected_split = s(test.expected);
|
|
|
|
|
for (var i = 0; i < 6; ++i) {
|
|
|
|
|
// Allow differences of 1 at the sixth decimal place, and allow
|
|
|
|
|
// a drop extra for floating point error from the subtraction.
|
|
|
|
|
if (Math.abs(Number(actual_split[i]) - Number(expected_split[i])) >
|
|
|
|
|
0.0000011) {
|
|
|
|
|
pass = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
ok(pass,
|
|
|
|
|
"interpolation of transitions: " + test.start + " to " + test.end +
|
|
|
|
|
": " + actual + " should approximately equal " + test.expected);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2009-10-07 20:22:42 -07:00
|
|
|
</script>
|
|
|
|
|
</pre>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
