Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

Commit

Permalink
squashed cubic-bezier unit tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@redmunds
redmunds committed Oct 25, 2013
1 parent b6b6f04 commit 1295cfe
Show file tree
Hide file tree
Showing 4 changed files with 601 additions and 42 deletions.
4 changes: 2 additions & 2 deletions src/extensions/default/CSSCodeHints/CSSProperties.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"animation-iteration-count": {"values": ["infinite"]},
"animation-name": {"values": ["none"]},
"animation-play-state": {"values": ["paused", "running"]},
"animation-timing-function": {"values": ["cubic-bezier()", "ease", "ease-in", "ease-in-out", "ease-out", "linear", "step-end", "step-start", "steps()"]},
"animation-timing-function": {"values": ["cubic-bezier(.42, 0, .58, 1)", "ease", "ease-in", "ease-in-out", "ease-out", "linear", "step-end", "step-start", "steps()"]},
"backface-visibility": {"values": ["hidden", "visible"]},
"background": {"values": []},
"background-attachment": {"values": ["fixed", "local", "scroll", "inherit"]},
Expand Down Expand Up @@ -189,7 +189,7 @@
"transition-delay": {"values": []},
"transition-duration": {"values": []},
"transition-property": {"values": ["all", "none"]},
"transition-timing-function": {"values": ["cubic-bezier()", "ease", "ease-in", "ease-in-out", "ease-out", "linear", "step-end", "step-start", "steps()"]},
"transition-timing-function": {"values": ["cubic-bezier(.42, 0, .58, 1)", "ease", "ease-in", "ease-in-out", "ease-out", "linear", "step-end", "step-start", "steps()"]},
"unicode-bidi": {"values": ["bidi-override", "embed", "normal", "inherit"]},
"unicode-range": {"values": []},
"vertical-align": {"values": ["baseline", "bottom", "middle", "sub", "super", "text-bottom", "text-top", "top", "inherit"]},
Expand Down
76 changes: 36 additions & 40 deletions src/extensions/default/InlineTimingFunctionEditor/TimingFunctionEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -290,9 +290,8 @@ define(function (require, exports, module) {
* @param {Event} e Mouse move event
* @param {number} x New horizontal position
* @param {number} y New vertical position
* @param {left: number, top: number, width: number, height: number} curveBoundingBox
*/
function handlePointMove(e, x, y, curveBoundingBox) {
function handlePointMove(e, x, y) {
var self = e.target,
bezierEditor = self.bezierEditor;

Expand Down Expand Up @@ -323,7 +322,7 @@ define(function (require, exports, module) {
// Constrain time (x-axis) to 0 to 1 range. Progression (y-axis) is
// theoretically not constrained, although canvas to drawing curve is
// arbitrarily constrained to -0.5 to 1.5 range.
x = Math.min(Math.max(0, x), curveBoundingBox.width);
x = Math.min(Math.max(0, x), WIDTH_MAIN);

if (bezierEditor.dragElement) {
$(bezierEditor.dragElement).css({
Expand All @@ -348,13 +347,10 @@ define(function (require, exports, module) {
* @param {Element} canvas <canvas> element
* @param {number} x Horizontal position
* @param {number} y Vertical position
* @param {left: number, top: number, width: number, height: number} curveBoundingBox
*/
function updateTimeProgression(curve, x, y, curveBoundingBox) {
var height = curveBoundingBox.height;

curve.parentNode.setAttribute("data-time", Math.round(100 * x / curveBoundingBox.width));
curve.parentNode.setAttribute("data-progression", Math.round(100 * (3 * height / 4 - y) / (height * 0.5) - 50));
function updateTimeProgression(curve, x, y) {
curve.parentNode.setAttribute("data-time", Math.round(100 * x / WIDTH_MAIN));
curve.parentNode.setAttribute("data-progression", Math.round(100 * ((HEIGHT_MAIN - y) / HEIGHT_MAIN)));
}

/**
Expand All @@ -371,14 +367,14 @@ define(function (require, exports, module) {
x = e.pageX - left,
y = e.pageY - top - HEIGHT_ABOVE;

updateTimeProgression(self, x, y, curveBoundingBox);
updateTimeProgression(self, x, y);

if (bezierEditor.dragElement) {
if (e.pageX === 0 && e.pageY === 0) {
return;
}

handlePointMove(e, x, y, curveBoundingBox);
handlePointMove(e, x, y);
}
}

Expand All @@ -396,13 +392,13 @@ define(function (require, exports, module) {
x = e.pageX - left,
y = e.pageY - top - HEIGHT_ABOVE;

updateTimeProgression(bezierEditor.curve, x, y, curveBoundingBox);
updateTimeProgression(bezierEditor.curve, x, y);

if (e.pageX === 0 && e.pageY === 0) {
return;
}

handlePointMove(e, x, y, curveBoundingBox);
handlePointMove(e, x, y);
}

/**
Expand Down Expand Up @@ -450,7 +446,7 @@ define(function (require, exports, module) {
var $this = $(e.target),
left = parseInt($this.css("left"), 10),
top = parseInt($this.css("top"), 10),
offset = (e.shiftKey ? 20 : 2),
offset = (e.shiftKey ? 15 : 3),
newVal;

switch (code) {
Expand Down Expand Up @@ -527,16 +523,16 @@ define(function (require, exports, module) {
// redraw canvas
this._updateCanvas();

this.curve.addEventListener("click", _curveClick, false);
this.curve.addEventListener("mousemove", _curveMouseMove, false);
this.P1.addEventListener("mousemove", _pointMouseMove, false);
this.P2.addEventListener("mousemove", _pointMouseMove, false);
this.P1.addEventListener("mousedown", _pointMouseDown, false);
this.P2.addEventListener("mousedown", _pointMouseDown, false);
this.P1.addEventListener("mouseup", _pointMouseUp, false);
this.P2.addEventListener("mouseup", _pointMouseUp, false);
this.P1.addEventListener("keydown", _pointKeyDown, false);
this.P2.addEventListener("keydown", _pointKeyDown, false);
$(this.curve).on("click", _curveClick);
$(this.curve).on("mousemove", _curveMouseMove);
$(this.P1).on("mousemove", _pointMouseMove);
$(this.P2).on("mousemove", _pointMouseMove);
$(this.P1).on("mousedown", _pointMouseDown);
$(this.P2).on("mousedown", _pointMouseDown);
$(this.P1).on("mouseup", _pointMouseUp);
$(this.P2).on("mouseup", _pointMouseUp);
$(this.P1).on("keydown", _pointKeyDown);
$(this.P2).on("keydown", _pointKeyDown);
}

/**
Expand All @@ -546,16 +542,16 @@ define(function (require, exports, module) {

this.P1.bezierEditor = this.P2.bezierEditor = this.curve.bezierEditor = null;

this.curve.removeEventListener("click", _curveClick, false);
this.curve.removeEventListener("mousemove", _curveMouseMove, false);
this.P1.removeEventListener("mousemove", _pointMouseMove, false);
this.P2.removeEventListener("mousemove", _pointMouseMove, false);
this.P1.removeEventListener("mousedown", _pointMouseDown, false);
this.P2.removeEventListener("mousedown", _pointMouseDown, false);
this.P1.removeEventListener("mouseup", _pointMouseUp, false);
this.P2.removeEventListener("mouseup", _pointMouseUp, false);
this.P1.removeEventListener("keydown", _pointKeyDown, false);
this.P2.removeEventListener("keydown", _pointKeyDown, false);
$(this.curve).off("click", _curveClick);
$(this.curve).off("mousemove", _curveMouseMove);
$(this.P1).off("mousemove", _pointMouseMove);
$(this.P2).off("mousemove", _pointMouseMove);
$(this.P1).off("mousedown", _pointMouseDown);
$(this.P2).off("mousedown", _pointMouseDown);
$(this.P1).off("mouseup", _pointMouseUp);
$(this.P2).off("mouseup", _pointMouseUp);
$(this.P1).off("keydown", _pointKeyDown);
$(this.P2).off("keydown", _pointKeyDown);
};


Expand Down Expand Up @@ -611,20 +607,20 @@ define(function (require, exports, module) {
// handle special cases of cubic-bezier calls
switch (match[0]) {
case "linear":
return [ 0, 0, 1, 1 ];
return [ "0", "0", "1", "1" ];
case "ease":
return [ 0.25, 0.1, 0.25, 1 ];
return [ ".25", ".1", ".25", "1" ];
case "ease-in":
return [ 0.42, 0, 1, 1 ];
return [ ".42", "0", "1", "1" ];
case "ease-out":
return [ 0, 0, 0.58, 1 ];
return [ "0", "0", ".58", "1" ];
case "ease-in-out":
return [ 0.42, 0, 0.58, 1 ];
return [ ".42", "0", ".58", "1" ];
}
}

window.console.log("brackets-cubic-bezier: getCubicBezierCoords() passed invalid RegExp match array");
return [ 0, 0, 0, 0 ];
return [ "0", "0", "0", "0" ];
};

/**
Expand Down
15 changes: 15 additions & 0 deletions src/extensions/default/InlineTimingFunctionEditor/unittest-files/unittests.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/* */

.foo {
transition-timing-function: cubic-bezier(.42, 0, .58, 1);
transition-timing-function: cubic-bezier(0, -0.2, 1, 1.3);
transition-timing-function: linear;
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
}

.bar {
transition: width 1s cubic-bezier(.86, .11, .18, .86) 0s, height 500ms cubic-bezier(.27, .75, .78, .14) 100ms;
}
Loading

0 comments on commit 1295cfe

Please sign in to comment.