[CherryPick] WebKit does not reject some cubic-bezier form values for transition...

    [Title] [CherryPick] WebKit does not reject some cubic-bezier form values for transition-timing-function.
    [Issues] TWEB-828, TWEB-828
    [Problem] WebKit does not reject some cubic-bezier form values for transition-timing-function.
    [Solution] Cherry picked.
    [Cherry-Picker] HunseopJeong <hs85.jeong@samsung.com>

WebKit does not reject some cubic-bezier form values for transition-timing-function.
https://bugs.webkit.org/show_bug.cgi?id=106369

Reviewed by Dean Jackson.

Source/WebCore:

http://www.w3.org/TR/css3-transitions/#transition-timing-function-property
describes restricitions on cubic-bezier values where the x values of
the curve should be between [0, 1] and y values can exceed this range.
WebKit was not following the specification by allowing x values
exceeding the range.
The spec also says that we should reject the defintion if the condition
is not respected which is what the new code does.

Test: transitions/transitions-parsing.html

* css/CSSParser.cpp:
(WebCore::CSSParser::parseAnimationTimingFunction):

LayoutTests:

Extended existing tests to cover the bug. Updated an existing test
which was checking wrong values.

* fast/css/transition-timing-function.html: Change the tested values as
they are considered wrong by the spec.
* fast/css/transition-timing-function-expected.txt:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@139106 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Conflicts:

	LayoutTests/ChangeLog
	LayoutTests/transitions/transitions-parsing-expected.txt
	LayoutTests/transitions/transitions-parsing.html
	Source/WebCore/ChangeLog

Change-Id: Icb0de3cc26ac37bb133c03308af50a8c6eb59fb5

diff --git a/LayoutTests/fast/css/transition-timing-function-expected.txt b/LayoutTests/fast/css/transition-timing-function-expected.txt
index 049b041..69ec5b9 100644 (file)
--- a/LayoutTests/fast/css/transition-timing-function-expected.txt
+++ b/LayoutTests/fast/css/transition-timing-function-expected.txt
@@ -5,6 +5,6 @@ PASS: 'ease-out' parsed and serialized successfully.
 PASS: 'ease-in-out' parsed and serialized successfully.
 PASS: 'cubic-bezier(0, 0, 0, 1)' parsed and serialized successfully.
 PASS: 'cubic-bezier(0.1, 0.52, 0.11101, 0.9)' parsed and serialized successfully.
-PASS: 'cubic-bezier(1.5, 55, 12.3456, 1000)' parsed and serialized successfully.
-PASS: 'cubic-bezier(-1.5, -55, -12.3456, -1000)' parsed and serialized successfully.
+PASS: 'cubic-bezier(1, 55, 0.3456, 1000)' parsed and serialized successfully.
+PASS: 'cubic-bezier(1, -55, 0.3456, -1000)' parsed and serialized successfully.
 

diff --git a/LayoutTests/fast/css/transition-timing-function.html b/LayoutTests/fast/css/transition-timing-function.html
index 9029149..3acebc2 100644 (file)
--- a/LayoutTests/fast/css/transition-timing-function.html
+++ b/LayoutTests/fast/css/transition-timing-function.html
@@ -28,6 +28,6 @@ Testing parsing and serialization of <tt>-webkit-transition-timing-function</tt>
     roundTripTransitionTimingFunctionValue("ease-in-out");
     roundTripTransitionTimingFunctionValue("cubic-bezier(0, 0, 0, 1)");
     roundTripTransitionTimingFunctionValue("cubic-bezier(0.1, 0.52, 0.11101, 0.9)");
-    roundTripTransitionTimingFunctionValue("cubic-bezier(1.5, 55, 12.3456, 1000)");
-    roundTripTransitionTimingFunctionValue("cubic-bezier(-1.5, -55, -12.3456, -1000)");
+    roundTripTransitionTimingFunctionValue("cubic-bezier(1, 55, 0.3456, 1000)");
+    roundTripTransitionTimingFunctionValue("cubic-bezier(1, -55, 0.3456, -1000)");
 </script>

diff --git a/LayoutTests/transitions/transitions-parsing-expected.txt b/LayoutTests/transitions/transitions-parsing-expected.txt
new file mode 100644 (file)
index 0000000..4dce84b
--- /dev/null
+++ b/LayoutTests/transitions/transitions-parsing-expected.txt
@@ -0,0 +1,305 @@
+Test the parsing and the computed style values of the transitions properties.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Valid transition-property values.
+PASS computedStyle.transitionProperty is 'all'
+PASS computedStyle.webkitTransitionProperty is 'all'
+PASS style.transitionProperty is 'none'
+PASS computedStyle.transitionProperty is 'none'
+PASS style.webkitTransitionProperty is 'none'
+PASS computedStyle.webkitTransitionProperty is 'none'
+PASS style.transitionProperty is 'all'
+PASS computedStyle.transitionProperty is 'all'
+PASS style.webkitTransitionProperty is 'all'
+PASS computedStyle.webkitTransitionProperty is 'all'
+PASS style.transitionProperty is 'background-position'
+PASS computedStyle.transitionProperty is 'background-position'
+PASS style.webkitTransitionProperty is 'background-position'
+PASS computedStyle.webkitTransitionProperty is 'background-position'
+PASS style.transitionProperty is 'background-position, font-size'
+PASS computedStyle.transitionProperty is 'background-position, font-size'
+PASS style.webkitTransitionProperty is 'background-position, font-size'
+PASS computedStyle.webkitTransitionProperty is 'background-position, font-size'
+PASS style.transitionProperty is 'background-position, font-size, color'
+PASS computedStyle.transitionProperty is 'background-position, font-size, color'
+PASS style.webkitTransitionProperty is 'background-position, font-size, color'
+PASS computedStyle.webkitTransitionProperty is 'background-position, font-size, color'
+Invalid transition-property values.
+PASS style.transitionProperty is ''
+PASS computedStyle.transitionProperty is 'all'
+PASS style.webkitTransitionProperty is ''
+PASS computedStyle.webkitTransitionProperty is 'all'
+PASS style.transitionProperty is ''
+PASS computedStyle.transitionProperty is 'all'
+PASS style.webkitTransitionProperty is ''
+PASS computedStyle.webkitTransitionProperty is 'all'
+PASS style.transitionProperty is ''
+PASS computedStyle.transitionProperty is 'all'
+PASS style.webkitTransitionProperty is ''
+PASS computedStyle.webkitTransitionProperty is 'all'
+PASS style.transitionProperty is ''
+PASS computedStyle.transitionProperty is 'all'
+PASS style.webkitTransitionProperty is ''
+PASS computedStyle.webkitTransitionProperty is 'all'
+PASS style.transitionProperty is ''
+PASS computedStyle.transitionProperty is 'all'
+PASS style.webkitTransitionProperty is ''
+PASS computedStyle.webkitTransitionProperty is 'all'
+PASS style.transitionProperty is ''
+PASS computedStyle.transitionProperty is 'all'
+PASS style.webkitTransitionProperty is ''
+PASS computedStyle.webkitTransitionProperty is 'all'
+PASS style.transitionProperty is ''
+PASS computedStyle.transitionProperty is 'all'
+PASS style.webkitTransitionProperty is ''
+PASS computedStyle.webkitTransitionProperty is 'all'
+PASS style.transitionProperty is ''
+PASS computedStyle.transitionProperty is 'all'
+PASS style.webkitTransitionProperty is ''
+PASS computedStyle.webkitTransitionProperty is 'all'
+Valid transition-duration values.
+PASS computedStyle.transitionDuration is '0s'
+PASS computedStyle.webkitTransitionDuration is '0s'
+PASS style.transitionDuration is '0s'
+PASS computedStyle.transitionDuration is '0s'
+PASS style.webkitTransitionDuration is '0s'
+PASS computedStyle.webkitTransitionDuration is '0s'
+PASS style.transitionDuration is '5s'
+PASS computedStyle.transitionDuration is '5s'
+PASS style.webkitTransitionDuration is '5s'
+PASS computedStyle.webkitTransitionDuration is '5s'
+PASS style.transitionDuration is '10ms'
+PASS computedStyle.transitionDuration is '0.01s'
+PASS style.webkitTransitionDuration is '10ms'
+PASS computedStyle.webkitTransitionDuration is '0.01s'
+PASS style.transitionDuration is '10ms, 20s'
+PASS computedStyle.transitionDuration is '0.01s, 20s'
+PASS style.webkitTransitionDuration is '10ms, 20s'
+PASS computedStyle.webkitTransitionDuration is '0.01s, 20s'
+Invalid transition-duration values.
+PASS style.transitionDuration is ''
+PASS computedStyle.transitionDuration is '0s'
+PASS style.webkitTransitionDuration is ''
+PASS computedStyle.webkitTransitionDuration is '0s'
+PASS style.transitionDuration is ''
+PASS computedStyle.transitionDuration is '0s'
+PASS style.webkitTransitionDuration is ''
+PASS computedStyle.webkitTransitionDuration is '0s'
+PASS style.transitionDuration is ''
+PASS computedStyle.transitionDuration is '0s'
+PASS style.webkitTransitionDuration is ''
+PASS computedStyle.webkitTransitionDuration is '0s'
+PASS style.transitionDuration is ''
+PASS computedStyle.transitionDuration is '0s'
+PASS style.webkitTransitionDuration is ''
+PASS computedStyle.webkitTransitionDuration is '0s'
+PASS style.transitionDuration is ''
+PASS computedStyle.transitionDuration is '0s'
+PASS style.webkitTransitionDuration is ''
+PASS computedStyle.webkitTransitionDuration is '0s'
+PASS style.transitionDuration is ''
+PASS computedStyle.transitionDuration is '0s'
+PASS style.webkitTransitionDuration is ''
+PASS computedStyle.webkitTransitionDuration is '0s'
+PASS style.transitionDuration is ''
+PASS computedStyle.transitionDuration is '0s'
+PASS style.webkitTransitionDuration is ''
+PASS computedStyle.webkitTransitionDuration is '0s'
+Valid transition-timing-function values.
+PASS computedStyle.transitionTimingFunction is 'ease'
+PASS computedStyle.webkitTransitionTimingFunction is 'ease'
+PASS style.transitionTimingFunction is 'linear'
+PASS computedStyle.transitionTimingFunction is 'linear'
+PASS style.webkitTransitionTimingFunction is 'linear'
+PASS computedStyle.webkitTransitionTimingFunction is 'linear'
+PASS style.transitionTimingFunction is 'ease'
+PASS computedStyle.transitionTimingFunction is 'ease'
+PASS style.webkitTransitionTimingFunction is 'ease'
+PASS computedStyle.webkitTransitionTimingFunction is 'ease'
+PASS style.transitionTimingFunction is 'ease-in'
+PASS computedStyle.transitionTimingFunction is 'ease-in'
+PASS style.webkitTransitionTimingFunction is 'ease-in'
+PASS computedStyle.webkitTransitionTimingFunction is 'ease-in'
+PASS style.transitionTimingFunction is 'ease-out'
+PASS computedStyle.transitionTimingFunction is 'ease-out'
+PASS style.webkitTransitionTimingFunction is 'ease-out'
+PASS computedStyle.webkitTransitionTimingFunction is 'ease-out'
+PASS style.transitionTimingFunction is 'ease-in-out'
+PASS computedStyle.transitionTimingFunction is 'ease-in-out'
+PASS style.webkitTransitionTimingFunction is 'ease-in-out'
+PASS computedStyle.webkitTransitionTimingFunction is 'ease-in-out'
+PASS style.transitionTimingFunction is 'cubic-bezier(0.25, 0.1, 0.25, 1)'
+PASS computedStyle.transitionTimingFunction is 'cubic-bezier(0.25, 0.1, 0.25, 1)'
+PASS style.webkitTransitionTimingFunction is 'cubic-bezier(0.25, 0.1, 0.25, 1)'
+PASS computedStyle.webkitTransitionTimingFunction is 'cubic-bezier(0.25, 0.1, 0.25, 1)'
+PASS style.transitionTimingFunction is 'cubic-bezier(0.1, 0, 0.23, 0.4)'
+PASS computedStyle.transitionTimingFunction is 'cubic-bezier(0.1, 0, 0.23, 0.4)'
+PASS style.webkitTransitionTimingFunction is 'cubic-bezier(0.1, 0, 0.23, 0.4)'
+PASS computedStyle.webkitTransitionTimingFunction is 'cubic-bezier(0.1, 0, 0.23, 0.4)'
+PASS style.transitionTimingFunction is 'cubic-bezier(0.1, 0, 0.23, 3)'
+PASS computedStyle.transitionTimingFunction is 'cubic-bezier(0.1, 0, 0.23, 3)'
+PASS style.webkitTransitionTimingFunction is 'cubic-bezier(0.1, 0, 0.23, 3)'
+PASS computedStyle.webkitTransitionTimingFunction is 'cubic-bezier(0.1, 0, 0.23, 3)'
+PASS style.transitionTimingFunction is 'cubic-bezier(0.1, 5, 0.23, 3)'
+PASS computedStyle.transitionTimingFunction is 'cubic-bezier(0.1, 5, 0.23, 3)'
+PASS style.webkitTransitionTimingFunction is 'cubic-bezier(0.1, 5, 0.23, 3)'
+PASS computedStyle.webkitTransitionTimingFunction is 'cubic-bezier(0.1, 5, 0.23, 3)'
+PASS style.transitionTimingFunction is 'cubic-bezier(0.1, 5, 0.23, 0)'
+PASS computedStyle.transitionTimingFunction is 'cubic-bezier(0.1, 5, 0.23, 0)'
+PASS style.webkitTransitionTimingFunction is 'cubic-bezier(0.1, 5, 0.23, 0)'
+PASS computedStyle.webkitTransitionTimingFunction is 'cubic-bezier(0.1, 5, 0.23, 0)'
+PASS style.transitionTimingFunction is 'cubic-bezier(0.2, 2, 0.2, -0.4)'
+PASS computedStyle.transitionTimingFunction is 'cubic-bezier(0.2, 2, 0.2, -0.4)'
+PASS style.webkitTransitionTimingFunction is 'cubic-bezier(0.2, 2, 0.2, -0.4)'
+PASS computedStyle.webkitTransitionTimingFunction is 'cubic-bezier(0.2, 2, 0.2, -0.4)'
+PASS style.transitionTimingFunction is 'cubic-bezier(0.2, -2, 0.2, 0.4)'
+PASS computedStyle.transitionTimingFunction is 'cubic-bezier(0.2, -2, 0.2, 0.4)'
+PASS style.webkitTransitionTimingFunction is 'cubic-bezier(0.2, -2, 0.2, 0.4)'
+PASS computedStyle.webkitTransitionTimingFunction is 'cubic-bezier(0.2, -2, 0.2, 0.4)'
+PASS style.transitionTimingFunction is 'step-start'
+PASS computedStyle.transitionTimingFunction is 'steps(1, start)'
+PASS style.webkitTransitionTimingFunction is 'step-start'
+PASS computedStyle.webkitTransitionTimingFunction is 'steps(1, start)'
+PASS style.transitionTimingFunction is 'step-end'
+PASS computedStyle.transitionTimingFunction is 'steps(1, end)'
+PASS style.webkitTransitionTimingFunction is 'step-end'
+PASS computedStyle.webkitTransitionTimingFunction is 'steps(1, end)'
+PASS style.transitionTimingFunction is 'steps(3, end)'
+PASS computedStyle.transitionTimingFunction is 'steps(3, end)'
+PASS style.webkitTransitionTimingFunction is 'steps(3, end)'
+PASS computedStyle.webkitTransitionTimingFunction is 'steps(3, end)'
+PASS style.transitionTimingFunction is 'steps(4, end)'
+PASS computedStyle.transitionTimingFunction is 'steps(4, end)'
+PASS style.webkitTransitionTimingFunction is 'steps(4, end)'
+PASS computedStyle.webkitTransitionTimingFunction is 'steps(4, end)'
+PASS style.transitionTimingFunction is 'steps(5, start)'
+PASS computedStyle.transitionTimingFunction is 'steps(5, start)'
+PASS style.webkitTransitionTimingFunction is 'steps(5, start)'
+PASS computedStyle.webkitTransitionTimingFunction is 'steps(5, start)'
+PASS style.transitionTimingFunction is 'ease-in-out, ease-in'
+PASS computedStyle.transitionTimingFunction is 'ease-in-out, ease-in'
+PASS style.webkitTransitionTimingFunction is 'ease-in-out, ease-in'
+PASS computedStyle.webkitTransitionTimingFunction is 'ease-in-out, ease-in'
+PASS style.transitionTimingFunction is 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'
+PASS computedStyle.transitionTimingFunction is 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'
+PASS style.webkitTransitionTimingFunction is 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'
+PASS computedStyle.webkitTransitionTimingFunction is 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'
+PASS style.transitionTimingFunction is 'steps(3, start), ease-in-out'
+PASS computedStyle.transitionTimingFunction is 'steps(3, start), ease-in-out'
+PASS style.webkitTransitionTimingFunction is 'steps(3, start), ease-in-out'
+PASS computedStyle.webkitTransitionTimingFunction is 'steps(3, start), ease-in-out'
+Invalid transition-timing-function values.
+PASS style.transitionTimingFunction is ''
+PASS computedStyle.transitionTimingFunction is 'ease'
+PASS style.webkitTransitionTimingFunction is ''
+PASS computedStyle.webkitTransitionTimingFunction is 'ease'
+PASS style.transitionTimingFunction is ''
+PASS computedStyle.transitionTimingFunction is 'ease'
+PASS style.webkitTransitionTimingFunction is ''
+PASS computedStyle.webkitTransitionTimingFunction is 'ease'
+PASS style.transitionTimingFunction is ''
+PASS computedStyle.transitionTimingFunction is 'ease'
+PASS style.webkitTransitionTimingFunction is ''
+PASS computedStyle.webkitTransitionTimingFunction is 'ease'
+PASS style.transitionTimingFunction is ''
+PASS computedStyle.transitionTimingFunction is 'ease'
+PASS style.webkitTransitionTimingFunction is ''
+PASS computedStyle.webkitTransitionTimingFunction is 'ease'
+PASS style.transitionTimingFunction is ''
+PASS computedStyle.transitionTimingFunction is 'ease'
+PASS style.webkitTransitionTimingFunction is ''
+PASS computedStyle.webkitTransitionTimingFunction is 'ease'
+PASS style.transitionTimingFunction is ''
+PASS computedStyle.transitionTimingFunction is 'ease'
+PASS style.webkitTransitionTimingFunction is ''
+PASS computedStyle.webkitTransitionTimingFunction is 'ease'
+PASS style.transitionTimingFunction is ''
+PASS computedStyle.transitionTimingFunction is 'ease'
+PASS style.webkitTransitionTimingFunction is ''
+PASS computedStyle.webkitTransitionTimingFunction is 'ease'
+PASS style.transitionTimingFunction is ''
+PASS computedStyle.transitionTimingFunction is 'ease'
+PASS style.webkitTransitionTimingFunction is ''
+PASS computedStyle.webkitTransitionTimingFunction is 'ease'
+PASS style.transitionTimingFunction is ''
+PASS computedStyle.transitionTimingFunction is 'ease'
+PASS style.webkitTransitionTimingFunction is ''
+PASS computedStyle.webkitTransitionTimingFunction is 'ease'
+PASS style.transitionTimingFunction is ''
+PASS computedStyle.transitionTimingFunction is 'ease'
+PASS style.webkitTransitionTimingFunction is ''
+PASS computedStyle.webkitTransitionTimingFunction is 'ease'
+PASS style.transitionTimingFunction is ''
+PASS computedStyle.transitionTimingFunction is 'ease'
+PASS style.webkitTransitionTimingFunction is ''
+PASS computedStyle.webkitTransitionTimingFunction is 'ease'
+PASS style.transitionTimingFunction is ''
+PASS computedStyle.transitionTimingFunction is 'ease'
+PASS style.webkitTransitionTimingFunction is ''
+PASS computedStyle.webkitTransitionTimingFunction is 'ease'
+PASS style.transitionTimingFunction is ''
+PASS computedStyle.transitionTimingFunction is 'ease'
+PASS style.webkitTransitionTimingFunction is ''
+PASS computedStyle.webkitTransitionTimingFunction is 'ease'
+PASS style.transitionTimingFunction is ''
+PASS computedStyle.transitionTimingFunction is 'ease'
+PASS style.webkitTransitionTimingFunction is ''
+PASS computedStyle.webkitTransitionTimingFunction is 'ease'
+PASS style.transitionTimingFunction is ''
+PASS computedStyle.transitionTimingFunction is 'ease'
+PASS style.webkitTransitionTimingFunction is ''
+PASS computedStyle.webkitTransitionTimingFunction is 'ease'
+Valid transition-delay values.
+PASS computedStyle.transitionDelay is '0s'
+PASS computedStyle.webkitTransitionDelay is '0s'
+PASS style.transitionDelay is '0s'
+PASS computedStyle.transitionDelay is '0s'
+PASS style.webkitTransitionDelay is '0s'
+PASS computedStyle.webkitTransitionDelay is '0s'
+PASS style.transitionDelay is '5s'
+PASS computedStyle.transitionDelay is '5s'
+PASS style.webkitTransitionDelay is '5s'
+PASS computedStyle.webkitTransitionDelay is '5s'
+PASS style.transitionDelay is '10ms'
+PASS computedStyle.transitionDelay is '0.01s'
+PASS style.webkitTransitionDelay is '10ms'
+PASS computedStyle.webkitTransitionDelay is '0.01s'
+PASS style.transitionDelay is '-10ms'
+PASS computedStyle.transitionDelay is '-0.01s'
+PASS style.webkitTransitionDelay is '-10ms'
+PASS computedStyle.webkitTransitionDelay is '-0.01s'
+PASS style.transitionDelay is '-10ms, 20s'
+PASS computedStyle.transitionDelay is '-0.01s, 20s'
+PASS style.webkitTransitionDelay is '-10ms, 20s'
+PASS computedStyle.webkitTransitionDelay is '-0.01s, 20s'
+Invalid transition-duration values.
+PASS style.transitionDelay is ''
+PASS computedStyle.transitionDelay is '0s'
+PASS style.webkitTransitionDelay is ''
+PASS computedStyle.webkitTransitionDelay is '0s'
+PASS style.transitionDelay is ''
+PASS computedStyle.transitionDelay is '0s'
+PASS style.webkitTransitionDelay is ''
+PASS computedStyle.webkitTransitionDelay is '0s'
+PASS style.transitionDelay is ''
+PASS computedStyle.transitionDelay is '0s'
+PASS style.webkitTransitionDelay is ''
+PASS computedStyle.webkitTransitionDelay is '0s'
+PASS style.transitionDelay is ''
+PASS computedStyle.transitionDelay is '0s'
+PASS style.webkitTransitionDelay is ''
+PASS computedStyle.webkitTransitionDelay is '0s'
+PASS style.transitionDelay is ''
+PASS computedStyle.transitionDelay is '0s'
+PASS style.webkitTransitionDelay is ''
+PASS computedStyle.webkitTransitionDelay is '0s'
+PASS style.transitionDelay is ''
+PASS computedStyle.transitionDelay is '0s'
+PASS style.webkitTransitionDelay is ''
+PASS computedStyle.webkitTransitionDelay is '0s'
+PASS successfullyParsed is true
+
+TEST COMPLETE
+

diff --git a/LayoutTests/transitions/transitions-parsing.html b/LayoutTests/transitions/transitions-parsing.html
new file mode 100644 (file)
index 0000000..8e79999
--- /dev/null
+++ b/LayoutTests/transitions/transitions-parsing.html
@@ -0,0 +1,612 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../fast/js/resources/js-test-pre.js"></script>
+</head>
+<body>
+<script>
+description("Test the parsing and the computed style values of the transitions properties.")
+
+var testContainer = document.createElement("div");
+document.body.appendChild(testContainer);
+
+testContainer.innerHTML = '<div style="width:500px;height:500px"><div id="test">hello</div></div>';
+
+e = document.getElementById('test');
+style = e.style;
+computedStyle = window.getComputedStyle(e, null);
+
+debug("Valid transition-property values.");
+// Initial test.
+shouldBe("computedStyle.transitionProperty", "'all'");
+shouldBe("computedStyle.webkitTransitionProperty", "'all'");
+
+style.transitionProperty = "none";
+shouldBe("style.transitionProperty", "'none'");
+shouldBe("computedStyle.transitionProperty", "'none'");
+shouldBe("style.webkitTransitionProperty", "'none'");
+shouldBe("computedStyle.webkitTransitionProperty", "'none'");
+
+style.transitionProperty = "all";
+shouldBe("style.transitionProperty", "'all'");
+shouldBe("computedStyle.transitionProperty", "'all'");
+shouldBe("style.webkitTransitionProperty", "'all'");
+shouldBe("computedStyle.webkitTransitionProperty", "'all'");
+
+style.transitionProperty = "background-position";
+shouldBe("style.transitionProperty", "'background-position'");
+shouldBe("computedStyle.transitionProperty", "'background-position'");
+shouldBe("style.webkitTransitionProperty", "'background-position'");
+shouldBe("computedStyle.webkitTransitionProperty", "'background-position'");
+
+style.transitionProperty = "background-position, font-size";
+shouldBe("style.transitionProperty", "'background-position, font-size'");
+shouldBe("computedStyle.transitionProperty", "'background-position, font-size'");
+shouldBe("style.webkitTransitionProperty", "'background-position, font-size'");
+shouldBe("computedStyle.webkitTransitionProperty", "'background-position, font-size'");
+
+style.transitionProperty = "background-position, font-size, color";
+shouldBe("style.transitionProperty", "'background-position, font-size, color'");
+shouldBe("computedStyle.transitionProperty", "'background-position, font-size, color'");
+shouldBe("style.webkitTransitionProperty", "'background-position, font-size, color'");
+shouldBe("computedStyle.webkitTransitionProperty", "'background-position, font-size, color'");
+
+debug("Invalid transition-property values.");
+style.transitionProperty = "";
+
+style.transitionProperty = "solid, font-size";
+shouldBe("style.transitionProperty", "''");
+shouldBe("computedStyle.transitionProperty", "'all'");
+shouldBe("style.webkitTransitionProperty", "''");
+shouldBe("computedStyle.webkitTransitionProperty", "'all'");
+
+style.transitionProperty = "solid, left";
+shouldBe("style.transitionProperty", "''");
+shouldBe("computedStyle.transitionProperty", "'all'");
+shouldBe("style.webkitTransitionProperty", "''");
+shouldBe("computedStyle.webkitTransitionProperty", "'all'");
+
+style.transitionProperty = "solid";
+shouldBe("style.transitionProperty", "''");
+shouldBe("computedStyle.transitionProperty", "'all'");
+shouldBe("style.webkitTransitionProperty", "''");
+shouldBe("computedStyle.webkitTransitionProperty", "'all'");
+
+style.transitionProperty = "20px";
+shouldBe("style.transitionProperty", "''");
+shouldBe("computedStyle.transitionProperty", "'all'");
+shouldBe("style.webkitTransitionProperty", "''");
+shouldBe("computedStyle.webkitTransitionProperty", "'all'");
+
+style.transitionProperty = "0";
+shouldBe("style.transitionProperty", "''");
+shouldBe("computedStyle.transitionProperty", "'all'");
+shouldBe("style.webkitTransitionProperty", "''");
+shouldBe("computedStyle.webkitTransitionProperty", "'all'");
+
+style.transitionProperty = "'font-size'";
+shouldBe("style.transitionProperty", "''");
+shouldBe("computedStyle.transitionProperty", "'all'");
+shouldBe("style.webkitTransitionProperty", "''");
+shouldBe("computedStyle.webkitTransitionProperty", "'all'");
+
+style.transitionProperty = "all none";
+shouldBe("style.transitionProperty", "''");
+shouldBe("computedStyle.transitionProperty", "'all'");
+shouldBe("style.webkitTransitionProperty", "''");
+shouldBe("computedStyle.webkitTransitionProperty", "'all'");
+
+style.transitionProperty = "opacity width";
+shouldBe("style.transitionProperty", "''");
+shouldBe("computedStyle.transitionProperty", "'all'");
+shouldBe("style.webkitTransitionProperty", "''");
+shouldBe("computedStyle.webkitTransitionProperty", "'all'");
+
+// Tracked by https://bugs.webkit.org/show_bug.cgi?id=105428.
+/*style.transitionProperty = "all, none";
+shouldBe("style.transitionProperty", "''");
+shouldBe("computedStyle.transitionProperty", "'all'");
+shouldBe("style.webkitTransitionProperty", "''");
+shouldBe("computedStyle.webkitTransitionProperty", "'all'");*/
+
+// Tracked by https://bugs.webkit.org/show_bug.cgi?id=105430.
+/*style.transitionProperty = "background, font-size, all";
+shouldBe("style.transitionProperty", "''");
+shouldBe("computedStyle.transitionProperty", "'all'");
+shouldBe("style.webkitTransitionProperty", "''");
+shouldBe("computedStyle.webkitTransitionProperty", "'all'");*/
+
+style.transitionProperty = "";
+
+debug("Valid transition-duration values.");
+// Initial test.
+shouldBe("computedStyle.transitionDuration", "'0s'");
+shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
+
+style.transitionDuration = "0s";
+shouldBe("style.transitionDuration", "'0s'");
+shouldBe("computedStyle.transitionDuration", "'0s'");
+shouldBe("style.webkitTransitionDuration", "'0s'");
+shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
+
+style.transitionDuration = "5s";
+shouldBe("style.transitionDuration", "'5s'");
+shouldBe("computedStyle.transitionDuration", "'5s'");
+shouldBe("style.webkitTransitionDuration", "'5s'");
+shouldBe("computedStyle.webkitTransitionDuration", "'5s'");
+
+style.transitionDuration = "10ms";
+shouldBe("style.transitionDuration", "'10ms'");
+shouldBe("computedStyle.transitionDuration", "'0.01s'");
+shouldBe("style.webkitTransitionDuration", "'10ms'");
+shouldBe("computedStyle.webkitTransitionDuration", "'0.01s'");
+
+style.transitionProperty = "opacity, width";
+
+style.transitionDuration = "10ms, 20s";
+shouldBe("style.transitionDuration", "'10ms, 20s'");
+shouldBe("computedStyle.transitionDuration", "'0.01s, 20s'");
+shouldBe("style.webkitTransitionDuration", "'10ms, 20s'");
+shouldBe("computedStyle.webkitTransitionDuration", "'0.01s, 20s'");
+
+debug("Invalid transition-duration values.");
+style.transitionProperty = "opacity";
+style.transitionDuration = "";
+
+// Negative values are invalid.
+style.transitionDuration = "-10ms";
+shouldBe("style.transitionDuration", "''");
+shouldBe("computedStyle.transitionDuration", "'0s'");
+shouldBe("style.webkitTransitionDuration", "''");
+shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
+
+style.transitionDuration = "'5ms'";
+shouldBe("style.transitionDuration", "''");
+shouldBe("computedStyle.transitionDuration", "'0s'");
+shouldBe("style.webkitTransitionDuration", "''");
+shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
+
+style.transitionDuration = "30px";
+shouldBe("style.transitionDuration", "''");
+shouldBe("computedStyle.transitionDuration", "'0s'");
+shouldBe("style.webkitTransitionDuration", "''");
+shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
+
+style.transitionDuration = "solid";
+shouldBe("style.transitionDuration", "''");
+shouldBe("computedStyle.transitionDuration", "'0s'");
+shouldBe("style.webkitTransitionDuration", "''");
+shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
+
+style.transitionDuration = "20";
+shouldBe("style.transitionDuration", "''");
+shouldBe("computedStyle.transitionDuration", "'0s'");
+shouldBe("style.webkitTransitionDuration", "''");
+shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
+
+style.transitionDuration = "20%";
+shouldBe("style.transitionDuration", "''");
+shouldBe("computedStyle.transitionDuration", "'0s'");
+shouldBe("style.webkitTransitionDuration", "''");
+shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
+
+style.transitionDuration = "0s, 20px";
+shouldBe("style.transitionDuration", "''");
+shouldBe("computedStyle.transitionDuration", "'0s'");
+shouldBe("style.webkitTransitionDuration", "''");
+shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
+
+debug("Valid transition-timing-function values.");
+// Initial test.
+shouldBe("computedStyle.transitionTimingFunction", "'ease'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
+
+style.transitionTimingFunction = "linear";
+shouldBe("style.transitionTimingFunction", "'linear'");
+shouldBe("computedStyle.transitionTimingFunction", "'linear'");
+shouldBe("style.webkitTransitionTimingFunction", "'linear'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'linear'");
+
+style.transitionTimingFunction = "ease";
+shouldBe("style.transitionTimingFunction", "'ease'");
+shouldBe("computedStyle.transitionTimingFunction", "'ease'");
+shouldBe("style.webkitTransitionTimingFunction", "'ease'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
+
+style.transitionTimingFunction = "ease-in";
+shouldBe("style.transitionTimingFunction", "'ease-in'");
+shouldBe("computedStyle.transitionTimingFunction", "'ease-in'");
+shouldBe("style.webkitTransitionTimingFunction", "'ease-in'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in'");
+
+style.transitionTimingFunction = "ease-out";
+shouldBe("style.transitionTimingFunction", "'ease-out'");
+shouldBe("computedStyle.transitionTimingFunction", "'ease-out'");
+shouldBe("style.webkitTransitionTimingFunction", "'ease-out'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-out'");
+
+style.transitionTimingFunction = "ease-in-out";
+shouldBe("style.transitionTimingFunction", "'ease-in-out'");
+shouldBe("computedStyle.transitionTimingFunction", "'ease-in-out'");
+shouldBe("style.webkitTransitionTimingFunction", "'ease-in-out'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in-out'");
+
+style.transitionTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1)";
+shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'");
+shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'");
+shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'");
+
+style.transitionTimingFunction = "cubic-bezier(0.1, 0, 0.23, 0.4)";
+shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'");
+shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'");
+shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'");
+
+style.transitionTimingFunction = "cubic-bezier(0.1, 0, 0.23, 3)";
+shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'");
+shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'");
+shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'");
+
+style.transitionTimingFunction = "cubic-bezier(0.1, 5, 0.23, 3)";
+shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'");
+shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'");
+shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'");
+
+style.transitionTimingFunction = "cubic-bezier(0.1, 5, 0.23, 0)";
+shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'");
+shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'");
+shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'");
+
+style.transitionTimingFunction = "cubic-bezier(0.2, 2, 0.2, -0.4)";
+shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'");
+shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'");
+shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'");
+
+style.transitionTimingFunction = "cubic-bezier(0.2, -2, 0.2, 0.4)";
+shouldBe("style.transitionTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'");
+shouldBe("computedStyle.transitionTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'");
+shouldBe("style.webkitTransitionTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'");
+
+style.transitionTimingFunction = "step-start";
+shouldBe("style.transitionTimingFunction", "'step-start'");
+shouldBe("computedStyle.transitionTimingFunction", "'steps(1, start)'");
+shouldBe("style.webkitTransitionTimingFunction", "'step-start'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(1, start)'");
+
+style.transitionTimingFunction = "step-end";
+shouldBe("style.transitionTimingFunction", "'step-end'");
+shouldBe("computedStyle.transitionTimingFunction", "'steps(1, end)'");
+shouldBe("style.webkitTransitionTimingFunction", "'step-end'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(1, end)'");
+
+style.transitionTimingFunction = "steps(3)";
+shouldBe("style.transitionTimingFunction", "'steps(3, end)'");
+shouldBe("computedStyle.transitionTimingFunction", "'steps(3, end)'");
+shouldBe("style.webkitTransitionTimingFunction", "'steps(3, end)'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(3, end)'");
+
+style.transitionTimingFunction = "steps(4, end)";
+shouldBe("style.transitionTimingFunction", "'steps(4, end)'");
+shouldBe("computedStyle.transitionTimingFunction", "'steps(4, end)'");
+shouldBe("style.webkitTransitionTimingFunction", "'steps(4, end)'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(4, end)'");
+
+style.transitionTimingFunction = "steps(5, start)";
+shouldBe("style.transitionTimingFunction", "'steps(5, start)'");
+shouldBe("computedStyle.transitionTimingFunction", "'steps(5, start)'");
+shouldBe("style.webkitTransitionTimingFunction", "'steps(5, start)'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(5, start)'");
+
+style.transitionProperty = "opacity, width";
+
+style.transitionTimingFunction = "ease-in-out, ease-in";
+shouldBe("style.transitionTimingFunction", "'ease-in-out, ease-in'");
+shouldBe("computedStyle.transitionTimingFunction", "'ease-in-out, ease-in'");
+shouldBe("style.webkitTransitionTimingFunction", "'ease-in-out, ease-in'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in-out, ease-in'");
+
+style.transitionTimingFunction = "ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)";
+shouldBe("style.transitionTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
+shouldBe("computedStyle.transitionTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
+shouldBe("style.webkitTransitionTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
+
+style.transitionTimingFunction = "steps(3, start), ease-in-out";
+shouldBe("style.transitionTimingFunction", "'steps(3, start), ease-in-out'");
+shouldBe("computedStyle.transitionTimingFunction", "'steps(3, start), ease-in-out'");
+shouldBe("style.webkitTransitionTimingFunction", "'steps(3, start), ease-in-out'");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(3, start), ease-in-out'");
+
+debug("Invalid transition-timing-function values.");
+style.transitionProperty = "";
+style.transitionTimingFunction = "";
+
+style.transitionTimingFunction = "cubic-bezier(3, 0.1, 4, 1)";
+shouldBe("style.transitionTimingFunction", "''");
+shouldBe("computedStyle.transitionTimingFunction", "'ease'");
+shouldBe("style.webkitTransitionTimingFunction", "''");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
+
+style.transitionTimingFunction = "cubic-bezier(1, 0.1, 3, 1)";
+shouldBe("style.transitionTimingFunction", "''");
+shouldBe("computedStyle.transitionTimingFunction", "'ease'");
+shouldBe("style.webkitTransitionTimingFunction", "''");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
+
+style.transitionTimingFunction = "cubic-bezier(0.1, 0, 4, 0.4)";
+shouldBe("style.transitionTimingFunction", "''");
+shouldBe("computedStyle.transitionTimingFunction", "'ease'");
+shouldBe("style.webkitTransitionTimingFunction", "''");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
+
+style.transitionTimingFunction = "cubic-bezier(3, 0, 4, 0.4)";
+shouldBe("style.transitionTimingFunction", "''");
+shouldBe("computedStyle.transitionTimingFunction", "'ease'");
+shouldBe("style.webkitTransitionTimingFunction", "''");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
+
+style.transitionTimingFunction = "cubic-bezier(3, 0, 0.2, 0.4)";
+shouldBe("style.transitionTimingFunction", "''");
+shouldBe("computedStyle.transitionTimingFunction", "'ease'");
+shouldBe("style.webkitTransitionTimingFunction", "''");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
+
+style.transitionTimingFunction = "cubic-bezier(-0.2, 0, 0.2, 0.4)";
+shouldBe("style.transitionTimingFunction", "''");
+shouldBe("computedStyle.transitionTimingFunction", "'ease'");
+shouldBe("style.webkitTransitionTimingFunction", "''");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
+
+style.transitionTimingFunction = "cubic-bezier(0.2, 2, -0.2, 0.4)";
+shouldBe("style.transitionTimingFunction", "''");
+shouldBe("computedStyle.transitionTimingFunction", "'ease'");
+shouldBe("style.webkitTransitionTimingFunction", "''");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
+
+style.transitionTimingFunction = "steps(5, 3)";
+shouldBe("style.transitionTimingFunction", "''");
+shouldBe("computedStyle.transitionTimingFunction", "'ease'");
+shouldBe("style.webkitTransitionTimingFunction", "''");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
+
+style.transitionTimingFunction = "steps(-5, start)";
+shouldBe("style.transitionTimingFunction", "''");
+shouldBe("computedStyle.transitionTimingFunction", "'ease'");
+shouldBe("style.webkitTransitionTimingFunction", "''");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
+
+style.transitionTimingFunction = "steps(5, start, end)";
+shouldBe("style.transitionTimingFunction", "''");
+shouldBe("computedStyle.transitionTimingFunction", "'ease'");
+shouldBe("style.webkitTransitionTimingFunction", "''");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
+
+style.transitionTimingFunction = "step(5)";
+shouldBe("style.transitionTimingFunction", "''");
+shouldBe("computedStyle.transitionTimingFunction", "'ease'");
+shouldBe("style.webkitTransitionTimingFunction", "''");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
+
+style.transitionTimingFunction = "red";
+shouldBe("style.transitionTimingFunction", "''");
+shouldBe("computedStyle.transitionTimingFunction", "'ease'");
+shouldBe("style.webkitTransitionTimingFunction", "''");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
+
+style.transitionTimingFunction = "cubic-bezier(0.25, 0.1, 0.25)";
+shouldBe("style.transitionTimingFunction", "''");
+shouldBe("computedStyle.transitionTimingFunction", "'ease'");
+shouldBe("style.webkitTransitionTimingFunction", "''");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
+
+style.transitionTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1, 2)";
+shouldBe("style.transitionTimingFunction", "''");
+shouldBe("computedStyle.transitionTimingFunction", "'ease'");
+shouldBe("style.webkitTransitionTimingFunction", "''");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
+
+style.transitionTimingFunction = "cubic-foo(0.25, 0.1, 0.25, 1)";
+shouldBe("style.transitionTimingFunction", "''");
+shouldBe("computedStyle.transitionTimingFunction", "'ease'");
+shouldBe("style.webkitTransitionTimingFunction", "''");
+shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
+
+debug("Valid transition-delay values.");
+// Initial test.
+shouldBe("computedStyle.transitionDelay", "'0s'");
+shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
+
+style.transitionDelay = "0s";
+shouldBe("style.transitionDelay", "'0s'");
+shouldBe("computedStyle.transitionDelay", "'0s'");
+shouldBe("style.webkitTransitionDelay", "'0s'");
+shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
+
+style.transitionDelay = "5s";
+shouldBe("style.transitionDelay", "'5s'");
+shouldBe("computedStyle.transitionDelay", "'5s'");
+shouldBe("style.webkitTransitionDelay", "'5s'");
+shouldBe("computedStyle.webkitTransitionDelay", "'5s'");
+
+style.transitionDelay = "10ms";
+shouldBe("style.transitionDelay", "'10ms'");
+shouldBe("computedStyle.transitionDelay", "'0.01s'");
+shouldBe("style.webkitTransitionDelay", "'10ms'");
+shouldBe("computedStyle.webkitTransitionDelay", "'0.01s'");
+
+style.transitionDelay = "-10ms";
+shouldBe("style.transitionDelay", "'-10ms'");
+shouldBe("computedStyle.transitionDelay", "'-0.01s'");
+shouldBe("style.webkitTransitionDelay", "'-10ms'");
+shouldBe("computedStyle.webkitTransitionDelay", "'-0.01s'");
+
+style.transitionProperty = "opacity, width";
+
+style.transitionDelay = "-10ms, 20s";
+shouldBe("style.transitionDelay", "'-10ms, 20s'");
+shouldBe("computedStyle.transitionDelay", "'-0.01s, 20s'");
+shouldBe("style.webkitTransitionDelay", "'-10ms, 20s'");
+shouldBe("computedStyle.webkitTransitionDelay", "'-0.01s, 20s'");
+
+debug("Invalid transition-duration values.");
+style.transitionProperty = "opacity";
+style.transitionDelay = "";
+
+style.transitionDelay = "'5ms'";
+shouldBe("style.transitionDelay", "''");
+shouldBe("computedStyle.transitionDelay", "'0s'");
+shouldBe("style.webkitTransitionDelay", "''");
+shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
+
+style.transitionDelay = "30px";
+shouldBe("style.transitionDelay", "''");
+shouldBe("computedStyle.transitionDelay", "'0s'");
+shouldBe("style.webkitTransitionDelay", "''");
+shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
+
+style.transitionDelay = "solid";
+shouldBe("style.transitionDelay", "''");
+shouldBe("computedStyle.transitionDelay", "'0s'");
+shouldBe("style.webkitTransitionDelay", "''");
+shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
+
+style.transitionDelay = "20";
+shouldBe("style.transitionDelay", "''");
+shouldBe("computedStyle.transitionDelay", "'0s'");
+shouldBe("style.webkitTransitionDelay", "''");
+shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
+
+style.transitionDelay = "20%";
+shouldBe("style.transitionDelay", "''");
+shouldBe("computedStyle.transitionDelay", "'0s'");
+shouldBe("style.webkitTransitionDelay", "''");
+shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
+
+style.transitionDelay = "0s, 20px";
+shouldBe("style.transitionDelay", "''");
+shouldBe("computedStyle.transitionDelay", "'0s'");
+shouldBe("style.webkitTransitionDelay", "''");
+shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
+
+// Transition and -webkit-transition is not correctly implemented.
+// Tracked by https://bugs.webkit.org/show_bug.cgi?id=105035.
+/*debug("Valid transition shorthand values.");
+style.transition = "";
+// Initial test.
+shouldBe("computedStyle.transition", "'all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+shouldBe("computedStyle.webkitTransition", "'all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+
+style.transition = "none";
+shouldBe("style.transition", "'none'");
+shouldBe("computedStyle.transition", "'none 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+shouldBe("style.webkitTransition", "'none'");
+shouldBe("computedStyle.webkitTransition", "'none 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+
+style.transition = "none 20s";
+shouldBe("style.transition", "'none 20s'");
+shouldBe("computedStyle.transition", "'none 20s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+shouldBe("style.webkitTransition", "'none 20s'");
+shouldBe("computedStyle.webkitTransition", "'none 20s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+
+style.transition = "ease-in none 20s";
+shouldBe("style.transition", "'ease-in none 20s'");
+shouldBe("computedStyle.transition", "'none 20s cubic-bezier(0.42, 0, 1, 1) 0s'");
+shouldBe("style.webkitTransition", "'ease-in none 20s'");
+shouldBe("computedStyle.webkitTransition", "'none 20s cubic-bezier(0.42, 0, 1, 1) 0s'");
+
+style.transition = "ease-in opacity 20s";
+shouldBe("style.transition", "'ease-in opacity 20s'");
+shouldBe("computedStyle.transition", "'opacity 20s cubic-bezier(0.42, 0, 1, 1) 0s'");
+shouldBe("style.webkitTransition", "'ease-in opacity 20s'");
+shouldBe("computedStyle.webkitTransition", "'opacity 20s cubic-bezier(0.42, 0, 1, 1) 0s'");
+
+style.transition = "ease-in opacity 20s 10s";
+shouldBe("style.transition", "'ease-in opacity 20s 10s'");
+shouldBe("computedStyle.transition", "'opacity 20s cubic-bezier(0.42, 0, 1, 1) 10s'");
+shouldBe("style.webkitTransition", "'ease-in opacity 20s 10s'");
+shouldBe("computedStyle.webkitTransition", "'opacity 20s cubic-bezier(0.42, 0, 1, 1) 10s'");
+// Let's double check here the delay and duration. As stated in the spec the first value parsed
+// is assigned to the duration.
+shouldBe("computedStyle.transitionDuration", "'20s'");
+shouldBe("computedStyle.webkitTransitionDuration", "'20s'");
+shouldBe("computedStyle.transitionDelay", "'10s'");
+shouldBe("computedStyle.webkitTransitionDelay", "'10s'");
+
+style.transition = "20s ease-in opacity 10s";
+shouldBe("style.transition", "'20s ease-in opacity 10s'");
+shouldBe("computedStyle.transition", "'opacity 20s cubic-bezier(0.42, 0, 1, 1) 10s'");
+shouldBe("style.webkitTransition", "'20s ease-in opacity 10s'");
+shouldBe("computedStyle.webkitTransition", "'opacity 20s cubic-bezier(0.42, 0, 1, 1) 10s'");
+shouldBe("computedStyle.transitionDuration", "'20s'");
+shouldBe("computedStyle.webkitTransitionDuration", "'20s'");
+shouldBe("computedStyle.transitionDelay", "'10s'");
+shouldBe("computedStyle.webkitTransitionDelay", "'10s'");
+
+style.transition = "ease-in opacity 20s 10s, cubic-bezier(0.32, 0, 1, 1) 10s width 20s";
+shouldBe("style.transition", "'ease-in opacity 20s 10s, cubic-bezier(0.32, 0, 1, 1) 10s width 20s'");
+shouldBe("computedStyle.transition", "'opacity 20s cubic-bezier(0.42, 0, 1, 1) 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
+shouldBe("style.webkitTransition", "'ease-in opacity 20s 10s, cubic-bezier(0.32, 0, 1, 1) 10s width 20s'");
+shouldBe("computedStyle.webkitTransition", "'opacity 20s cubic-bezier(0.42, 0, 1, 1) 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
+// Let's double check here the delay and duration. As stated in the spec the first value parsed
+// is assigned to the duration.
+shouldBe("computedStyle.transitionDuration", "'20s, 10s'");
+shouldBe("computedStyle.webkitTransitionDuration", "'20s, 10s'");
+shouldBe("computedStyle.transitionDelay", "'10s, 20s'");
+shouldBe("computedStyle.webkitTransitionDelay", "'10s, 20s'");
+
+debug("Invalid transition shorthand values.");
+style.transition = "";
+
+style.transition = "20";
+shouldBe("style.transition", "''");
+shouldBe("computedStyle.transition", "'all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+shouldBe("style.webkitTransition", "''");
+shouldBe("computedStyle.webkitTransition", "'all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+
+style.transition = "20, 20";
+shouldBe("style.transition", "''");
+shouldBe("computedStyle.transition", "'all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+shouldBe("style.webkitTransition", "''");
+shouldBe("computedStyle.webkitTransition", "'all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+
+style.transition = "widthFoo";
+shouldBe("style.transition", "''");
+shouldBe("computedStyle.transition", "'all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+shouldBe("style.webkitTransition", "''");
+shouldBe("computedStyle.webkitTransition", "'all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+
+style.transition = "all 30s width ease-in";
+shouldBe("style.transition", "''");
+shouldBe("computedStyle.transition", "'all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+shouldBe("style.webkitTransition", "''");
+shouldBe("computedStyle.webkitTransition", "'all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+
+style.transition = "all 30s ease-in 20px";
+shouldBe("style.transition", "''");
+shouldBe("computedStyle.transition", "'all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+shouldBe("style.webkitTransition", "''");
+shouldBe("computedStyle.webkitTransition", "'all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+
+style.transition = "all 30s ease-in 20s, 20px";
+shouldBe("style.transition", "''");
+shouldBe("computedStyle.transition", "'all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+shouldBe("style.webkitTransition", "''");
+shouldBe("computedStyle.webkitTransition", "'all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+
+style.transition = "all 30s ease-in 20s, step-start(2)";
+shouldBe("style.transition", "''");
+shouldBe("computedStyle.transition", "'all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");
+shouldBe("style.webkitTransition", "''");
+shouldBe("computedStyle.webkitTransition", "'all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s'");*/
+
+document.body.removeChild(testContainer);
+</script>
+<script src="../fast/js/resources/js-test-post.js"></script>
+</body>
+</html>

diff --git a/Source/WebCore/css/CSSParser.cpp b/Source/WebCore/css/CSSParser.cpp
index 65c8381..257909d 100644 (file)
--- a/Source/WebCore/css/CSSParser.cpp
+++ b/Source/WebCore/css/CSSParser.cpp
@@ -4093,15 +4093,19 @@ PassRefPtr<CSSValue> CSSParser::parseAnimationTimingFunction()
         if (!args || args->size() != 7)
             return 0;
 
-        // There are two points specified.  The values must be between 0 and 1.
+        // There are two points specified. The x values must be between 0 and 1 but the y values can exceed this range.
         double x1, y1, x2, y2;
 
         if (!parseCubicBezierTimingFunctionValue(args, x1))
             return 0;
+        if (x1 < 0 || x1 > 1)
+            return 0;
         if (!parseCubicBezierTimingFunctionValue(args, y1))
             return 0;
         if (!parseCubicBezierTimingFunctionValue(args, x2))
             return 0;
+        if (x2 < 0 || x2 > 1)
+            return 0;
         if (!parseCubicBezierTimingFunctionValue(args, y2))
             return 0;