Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-25 05:41:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 762303 - Unprefix CSS Transition properties and provide temporary aliases for -moz-transition and exposed subproperties. r=dbaron

Browse Source
This commit is contained in:
Emmanuele Bassi 2012-07-08 21:25:10 -04:00
parent 4b04164545
commit 0bfd16993e
28 changed files with 330 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
browser/base/content/tabbrowser.xml
View File

@ -3001,9 +3001,9 @@
let tab = tabs[i];
tab.style.setProperty("max-width", tabWidth, "important");
if (!isEndTab) { // keep tabs the same width
tab.style.MozTransition = "none";
tab.style.transition = "none";
tab.clientTop; // flush styles to skip animation; see bug 649247
tab.style.MozTransition = "";
tab.style.transition = "";
}
}
this._hasTabTempMaxWidth = true;

17
dom/interfaces/css/nsIDOMCSS2Properties.idl
View File

@ -14,7 +14,7 @@
* http://www.w3.org/TR/DOM-Level-2-Style
*/
[builtinclass, scriptable, uuid(7775d662-0b71-4c9d-92c3-4d0a88a6729d)]
[builtinclass, scriptable, uuid(492673d6-039b-4d94-a598-dbf82abc174f)]
interface nsIDOMCSS2Properties : nsISupports
{
attribute DOMString background;
@ -686,6 +686,21 @@ interface nsIDOMCSS2Properties : nsISupports
attribute DOMString MozTextDecorationStyle;
// raises(DOMException) on setting
attribute DOMString transitionProperty;
// raises(DOMException) on setting
attribute DOMString transitionDuration;
// raises(DOMException) on setting
attribute DOMString transitionDelay;
// raises(DOMException) on setting
attribute DOMString transitionTimingFunction;
// raises(DOMException) on setting
attribute DOMString transition;
// raises(DOMException) on setting
attribute DOMString MozTransitionProperty;
// raises(DOMException) on setting

2
layout/base/tests/test_bug731777.html
View File

@ -25,7 +25,7 @@
background-color: #844BCA;
-moz-transform: rotateY(91deg) translateX(0px) translateZ(0px);
-moz-transition: 5s;
transition: 5s;
}
</style>

2
layout/reftests/css-transitions/transitions-inline-already-wrapped-1.html
View File

@ -1,7 +1,7 @@
<html class="reftest-wait">
<title>Test for CSS transitions and re-wrapping of inlines</title>
<style type="text/css">
#test { -moz-transition: 5s color linear 200s; }
#test { transition: 5s color linear 200s; }
</style>
<script type="text/javascript">

2
layout/reftests/css-transitions/transitions-inline-already-wrapped-2.html
View File

@ -1,7 +1,7 @@
<html class="reftest-wait">
<title>Test for CSS transitions and re-wrapping of inlines</title>
<style type="text/css">
#test { -moz-transition: 20ms color linear 0; }
#test { transition: 20ms color linear 0; }
</style>
<script type="text/javascript">

2
layout/reftests/css-transitions/transitions-inline-rewrap-1.html
View File

@ -1,7 +1,7 @@
<html class="reftest-wait">
<title>Test for CSS transitions and re-wrapping of inlines</title>
<style type="text/css">
#test { -moz-transition: 5s color linear 200s; }
#test { transition: 5s color linear 200s; }
</style>
<script type="text/javascript">

2
layout/reftests/css-transitions/transitions-inline-rewrap-2.html
View File

@ -1,7 +1,7 @@
<html class="reftest-wait">
<title>Test for CSS transitions and re-wrapping of inlines</title>
<style type="text/css">
#test { -moz-transition: 20ms color linear 0; }
#test { transition: 20ms color linear 0; }
</style>
<script type="text/javascript">

4
layout/style/crashtests/605689-1.html
View File

@ -5,8 +5,8 @@ function boom()
{
var r = document.documentElement;
r.style.display = "table-cell";
r.style.MozTransitionProperty = "x";
window.getComputedStyle(r).MozTransitionProperty;
r.style.transitionProperty = "x";
window.getComputedStyle(r).transitionProperty;
}
</script>

2
layout/style/crashtests/729126-1.html
View File

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html>
<body style="-moz-transition-duration: 1ms"></body>
<body style="transition-duration: 1ms"></body>
<script>
var body = document.body;
/* flush */ getComputedStyle(body, "").background;

2
layout/style/crashtests/729126-2.html
View File

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html>
<body style="background-size: cover; -moz-transition-duration: 1ms"></body>
<body style="background-size: cover; transition-duration: 1ms"></body>
<script>
var body = document.body;
/* flush */ getComputedStyle(body, "").backgroundSize;

5
layout/style/nsCSSPropAliasList.h
View File

@ -42,6 +42,11 @@ CSS_PROP_ALIAS(-moz-perspective, perspective, MozPerspective, "")
CSS_PROP_ALIAS(-moz-transform-style, transform_style, MozTransformStyle, "")
CSS_PROP_ALIAS(-moz-backface-visibility, backface_visibility, MozBackfaceVisibility, "")
CSS_PROP_ALIAS(-moz-border-image, border_image, MozBorderImage, "")
CSS_PROP_ALIAS(-moz-transition, transition, MozTransition, "")
CSS_PROP_ALIAS(-moz-transition-delay, transition_delay, MozTransitionDelay, "")
CSS_PROP_ALIAS(-moz-transition-duration, transition_duration, MozTransitionDuration, "")
CSS_PROP_ALIAS(-moz-transition-property, transition_property, MozTransitionProperty, "")
CSS_PROP_ALIAS(-moz-transition-timing-function, transition_timing_function, MozTransitionTimingFunction, "")
CSS_PROP_ALIAS(-moz-animation, animation, MozAnimation, "")
CSS_PROP_ALIAS(-moz-animation-delay, animation_delay, MozAnimationDelay, "")
CSS_PROP_ALIAS(-moz-animation-direction, animation_direction, MozAnimationDirection, "")

20
layout/style/nsCSSPropList.h
View File

@ -2666,15 +2666,15 @@ CSS_PROP_POSITION(
offsetof(nsStylePosition, mOffset),
eStyleAnimType_Sides_Top)
CSS_PROP_SHORTHAND(
-moz-transition,
transition,
CSS_PROP_DOMPROP_PREFIXED(Transition),
transition,
Transition,
CSS_PROPERTY_PARSE_FUNCTION,
"")
CSS_PROP_DISPLAY(
-moz-transition-delay,
transition-delay,
transition_delay,
CSS_PROP_DOMPROP_PREFIXED(TransitionDelay),
TransitionDelay,
CSS_PROPERTY_PARSE_VALUE_LIST |
CSS_PROPERTY_VALUE_LIST_USES_COMMAS,
"",
@ -2683,9 +2683,9 @@ CSS_PROP_DISPLAY(
CSS_PROP_NO_OFFSET,
eStyleAnimType_None)
CSS_PROP_DISPLAY(
-moz-transition-duration,
transition-duration,
transition_duration,
CSS_PROP_DOMPROP_PREFIXED(TransitionDuration),
TransitionDuration,
CSS_PROPERTY_PARSE_VALUE_LIST |
CSS_PROPERTY_VALUE_LIST_USES_COMMAS,
"",
@ -2694,9 +2694,9 @@ CSS_PROP_DISPLAY(
CSS_PROP_NO_OFFSET,
eStyleAnimType_None)
CSS_PROP_DISPLAY(
-moz-transition-property,
transition-property,
transition_property,
CSS_PROP_DOMPROP_PREFIXED(TransitionProperty),
TransitionProperty,
CSS_PROPERTY_PARSE_FUNCTION |
CSS_PROPERTY_VALUE_LIST_USES_COMMAS,
"",
@ -2705,9 +2705,9 @@ CSS_PROP_DISPLAY(
CSS_PROP_NO_OFFSET,
eStyleAnimType_None)
CSS_PROP_DISPLAY(
-moz-transition-timing-function,
transition-timing-function,
transition_timing_function,
CSS_PROP_DOMPROP_PREFIXED(TransitionTimingFunction),
TransitionTimingFunction,
CSS_PROPERTY_PARSE_VALUE_LIST |
CSS_PROPERTY_VALUE_LIST_USES_COMMAS,
"",

9
layout/style/nsComputedDOMStyle.cpp
View File

@ -4749,6 +4749,11 @@ nsComputedDOMStyle::GetQueryablePropertyMap(PRUint32* aLength)
COMPUTED_STYLE_MAP_ENTRY_LAYOUT(transform, Transform),
COMPUTED_STYLE_MAP_ENTRY_LAYOUT(transform_origin, TransformOrigin),
COMPUTED_STYLE_MAP_ENTRY(transform_style, TransformStyle),
//// COMPUTED_STYLE_MAP_ENTRY(transition, Transition),
COMPUTED_STYLE_MAP_ENTRY(transition_delay, TransitionDelay),
COMPUTED_STYLE_MAP_ENTRY(transition_duration, TransitionDuration),
COMPUTED_STYLE_MAP_ENTRY(transition_property, TransitionProperty),
COMPUTED_STYLE_MAP_ENTRY(transition_timing_function, TransitionTimingFunction),
COMPUTED_STYLE_MAP_ENTRY(unicode_bidi, UnicodeBidi),
COMPUTED_STYLE_MAP_ENTRY_LAYOUT(vertical_align, VerticalAlign),
COMPUTED_STYLE_MAP_ENTRY(visibility, Visibility),
@ -4818,10 +4823,6 @@ nsComputedDOMStyle::GetQueryablePropertyMap(PRUint32* aLength)
COMPUTED_STYLE_MAP_ENTRY(text_decoration_line, TextDecorationLine),
COMPUTED_STYLE_MAP_ENTRY(text_decoration_style, TextDecorationStyle),
COMPUTED_STYLE_MAP_ENTRY(text_size_adjust, TextSizeAdjust),
COMPUTED_STYLE_MAP_ENTRY(transition_delay, TransitionDelay),
COMPUTED_STYLE_MAP_ENTRY(transition_duration, TransitionDuration),
COMPUTED_STYLE_MAP_ENTRY(transition_property, TransitionProperty),
COMPUTED_STYLE_MAP_ENTRY(transition_timing_function, TransitionTimingFunction),
COMPUTED_STYLE_MAP_ENTRY(user_focus, UserFocus),
COMPUTED_STYLE_MAP_ENTRY(user_input, UserInput),
COMPUTED_STYLE_MAP_ENTRY(user_modify, UserModify),

22
layout/style/test/property_database.js
View File

@ -3143,41 +3143,41 @@ var gCSSProperties = {
],
invalid_values: []
},
"-moz-transition": {
domProp: "MozTransition",
"transition": {
domProp: "transition",
inherited: false,
type: CSS_TYPE_TRUE_SHORTHAND,
subproperties: [ "-moz-transition-property", "-moz-transition-duration", "-moz-transition-timing-function", "-moz-transition-delay" ],
subproperties: [ "transition-property", "transition-duration", "transition-timing-function", "transition-delay" ],
initial_values: [ "all 0s ease 0s", "all", "0s", "0s 0s", "ease" ],
other_values: [ "width 1s linear 2s", "width 1s 2s linear", "width linear 1s 2s", "linear width 1s 2s", "linear 1s width 2s", "linear 1s 2s width", "1s width linear 2s", "1s width 2s linear", "1s 2s width linear", "1s linear width 2s", "1s linear 2s width", "1s 2s linear width", "width linear 1s", "width 1s linear", "linear width 1s", "linear 1s width", "1s width linear", "1s linear width", "1s 2s width", "1s width 2s", "width 1s 2s", "1s 2s linear", "1s linear 2s", "linear 1s 2s", "width 1s", "1s width", "linear 1s", "1s linear", "1s 2s", "2s 1s", "width", "linear", "1s", "height", "2s", "ease-in-out", "2s ease-in", "opacity linear", "ease-out 2s", "2s color, 1s width, 500ms height linear, 1s opacity 4s cubic-bezier(0.0, 0.1, 1.0, 1.0)", "1s \\32width linear 2s", "1s -width linear 2s", "1s -\\32width linear 2s", "1s \\32 0width linear 2s", "1s -\\32 0width linear 2s", "1s \\2width linear 2s", "1s -\\2width linear 2s" ],
invalid_values: [ "2s, 1s width", "1s width, 2s", "2s all, 1s width", "1s width, 2s all", "1s width, 2s none", "2s none, 1s width", "2s inherit", "inherit 2s", "2s width, 1s inherit", "2s inherit, 1s width", "2s initial", "2s all, 1s width", "2s width, 1s all" ]
},
"-moz-transition-delay": {
domProp: "MozTransitionDelay",
"transition-delay": {
domProp: "transitionDelay",
inherited: false,
type: CSS_TYPE_LONGHAND,
initial_values: [ "0s", "0ms" ],
other_values: [ "1s", "250ms", "-100ms", "-1s", "1s, 250ms, 2.3s"],
invalid_values: [ "0", "0px" ]
},
"-moz-transition-duration": {
domProp: "MozTransitionDuration",
"transition-duration": {
domProp: "transitionDuration",
inherited: false,
type: CSS_TYPE_LONGHAND,
initial_values: [ "0s", "0ms" ],
other_values: [ "1s", "250ms", "-1ms", "-2s", "1s, 250ms, 2.3s"],
invalid_values: [ "0", "0px" ]
},
"-moz-transition-property": {
domProp: "MozTransitionProperty",
"transition-property": {
domProp: "transitionProperty",
inherited: false,
type: CSS_TYPE_LONGHAND,
initial_values: [ "all" ],
other_values: [ "none", "left", "top", "color", "width, height, opacity", "foobar", "auto", "\\32width", "-width", "-\\32width", "\\32 0width", "-\\32 0width", "\\2width", "-\\2width" ],
invalid_values: [ "none, none", "all, all", "color, none", "none, color", "all, color", "color, all", "inherit, color", "color, inherit", "initial, color", "color, initial", "none, color", "color, none", "all, color", "color, all" ]
},
"-moz-transition-timing-function": {
domProp: "MozTransitionTimingFunction",
"transition-timing-function": {
domProp: "transitionTimingFunction",
inherited: false,
type: CSS_TYPE_LONGHAND,
initial_values: [ "ease", "cubic-bezier(0.25, 0.1, 0.25, 1.0)" ],

14
layout/style/test/test_garbage_at_end_of_declarations.html
View File

@ -55,13 +55,13 @@ var gAllowsExtra = {
/* These are the reverse of the above list; they're the unusual values
that do allow extra keywords afterwards */
var gAllowsExtraUnusual = {
"-moz-transition": { "all": true, "0s": true, "0s 0s": true, "ease": true,
"1s 2s linear": true, "1s linear 2s": true,
"linear 1s 2s": true, "linear 1s": true,
"1s linear": true, "1s 2s": true, "2s 1s": true,
"linear": true, "1s": true, "2s": true,
"ease-in-out": true, "2s ease-in": true,
"ease-out 2s": true },
"transition": { "all": true, "0s": true, "0s 0s": true, "ease": true,
"1s 2s linear": true, "1s linear 2s": true,
"linear 1s 2s": true, "linear 1s": true,
"1s linear": true, "1s 2s": true, "2s 1s": true,
"linear": true, "1s": true, "2s": true,
"ease-in-out": true, "2s ease-in": true,
"ease-out 2s": true },
"animation": { "none": true, "0s": true, "ease": true,
"normal": true, "running": true, "1.0": true,
"1s 2s linear": true, "1s linear 2s": true,

24
layout/style/test/test_shorthand_property_getters.html
View File

@ -153,18 +153,18 @@ e.setAttribute("style", "background-clip: border-box, padding-box, border-box; b
is(e.style.background, "", "should not have background shorthand (background-size too long)");
// Check that we only serialize transition when the lists are the same length.
e.setAttribute("style", "-moz-transition-property: color, width; -moz-transition-duration: 1s, 200ms; -moz-transition-timing-function: ease-in, linear; -moz-transition-delay: 0s, 1s");
isnot(e.style.MozTransition, "", "should have -moz-transition shorthand (lists same length)");
e.setAttribute("style", "-moz-transition-property: color, width, left; -moz-transition-duration: 1s, 200ms; -moz-transition-timing-function: ease-in, linear; -moz-transition-delay: 0s, 1s");
is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists different lengths)");
e.setAttribute("style", "-moz-transition-property: all; -moz-transition-duration: 1s, 200ms; -moz-transition-timing-function: ease-in, linear; -moz-transition-delay: 0s, 1s");
is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists different lengths)");
e.setAttribute("style", "-moz-transition-property: color, width; -moz-transition-duration: 1s, 200ms, 300ms; -moz-transition-timing-function: ease-in, linear; -moz-transition-delay: 0s, 1s");
is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists different lengths)");
e.setAttribute("style", "-moz-transition-property: color, width; -moz-transition-duration: 1s, 200ms; -moz-transition-timing-function: ease-in, linear, ease-out; -moz-transition-delay: 0s, 1s");
is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists different lengths)");
e.setAttribute("style", "-moz-transition-property: color, width; -moz-transition-duration: 1s, 200ms; -moz-transition-timing-function: ease-in, linear; -moz-transition-delay: 0s, 1s, 0s");
is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists different lengths)");
e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
isnot(e.style.transition, "", "should have transition shorthand (lists same length)");
e.setAttribute("style", "transition-property: color, width, left; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
e.setAttribute("style", "transition-property: all; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms, 300ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear, ease-out; transition-delay: 0s, 1s");
is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s, 0s");
is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
// Check that the 'border' shorthand resets 'border-image' and
// '-moz-border-*-colors', but that other 'border-*' shorthands don't

62
layout/style/test/test_transitions.html
View File

@ -22,7 +22,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=435441
#display .before.started::before, #display .after.started::after {
width: 100px;
text-indent: 100px;
-moz-transition: 8s width ease-in-out, 8s text-indent ease-in-out;
transition: 8s width ease-in-out, 8s text-indent ease-in-out;
}
#display .before::before {
content: "Before";
@ -125,7 +125,7 @@ function make_reference_p() {
var p = document.createElement("p");
p.appendChild(document.createTextNode("reference"));
p.style.textIndent = "0px";
p.style.MozTransition = "8s text-indent linear";
p.style.transition = "8s text-indent linear";
div.appendChild(p);
return p;
}
@ -140,8 +140,8 @@ for (var tf in timingFunctions) {
var t = document.createTextNode("transition-timing-function: " + tf);
p.appendChild(t);
p.style.textIndent = "0px";
p.style.MozTransition = "8s text-indent linear";
p.style.MozTransitionTimingFunction = tf;
p.style.transition = "8s text-indent linear";
p.style.transitionTimingFunction = tf;
div.appendChild(p);
is(getComputedStyle(p, "").textIndent, "0px",
"should be zero before changing value");
@ -159,7 +159,7 @@ for each (var restyleParent in [true, false]) {
" at " + itime + "s");
p.appendChild(t);
p.style.textIndent = "0px";
p.style.MozTransition = "8s text-indent cubic-bezier(0, 1, 1, 0)";
p.style.transition = "8s text-indent cubic-bezier(0, 1, 1, 0)";
if (restyleParent) {
var d = document.createElement("div");
d.appendChild(p);
@ -186,7 +186,7 @@ for (var d = -4; d <= 4; ++d) {
var t = document.createTextNode("transition-delay: " + delay);
p.appendChild(t);
p.style.marginLeft = "0px";
p.style.MozTransition = "4s margin-left ease-out " + delay;
p.style.transition = "4s margin-left ease-out " + delay;
div.appendChild(p);
is(getComputedStyle(p, "").marginLeft, "0px",
"should be zero before changing value");
@ -202,7 +202,7 @@ for (var d = -4; d <= 4; ++d) {
var t = document.createTextNode("transition-delay: " + delay);
p.appendChild(t);
p.style.marginLeft = "0px";
p.style.MozTransition = "0s margin-left linear " + delay;
p.style.transition = "0s margin-left linear " + delay;
div.appendChild(p);
is(getComputedStyle(p, "").marginLeft, "0px",
"should be zero before changing value");
@ -217,7 +217,7 @@ function make_reset_test(transition, description)
var t = document.createTextNode(description);
p.appendChild(t);
p.style.marginLeft = "0px";
p.style.MozTransition = transition;
p.style.transition = transition;
div.appendChild(p);
is(getComputedStyle(p, "").marginLeft, "0px",
"should be zero before changing value");
@ -266,8 +266,8 @@ for (var i in descendant_tests) {
test.childNode.appendChild(document.createTextNode(
"parent with \"" + test.parent_transition + "\" and " +
"child with \"" + test.child_transition + "\""));
test.parentNode.style.MozTransition = test.parent_transition;
test.childNode.style.MozTransition = test.child_transition;
test.parentNode.style.transition = test.parent_transition;
test.childNode.style.transition = test.child_transition;
test.parentNode.style.textIndent = "50px"; // transition from 50 to 150
test.parentNode.style.letterSpacing = "10px"; // transition from 10 to 5
div.appendChild(test.parentNode);
@ -290,26 +290,26 @@ for (var i in descendant_tests) {
// This is because we're implementing the proposal in
// http://lists.w3.org/Archives/Public/www-style/2009Aug/0109.html
var number_tests = [
{ style: "-moz-transition: 4s margin, 8s margin-left" },
{ style: "-moz-transition: 4s margin-left, 8s margin" },
{ style: "-moz-transition-property: margin-left; " +
"-moz-transition-duration: 8s, 2s" },
{ style: "-moz-transition-property: margin-left, margin-left; " +
"-moz-transition-duration: 2s, 8s" },
{ style: "-moz-transition-property: margin-left, margin-left, margin-left; " +
"-moz-transition-duration: 8s, 2s" },
{ style: "-moz-transition-property: margin-left; " +
"-moz-transition-duration: 8s, 16s" },
{ style: "-moz-transition-property: margin-left, margin-left; " +
"-moz-transition-duration: 16s, 8s" },
{ style: "-moz-transition-property: margin-left, margin-left, margin-left; " +
"-moz-transition-duration: 8s, 16s" },
{ style: "-moz-transition-property: text-indent,word-spacing,margin-left; " +
"-moz-transition-duration: 8s; " +
"-moz-transition-delay: 0, 8s" },
{ style: "-moz-transition-property: text-indent,word-spacing,margin-left; " +
"-moz-transition-duration: 8s, 16s; " +
"-moz-transition-delay: 8s, 8s, 0, 8s, 8s, 8s" },
{ style: "transition: 4s margin, 8s margin-left" },
{ style: "transition: 4s margin-left, 8s margin" },
{ style: "transition-property: margin-left; " +
"transition-duration: 8s, 2s" },
{ style: "transition-property: margin-left, margin-left; " +
"transition-duration: 2s, 8s" },
{ style: "transition-property: margin-left, margin-left, margin-left; " +
"transition-duration: 8s, 2s" },
{ style: "transition-property: margin-left; " +
"transition-duration: 8s, 16s" },
{ style: "transition-property: margin-left, margin-left; " +
"transition-duration: 16s, 8s" },
{ style: "transition-property: margin-left, margin-left, margin-left; " +
"transition-duration: 8s, 16s" },
{ style: "transition-property: text-indent,word-spacing,margin-left; " +
"transition-duration: 8s; " +
"transition-delay: 0, 8s" },
{ style: "transition-property: text-indent,word-spacing,margin-left; " +
"transition-duration: 8s, 16s; " +
"transition-delay: 8s, 8s, 0, 8s, 8s, 8s" },
];
for (var i in number_tests) {
@ -333,7 +333,7 @@ function make_display_test(initially_none, text)
var p = document.createElement("p");
p.appendChild(document.createTextNode(text));
p.style.textIndent = "0px";
p.style.MozTransition = "8s text-indent ease-in-out";
p.style.transition = "8s text-indent ease-in-out";
if (initially_none)
p.style.display = "none";
div.appendChild(p);

2
layout/style/test/test_transitions_and_zoom.html
View File

@ -10,7 +10,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=583219
<style type="text/css">
#display {
-moz-transition: margin-left 1s linear;
transition: margin-left 1s linear;
}
</style>

2
layout/style/test/test_transitions_bug537151.html
View File

@ -10,7 +10,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=537151
<style type="text/css">
#display {
-moz-transition: margin-left 200ms;
transition: margin-left 200ms;
}
</style>

2
layout/style/test/test_transitions_cancel_near_end.html
View File

@ -12,7 +12,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=613888
#animated-elements-container > span {
color: black;
background: white;
-moz-transition:
transition:
color 10s ease-out,
background 1s ease-out;
}

8
layout/style/test/test_transitions_computed_value_combinations.html
View File

@ -38,7 +38,7 @@ function myrand()
// Each of these values will also have a "computed" property filled in
// below, so that we ensure it always computes to the same value.
var values = {
"-moz-transition-duration":
"transition-duration":
[
{ lone: true, specified: "-moz-initial" },
{ lone: false, specified: "2s" },
@ -46,7 +46,7 @@ var values = {
{ lone: false, specified: "430ms" },
{ lone: false, specified: "-1s" },
],
"-moz-transition-property":
"transition-property":
[
{ lone: true, specified: "-moz-initial" },
{ lone: true, specified: "none" },
@ -57,7 +57,7 @@ var values = {
{ lone: false, specified: "unsupported-property" },
{ lone: false, specified: "-other-unsupported-property" },
],
"-moz-transition-timing-function":
"transition-timing-function":
[
{ lone: true, specified: "-moz-initial" },
{ lone: false, specified: "linear" },
@ -65,7 +65,7 @@ var values = {
{ lone: false, specified: "ease-in-out" },
{ lone: false, specified: "cubic-bezier(0, 0, 0.63, 1.00)" },
],
"-moz-transition-delay":
"transition-delay":
[
{ lone: true, specified: "-moz-initial" },
{ lone: false, specified: "2s" },

48
layout/style/test/test_transitions_computed_values.html
View File

@ -27,44 +27,44 @@ var c = document.createElement("div");
p.appendChild(c);
var cs = getComputedStyle(c, "");
p.style.MozTransitionProperty = "margin-left, margin-right";
c.style.MozTransitionProperty = "inherit";
is(cs.MozTransitionProperty, "margin-left, margin-right",
p.style.transitionProperty = "margin-left, margin-right";
c.style.transitionProperty = "inherit";
is(cs.transitionProperty, "margin-left, margin-right",
"computed style match with no other properties");
c.style.MozTransitionDuration = "5s";
is(cs.MozTransitionProperty, "margin-left, margin-right",
c.style.transitionDuration = "5s";
is(cs.transitionProperty, "margin-left, margin-right",
"computed style match with shorter property");
is(cs.MozTransitionDuration, "5s",
is(cs.transitionDuration, "5s",
"shorter property not extended");
c.style.MozTransitionDuration = "5s, 4s, 3s, 2000ms";
is(cs.MozTransitionProperty, "margin-left, margin-right",
c.style.transitionDuration = "5s, 4s, 3s, 2000ms";
is(cs.transitionProperty, "margin-left, margin-right",
"computed style match with longer property");
is(cs.MozTransitionDuration, "5s, 4s, 3s, 2s",
is(cs.transitionDuration, "5s, 4s, 3s, 2s",
"longer property computed correctly");
p.style.MozTransitionProperty = "";
c.style.MozTransitionProperty = "";
c.style.MozTransitionDuration = "";
p.style.transitionProperty = "";
c.style.transitionProperty = "";
c.style.transitionDuration = "";
// and repeat the above set of tests with property and duration swapped
p.style.MozTransitionDuration = "5s, 4s";
c.style.MozTransitionDuration = "inherit";
is(cs.MozTransitionDuration, "5s, 4s",
p.style.transitionDuration = "5s, 4s";
c.style.transitionDuration = "inherit";
is(cs.transitionDuration, "5s, 4s",
"computed style match with no other properties");
c.style.MozTransitionProperty = "margin-left";
is(cs.MozTransitionDuration, "5s, 4s",
c.style.transitionProperty = "margin-left";
is(cs.transitionDuration, "5s, 4s",
"computed style match with shorter property");
is(cs.MozTransitionProperty, "margin-left",
is(cs.transitionProperty, "margin-left",
"shorter property not extended");
c.style.MozTransitionProperty =
c.style.transitionProperty =
"margin-left, margin-right, margin-top, margin-bottom";
is(cs.MozTransitionDuration, "5s, 4s",
is(cs.transitionDuration, "5s, 4s",
"computed style match with longer property");
is(cs.MozTransitionProperty,
is(cs.transitionProperty,
"margin-left, margin-right, margin-top, margin-bottom",
"longer property computed correctly");
p.style.MozTransitionDuration = "";
c.style.MozTransitionDuration = "";
c.style.MozTransitionProperty = "";
p.style.transitionDuration = "";
c.style.transitionDuration = "";
c.style.transitionProperty = "";
// And do the same pair of tests for animations:

26
layout/style/test/test_transitions_dynamic_changes.html
View File

@ -19,34 +19,34 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=525530
var p = document.getElementById("display");
var cs = getComputedStyle(p, "");
p.style.MozTransitionProperty = "all";
p.style.MozTransitionDuration = "4s";
p.style.MozTransitionDelay = "-2s";
p.style.MozTransitionTimingFunction = "linear";
p.style.transitionProperty = "all";
p.style.transitionDuration = "4s";
p.style.transitionDelay = "-2s";
p.style.transitionTimingFunction = "linear";
is(cs.textIndent, "100px", "initial value");
p.style.textIndent = "0";
is(cs.textIndent, "50px", "transition is halfway");
p.style.MozTransitionDuration = "0s";
p.style.transitionDuration = "0s";
is(cs.textIndent, "50px", "changing duration doesn't change transitioning");
p.style.MozTransitionDelay = "0s";
p.style.transitionDelay = "0s";
is(cs.textIndent, "50px", "changing delay doesn't change transitioning");
p.style.MozTransitionProperty = "text-indent";
p.style.transitionProperty = "text-indent";
is(cs.textIndent, "50px",
"irrelevant change to transition property doesn't change transitioning");
p.style.MozTransitionProperty = "font";
p.style.transitionProperty = "font";
is(cs.textIndent, "0px",
"relevant change to transition property does change transitioning");
/** Test for Bug 522643 */
p.style.MozTransitionDuration = "4s";
p.style.MozTransitionDelay = "-2s";
p.style.MozTransitionProperty = "text-indent";
p.style.transitionDuration = "4s";
p.style.transitionDelay = "-2s";
p.style.transitionProperty = "text-indent";
p.style.textIndent = "100px";
is(cs.textIndent, "50px", "transition is halfway");
p.style.MozTransitionDuration = "0s";
p.style.MozTransitionDelay = "0s";
p.style.transitionDuration = "0s";
p.style.transitionDelay = "0s";
is(cs.textIndent, "50px",
"changing duration and delay doesn't change transitioning");
p.style.textIndent = "0px";

20
layout/style/test/test_transitions_events.html
View File

@ -12,12 +12,12 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=531585
.bar { margin: 10px; }
#one { -moz-transition-duration: 500ms; -moz-transition-property: all; }
#two { -moz-transition: margin-left 1s; }
#three { -moz-transition: margin 0.5s 0.25s; }
#one { transition-duration: 500ms; transition-property: all; }
#two { transition: margin-left 1s; }
#three { transition: margin 0.5s 0.25s; }
#four, #five, #six, #seven::before, #seven::after {
-moz-transition: 500ms color;
transition: 500ms color;
border-color: black; /* don't derive from color */
-moz-column-rule-color: black; /* don't derive from color */
-moz-text-decoration-color: black; /* don't derive from color */
@ -26,14 +26,14 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=531585
#four {
/* give the reversing transition a long duration; the reversing will
still be quick */
-moz-transition-duration: 30s;
-moz-transition-timing-function: cubic-bezier(0, 1, 1, 0);
transition-duration: 30s;
transition-timing-function: cubic-bezier(0, 1, 1, 0);
}
/* make sure we don't get events for the pseudo-elements */
#seven::before, #seven::after {
content: "x";
-moz-transition-duration: 50ms;
transition-duration: 50ms;
}
#seven[foo]::before, #seven[foo]::after { color: lime; }
@ -272,9 +272,9 @@ setTimeout(function() {
// The transition hasn't finished already.
did_stops = true;
}
$("five").style.MozTransitionProperty = "margin-left";
$("six").style.MozTransitionDuration = "0s";
$("six").style.MozTransitionDelay = "0s";
$("five").style.transitionProperty = "margin-left";
$("six").style.transitionDuration = "0s";
$("six").style.transitionDelay = "0s";
$("six").style.color = "blue";
}, 100);
function poll_start_reversal() {

300
layout/style/test/test_transitions_per_property.html
View File

@ -268,7 +268,7 @@ for (prop in gCSSProperties) {
var info = gCSSProperties[prop];
if (!(prop in supported_properties) &&
info.type != CSS_TYPE_TRUE_SHORTHAND &&
!prop.match(/^-moz-transition-/) &&
!prop.match(/^transition-/) &&
// FIXME (Bug 119078): THIS SHOULD REALLY NOT BE NEEDED!
prop != "-moz-binding") {
@ -288,7 +288,7 @@ for (prop in gCSSProperties) {
}
div.style.removeProperty(prop);
div.style.setProperty("-moz-transition", prop + " 20s linear", "");
div.style.setProperty("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], "");
@ -302,7 +302,7 @@ for (prop in gCSSProperties) {
}
}
div.style.removeProperty("-moz-transition");
div.style.removeProperty("transition");
div.style.removeProperty(prop);
if ("prerequisites" in info) {
var prereqs = info.prerequisites;
@ -317,9 +317,9 @@ for (prop in gCSSProperties) {
// linear timing function so that we can expect the transition to be
// one quarter of the way through the value space right after changing
// the property.
div.style.setProperty("-moz-transition-duration", "4s", "");
div.style.setProperty("-moz-transition-delay", "-1s", "");
div.style.setProperty("-moz-transition-timing-function", "linear", "");
div.style.setProperty("transition-duration", "4s", "");
div.style.setProperty("transition-delay", "-1s", "");
div.style.setProperty("transition-timing-function", "linear", "");
for (prop in supported_properties) {
var tinfo = supported_properties[prop];
var info = gCSSProperties[prop];
@ -342,7 +342,7 @@ for (prop in supported_properties) {
}
// Make sure to unset the property and stop transitions on it.
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.removeProperty(prop);
cs.getPropertyValue(prop);
@ -353,7 +353,7 @@ for (prop in supported_properties) {
}
}
}
div.style.removeProperty("-moz-transition");
div.style.removeProperty("transition");
function get_distance(prop, v1, v2)
{
@ -377,11 +377,11 @@ function check_distance(prop, start, quarter, end)
}
function test_length_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("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("transition-property", prop, "");
div.style.setProperty(prop, "12px", "");
is(cs.getPropertyValue(prop), "6px",
"length-valued property " + prop + ": interpolation of lengths");
@ -397,25 +397,25 @@ function test_length_unclamped(prop) {
}
function test_length_clamped_or_unclamped(prop, is_clamped) {
div.style.setProperty("-moz-transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "0px", "");
is(cs.getPropertyValue(prop), "0px",
"length-valued property " + prop + ": flush before clamping test");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "100px", "");
(is_clamped ? is : isnot)(cs.getPropertyValue(prop), "0px",
"length-valued property " + prop + ": clamping of negatives");
div.style.setProperty("-moz-transition-timing-function", "linear", "");
div.style.setProperty("transition-timing-function", "linear", "");
}
// 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("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("transition-property", prop, "");
div.style.setProperty(prop, "0.8", "");
is(cs.getPropertyValue(prop), "0.425",
"float-valued property " + prop + ": interpolation of floats");
@ -430,25 +430,25 @@ function test_float_zeroToOne_unclamped(prop) {
}
function test_float_zeroToOne_clamped_or_unclamped(prop, is_clamped) {
div.style.setProperty("-moz-transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "0", "");
is(cs.getPropertyValue(prop), "0",
"float-valued property " + prop + ": flush before clamping test");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "1", "");
(is_clamped ? is : isnot)(cs.getPropertyValue(prop), "0",
"float-valued property " + prop + ": clamping of negatives");
div.style.setProperty("-moz-transition-timing-function", "linear", "");
div.style.setProperty("transition-timing-function", "linear", "");
}
// 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("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("transition-property", prop, "");
div.style.setProperty(prop, "2.1", "");
is(cs.getPropertyValue(prop), "1.275",
"float-valued property " + prop + ": interpolation of floats");
@ -456,20 +456,20 @@ function test_float_aboveOne_transition(prop) {
}
function test_float_aboveOne_clamped(prop) {
div.style.setProperty("-moz-transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "1", "");
is(cs.getPropertyValue(prop), "1",
"float-valued property " + prop + ": flush before clamping test");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "5", "");
is(cs.getPropertyValue(prop), "1",
"float-valued property " + prop + ": clamping of negatives");
div.style.setProperty("-moz-transition-timing-function", "linear", "");
div.style.setProperty("transition-timing-function", "linear", "");
}
function test_percent_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "25%", "");
var av = cs.getPropertyValue(prop);
var a = any_unit_to_num(av);
@ -478,7 +478,7 @@ function test_percent_transition(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("transition-property", prop, "");
div.style.setProperty(prop, "25%", "");
var res = cs.getPropertyValue(prop);
is(any_unit_to_num(res) * 4, 3 * b + a,
@ -498,19 +498,19 @@ function test_percent_unclamped(prop) {
}
function test_percent_clamped_or_unclamped(prop, is_clamped) {
div.style.setProperty("-moz-transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "0%", "");
var zero_val = cs.getPropertyValue(prop); // flushes too
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "150%", "");
(is_clamped ? is : isnot)(cs.getPropertyValue(prop), zero_val,
"percent-valued property " + prop + ": clamping of negatives");
div.style.setProperty("-moz-transition-timing-function", "linear", "");
div.style.setProperty("transition-timing-function", "linear", "");
}
function test_length_percent_calc_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "0%", "");
var av = cs.getPropertyValue(prop);
var a = any_unit_to_num(av);
@ -529,31 +529,31 @@ function test_length_percent_calc_transition(prop) {
"computed value before transition for " + prop + ": '" +
v1v + "' should be halfway " +
"between '" + av + "' + and '" + bv + "'.");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "200px", "");
var v2v = cs.getPropertyValue(prop);
is(any_unit_to_num(v2v) * 8, 5*a + 3*b + 4*c,
"interpolation between length and percent for " + prop + ": '"
+ v2v + "'");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "-moz-calc(25% + 100px)", "");
v1v = cs.getPropertyValue(prop);
is(any_unit_to_num(v1v) * 4, b + 4*c,
"computed value before transition for " + prop + ": '" + v1v + "'");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "75%", "");
v2v = cs.getPropertyValue(prop);
is(any_unit_to_num(v2v) * 8, 5*a + 3*b + 6*c,
"interpolation between calc() and percent for " + prop + ": '" +
v2v + "'");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "150px", "");
v1v = cs.getPropertyValue(prop);
is(any_unit_to_num(v1v) * 2, c * 3,
"computed value before transition for " + prop + ": '" + v1v + "'");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "-moz-calc(50% + 50px)", "");
v2v = cs.getPropertyValue(prop);
is(any_unit_to_num(v2v) * 8, 7 * a + b + 10*c,
@ -568,22 +568,22 @@ function test_length_percent_calc_transition(prop) {
}
function test_color_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "rgb(255, 28, 0)", "");
is(cs.getPropertyValue(prop), "rgb(255, 28, 0)",
"color-valued property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "rgb(75, 84, 128)", "");
is(cs.getPropertyValue(prop), "rgb(210, 42, 32)",
"color-valued property " + prop + ": interpolation of colors");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("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("transition-property", prop, "");
div.style.setProperty(prop, "currentColor", "");
is(cs.getPropertyValue(prop), "rgb(96, 48, 32)",
"color-valued property " + prop + ": interpolation of currentColor");
@ -594,8 +594,8 @@ function test_color_transition(prop) {
(prop == "color" ? div.parentNode : div).style.removeProperty("color");
div.style.setProperty("-moz-transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "rgb(0, 255, 0)", "");
var vals = cs.getPropertyValue(prop).match(/rgb\(([^, ]*), ([^, ]*), ([^, ]*)\)/);
is(vals.length, 4,
@ -606,7 +606,7 @@ function test_color_transition(prop) {
"color-valued property " + prop + ": flush before clamping test (green)");
is(vals[3], "0",
"color-valued property " + prop + ": flush before clamping test (blue)");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "rgb(255, 0, 128)", "");
// FIXME: Once we support non-sRGB colors, these tests will need fixing.
vals = cs.getPropertyValue(prop).match(/rgb\(([^, ]*), ([^, ]*), ([^, ]*)\)/);
@ -618,16 +618,16 @@ function test_color_transition(prop) {
"color-valued property " + prop + ": clamping of above-range (green)");
is(vals[3], "0",
"color-valued property " + prop + ": clamping of negatives (blue)");
div.style.setProperty("-moz-transition-timing-function", "linear", "");
div.style.setProperty("transition-timing-function", "linear", "");
}
function test_border_color_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("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.setProperty("transition-property", prop, "");
div.style.removeProperty(prop);
is(cs.getPropertyValue(prop), "rgb(96, 48, 32)",
"color-valued property " + prop + ": interpolation of initial value");
@ -640,22 +640,22 @@ function test_border_color_transition(prop) {
function test_shadow_transition(prop) {
var spreadStr = (prop == "box-shadow") ? " 0px" : "";
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("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("transition-property", prop, "");
div.style.setProperty(prop, "4px 8px 3px red", "");
is(cs.getPropertyValue(prop), "rgba(255, 0, 0, 0.25) 1px 2px 0.75px" + spreadStr,
"shadow-valued property " + prop + ": interpolation of shadows");
check_distance(prop, "none", "rgba(255, 0, 0, 0.25) 1px 2px 0.75px",
"4px 8px 3px red");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
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,
"shadow-valued property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "8px 8px 8px red", "");
is(cs.getPropertyValue(prop), "rgb(66, 96, 0) 5px 5px 2px" + spreadStr + ", rgba(0, 0, 255, 0.75) 1.5px 1.5px 0px" + spreadStr,
"shadow-valued property " + prop + ": interpolation of shadows");
@ -688,12 +688,12 @@ function test_shadow_transition(prop) {
"shadow-valued property " + prop + ": interpolation without color");
check_distance(prop, "2px 2px 2px", "3px 5px 4px", "6px 14px 10px");
div.style.setProperty("-moz-transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "0px 0px 0px black", "");
is(cs.getPropertyValue(prop), "rgb(0, 0, 0) 0px 0px 0px" + spreadStr,
"shadow-valued property " + prop + ": flush before clamping test");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "10px 10px 10px black", "");
var vals = cs.getPropertyValue(prop).split(" ");
is(vals.length, 6 + (prop == "box-shadow"), "unexpected number of values");
@ -706,11 +706,11 @@ function test_shadow_transition(prop) {
is(vals[5], "0px",
"shadow-valued property " + prop + " (radius): clamping of negatives");
if (prop == "box-shadow") {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "0px 0px 0px 0px black", "");
is(cs.getPropertyValue(prop), "rgb(0, 0, 0) 0px 0px 0px 0px",
"shadow-valued property " + prop + ": flush before clamping test");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "10px 10px 10px 10px black", "");
var vals = cs.getPropertyValue(prop).split(" ");
is(vals.length, 7, "unexpected number of values");
@ -725,16 +725,16 @@ function test_shadow_transition(prop) {
isnot(vals[6], "0px",
"shadow-valued property " + prop + " (spread): clamping of negatives");
}
div.style.setProperty("-moz-transition-timing-function", "linear", "");
div.style.setProperty("transition-timing-function", "linear", "");
}
function test_dasharray_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("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, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "15px", "");
is(cs.getPropertyValue(prop), "6",
"dasharray-valued property " + prop + ": interpolation of dasharray");
@ -770,20 +770,20 @@ function test_dasharray_transition(prop) {
"dasharray-valued property " + prop + ": interpolation of dasharray");
check_distance(prop, "2,50%,6,10", "3, 45%, 5, 8", "6,30%,2,2");
div.style.setProperty("-moz-transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "0,0%", "");
is(cs.getPropertyValue(prop), "0, 0%",
"dasharray-valued property " + prop + ": flush before clamping test");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "5, 25%", "");
is(cs.getPropertyValue(prop), "0, 0%",
"dasharray-valued property " + prop + ": clamping of negatives");
div.style.setProperty("-moz-transition-timing-function", "linear", "");
div.style.setProperty("transition-timing-function", "linear", "");
}
function test_radius_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("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.
@ -798,43 +798,43 @@ function test_radius_transition(prop) {
is(cs.getPropertyValue(prop), "3px",
"radius-valued property " + prop +
": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "15px", "");
is(cs.getPropertyValue(prop), "6px",
"radius-valued property " + prop + ": interpolation of radius");
check_distance(prop, "3px", "6px", "15px");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "12.5%", "");
is(cs.getPropertyValue(prop), "32px",
"radius-valued property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "25%", "");
is(cs.getPropertyValue(prop), "40px",
"radius-valued property " + prop + ": interpolation of radius");
check_distance(prop, "12.5%", "15.625%", "25%");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "3px 8px", "");
is(cs.getPropertyValue(prop), "3px 8px",
"radius-valued property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "15px 12px", "");
is(cs.getPropertyValue(prop), "6px 9px",
"radius-valued property " + prop + ": interpolation of radius");
check_distance(prop, "3px 8px", "6px 9px", "15px 12px");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "12.5% 6.25%", "");
is(cs.getPropertyValue(prop), "32px 16px",
"radius-valued property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "25%", "");
is(cs.getPropertyValue(prop), "40px 28px",
"radius-valued property " + prop + ": interpolation of radius");
check_distance(prop, "12.5% 6.25%", "15.625% 10.9375%", "25%");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "6.25% 12.5%", "");
is(cs.getPropertyValue(prop), "16px 32px",
"radius-valued property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "64px 16px", "");
is(cs.getPropertyValue(prop), "28px",
"radius-valued property " + prop + ": interpolation of radius with mixed units");
@ -842,16 +842,16 @@ function test_radius_transition(prop) {
"-moz-calc(4.6875% + 16px) -moz-calc(9.375% + 4px)",
"64px 16px");
div.style.setProperty("-moz-transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "0px 0px", "");
is(cs.getPropertyValue(prop), "0px",
"radius-valued property " + prop + ": flush before clamping test");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "10px 20px", "");
is(cs.getPropertyValue(prop), "0px",
"radius-valued property " + prop + ": clamping of negatives");
div.style.setProperty("-moz-transition-timing-function", "linear", "");
div.style.setProperty("transition-timing-function", "linear", "");
test_length_percent_calc_transition(prop);
@ -862,129 +862,129 @@ function test_radius_transition(prop) {
}
function test_integer_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("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, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "-14", "");
is(cs.getPropertyValue(prop), "-1",
"integer-valued property " + prop + ": interpolation of integers");
check_distance(prop, "6", "1", "-14");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("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, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "8", "");
is(cs.getPropertyValue(prop), "-1",
"integer-valued property " + prop + ": interpolation of integers");
check_distance(prop, "-4", "-1", "8");
div.style.setProperty("-moz-transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "0", "");
is(cs.getPropertyValue(prop), "0",
"integer-valued property " + prop + ": flush before clamping test");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "100", "");
isnot(cs.getPropertyValue(prop), "0",
"integer-valued property " + prop + ": clamping of negatives");
div.style.setProperty("-moz-transition-timing-function", "linear", "");
div.style.setProperty("transition-timing-function", "linear", "");
}
function test_font_stretch(prop) {
is(prop, "font-stretch", "only designed for one property");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("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("transition-property", prop, "");
div.style.setProperty(prop, "ultra-expanded", "");
is(cs.getPropertyValue(prop), "semi-expanded",
"font-stretch property " + prop + ": interpolation of font-stretches");
check_distance(prop, "normal", "semi-expanded", "ultra-expanded");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "expanded", "");
is(cs.getPropertyValue(prop), "expanded",
"font-stretch property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "extra-condensed", "");
is(cs.getPropertyValue(prop), "normal",
"font-stretch property " + prop + ": interpolation of font-stretches");
check_distance(prop, "expanded", "semi-expanded", "condensed");
div.style.setProperty("-moz-transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "ultra-condensed", "");
is(cs.getPropertyValue(prop), "ultra-condensed",
"font-stretch property " + prop + ": flush before clamping test");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "ultra-expanded", "");
is(cs.getPropertyValue(prop), "ultra-condensed",
"font-stretch property " + prop + ": clamping of values");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "ultra-expanded", "");
is(cs.getPropertyValue(prop), "ultra-expanded",
"font-stretch property " + prop + ": flush before clamping test");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "ultra-condensed", "");
is(cs.getPropertyValue(prop), "ultra-expanded",
"font-stretch property " + prop + ": clamping of values");
div.style.setProperty("-moz-transition-timing-function", "linear", "");
div.style.setProperty("transition-timing-function", "linear", "");
}
function test_font_weight(prop) {
is(prop, "font-weight", "only designed for one property");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "normal", "");
is(cs.getPropertyValue(prop), "400",
"font-weight property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "900", "");
is(cs.getPropertyValue(prop), "500",
"font-weight property " + prop + ": interpolation of font-weights");
check_distance(prop, "400", "500", "800");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "900", "");
is(cs.getPropertyValue(prop), "900",
"font-weight property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "100", "");
is(cs.getPropertyValue(prop), "700",
"font-weight property " + prop + ": interpolation of font-weights");
check_distance(prop, "900", "700", "100");
div.style.setProperty("-moz-transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "100", "");
is(cs.getPropertyValue(prop), "100",
"font-weight property " + prop + ": flush before clamping test");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "900", "");
is(cs.getPropertyValue(prop), "100",
"font-weight property " + prop + ": clamping of values");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "900", "");
is(cs.getPropertyValue(prop), "900",
"font-weight property " + prop + ": flush before clamping test");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "100", "");
is(cs.getPropertyValue(prop), "900",
"font-weight property " + prop + ": clamping of values");
div.style.setProperty("-moz-transition-timing-function", "linear", "");
div.style.setProperty("transition-timing-function", "linear", "");
}
function test_pos_integer_or_auto_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("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, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "11", "");
is(cs.getPropertyValue(prop), "5",
"integer-valued property " + prop + ": interpolation of integers");
@ -1002,24 +1002,24 @@ function test_pos_integer_or_auto_transition(prop) {
}
function test_integer_at_least_one_clamping(prop) {
div.style.setProperty("-moz-transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "1", "");
is(cs.getPropertyValue(prop), "1",
"integer-valued property " + prop + ": flush before clamping test");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "5", "");
is(cs.getPropertyValue(prop), "1",
"integer-valued property " + prop + ": clamping of negatives");
div.style.setProperty("-moz-transition-timing-function", "linear", "");
div.style.setProperty("transition-timing-function", "linear", "");
}
function test_length_pair_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "4px 6px", "");
is(cs.getPropertyValue(prop), "4px 6px",
"length-valued property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "12px 10px", "");
is(cs.getPropertyValue(prop), "6px 7px",
"length-valued property " + prop + ": interpolation of lengths");
@ -1027,24 +1027,24 @@ function test_length_pair_transition(prop) {
}
function test_length_pair_transition_clamped(prop) {
div.style.setProperty("-moz-transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "0px 0px", "");
is(cs.getPropertyValue(prop), "0px 0px",
"length-valued property " + prop + ": flush before clamping test");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "30px 50px", "");
is(cs.getPropertyValue(prop), "0px 0px",
"length-valued property " + prop + ": clamping of negatives");
div.style.setProperty("-moz-transition-timing-function", "linear", "");
div.style.setProperty("transition-timing-function", "linear", "");
}
function test_length_percent_pair_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "4px 50%", "");
is(cs.getPropertyValue(prop), "4px 5px",
"length-valued property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "12px 70%", "");
is(cs.getPropertyValue(prop), "6px 5.5px",
"length-valued property " + prop + ": interpolation of lengths");
@ -1060,24 +1060,24 @@ function test_length_percent_pair_unclamped(prop) {
}
function test_length_percent_pair_clamped_or_unclamped(prop, is_clamped) {
div.style.setProperty("-moz-transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "0px 0%", "");
is(cs.getPropertyValue(prop), "0px 0px",
"length+percent-valued property " + prop + ": flush before clamping test");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "30px 25%", "");
(is_clamped ? is : isnot)(cs.getPropertyValue(prop), "0px 0px",
"length+percent-valued property " + prop + ": clamping of negatives");
div.style.setProperty("-moz-transition-timing-function", "linear", "");
div.style.setProperty("transition-timing-function", "linear", "");
}
function test_rect_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "rect(4px, 16px, 12px, 6px)", "");
is(cs.getPropertyValue(prop), "rect(4px, 16px, 12px, 6px)",
"rect-valued property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "rect(0px, 4px, 4px, 2px)", "");
is(cs.getPropertyValue(prop), "rect(3px, 13px, 10px, 5px)",
"rect-valued property " + prop + ": interpolation of rects");
@ -1094,8 +1094,8 @@ function test_rect_transition(prop) {
is(cs.getPropertyValue(prop), "auto",
"rect-valued property " + prop + ": can't interpolate auto components");
div.style.setProperty("-moz-transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "rect(-10px, 30px, 0px, 0px)", "");
var vals = cs.getPropertyValue(prop).match(/rect\(([^, ]*), ([^, ]*), ([^, ]*), ([^, ]*)\)/);
is(vals.length, 5,
@ -1108,7 +1108,7 @@ function test_rect_transition(prop) {
"rect-valued property " + prop + ": flush before clamping test (bottom)");
is(vals[4], "0px",
"rect-valued property " + prop + ": flush before clamping test (left)");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "rect(0px, 40px, 10px, 10px)", "");
vals = cs.getPropertyValue(prop).match(/rect\(([^, ]*), ([^, ]*), ([^, ]*), ([^, ]*)\)/);
is(vals.length, 5,
@ -1121,15 +1121,15 @@ function test_rect_transition(prop) {
"rect-valued property " + prop + ": clamping of negatives (bottom)");
isnot(vals[4], "0px",
"rect-valued property " + prop + ": clamping of negatives (left)");
div.style.setProperty("-moz-transition-timing-function", "linear", "");
div.style.setProperty("transition-timing-function", "linear", "");
}
function test_visibility_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("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("transition-property", prop, "");
div.style.setProperty(prop, "hidden", "");
is(cs.getPropertyValue(prop), "visible",
"visibility property " + prop + ": interpolation of visibility");
@ -1140,32 +1140,32 @@ function test_visibility_transition(prop) {
is(get_distance(prop, "hidden", "hidden"), 0,
"distance between hidden and hidden should not be zero");
div.style.setProperty("-moz-transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "visible", "");
is(cs.getPropertyValue(prop), "visible",
"visibility property " + prop + ": flush before clamping test");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "hidden", "");
is(cs.getPropertyValue(prop), "visible",
"visibility property " + prop + ": clamping of negatives");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "hidden", "");
is(cs.getPropertyValue(prop), "hidden",
"visibility property " + prop + ": flush before clamping test");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "visible", "");
is(cs.getPropertyValue(prop), "hidden",
"visibility property " + prop + ": clamping of negatives");
div.style.setProperty("-moz-transition-timing-function", "linear", "");
div.style.setProperty("transition-timing-function", "linear", "");
}
function test_background_size_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("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("transition-property", prop, "");
div.style.setProperty(prop, "100% 100%", "");
is(cs.getPropertyValue(prop), "62.5% 85%",
"property " + prop + ": interpolation of percents");
@ -1177,11 +1177,11 @@ function test_background_size_transition(prop) {
}
function test_background_position_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("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("transition-property", prop, "");
div.style.setProperty(prop, "bottom right", "");
is(cs.getPropertyValue(prop), "62.5% 85%",
"property " + prop + ": interpolation of percents");
@ -1190,31 +1190,31 @@ function test_background_position_transition(prop) {
}
function test_background_position_size_common(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "40% 0%", "");
is(cs.getPropertyValue(prop), "40% 0%",
"property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "0% 0%", "");
is(cs.getPropertyValue(prop), "30% 0%",
"property " + prop + ": interpolation of percentages");
check_distance(prop, "40% 0%", "30% 0%", "0% 0%");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "0% 40%", "");
is(cs.getPropertyValue(prop), "0% 40%",
"property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "0% 0%", "");
is(cs.getPropertyValue(prop), "0% 30%",
"property " + prop + ": interpolation of percentages");
check_distance(prop, "0% 40%", "0% 30%", "0% 0%");
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "10px 40px", "");
is(cs.getPropertyValue(prop), "10px 40px",
"property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "50px 0", "");
is(cs.getPropertyValue(prop), "20px 30px",
"property " + prop + ": interpolation of lengths");
@ -1589,10 +1589,10 @@ function test_transform_transition(prop) {
if (test.requires_3d && !transform3D_enabled()) {
continue;
}
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, test.start, "");
cs.getPropertyValue(prop);
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, test.end, "");
var actual = cs.getPropertyValue(prop);
if (!test.round_error_ok || actual == test.expected) {

6
layout/style/test/test_transitions_step_functions.html
View File

@ -11,7 +11,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=435441
<style type="text/css">
p.transition {
-moz-transition: margin-top 100s linear;
transition: margin-top 100s linear;
}
</style>
@ -33,8 +33,8 @@ function run_test(tf, percent, value)
p.className = "transition";
p.style.marginTop = "0px";
// be this percent of the way through a 100s transition
p.style.MozTransitionDelay = (percent * -100) + "s";
p.style.MozTransitionTimingFunction = tf;
p.style.transitionDelay = (percent * -100) + "s";
p.style.transitionTimingFunction = tf;
display.appendChild(p);
var cs = getComputedStyle(p, "");
var flush1 = cs.marginTop;

20
layout/style/test/test_unclosed_parentheses.html
View File

@ -211,16 +211,16 @@ var declarations = [
"content: attr(| ",
"content: attr(|href",
"content: attr(|href ",
"-moz-transition-timing-function: cubic-bezier(",
"-moz-transition-timing-function: cubic-bezier( ",
"-moz-transition-timing-function: cubic-bezier(0, 0, 1",
"-moz-transition-timing-function: cubic-bezier(0, 0, 1 ",
"-moz-transition-timing-function: cubic-bezier(0, 0, 1,",
"-moz-transition-timing-function: cubic-bezier(0, 0, 1, ",
"-moz-transition-timing-function: cubic-bezier(0, 0, 1, 1",
"-moz-transition-timing-function: cubic-bezier(0, 0, 1, 1 ",
"-moz-transition-timing-function: cubic-bezier(0, 0, 1, 1,",
"-moz-transition-timing-function: cubic-bezier(0, 0, 1, 1, ",
"transition-timing-function: cubic-bezier(",
"transition-timing-function: cubic-bezier( ",
"transition-timing-function: cubic-bezier(0, 0, 1",
"transition-timing-function: cubic-bezier(0, 0, 1 ",
"transition-timing-function: cubic-bezier(0, 0, 1,",
"transition-timing-function: cubic-bezier(0, 0, 1, ",
"transition-timing-function: cubic-bezier(0, 0, 1, 1",
"transition-timing-function: cubic-bezier(0, 0, 1, 1 ",
"transition-timing-function: cubic-bezier(0, 0, 1, 1,",
"transition-timing-function: cubic-bezier(0, 0, 1, 1, ",
"border-top-width: -moz-calc(",
"border-top-width: -moz-calc( ",
"border-top-width: -moz-calc(2em",

10
layout/style/test/test_units_time.html
View File

@ -29,14 +29,14 @@ var tests = {
var p = document.getElementById("display");
for (var test in tests) {
p.setAttribute("style", "-moz-transition-duration: " + test);
is(p.style.getPropertyValue("-moz-transition-duration"), test,
p.setAttribute("style", "transition-duration: " + test);
is(p.style.getPropertyValue("transition-duration"), test,
test + " serializes to exactly itself");
var equiv = tests[test];
if (equiv) {
var cm1 = getComputedStyle(p, "").MozTransitionDuration;
p.style.MozTransitionDuration = equiv;
var cm2 = getComputedStyle(p, "").MozTransitionDuration;
var cm1 = getComputedStyle(p, "").transitionDuration;
p.style.transitionDuration = equiv;
var cm2 = getComputedStyle(p, "").transitionDuration;
is(cm1, cm2, test + " should compute to the same as " + equiv);
}
}