@qooxdoo/framework
Version:
The JS Framework for Coders
375 lines (304 loc) • 9.35 kB
JavaScript
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
Copyright:
2004-2011 1&1 Internet AG, Germany, http://www.1und1.de
License:
MIT: https://opensource.org/licenses/MIT
See the LICENSE file in the project's top-level directory for details.
Authors:
* Martin Wittemann (wittemann)
************************************************************************ */
qx.Class.define("qx.test.bom.element.Transform", {
extend: qx.dev.unit.TestCase,
include: [qx.dev.unit.MRequirements],
members: {
__el: null,
__keys: null,
setUp() {
this.__keys = qx.core.Environment.get("css.transform");
if (this.__keys == null) {
// skip the test
throw new qx.dev.unit.RequirementError("css.transform");
}
this.__el = { style: {} };
},
tearDown() {
this.__el = null;
},
/**
* TRANSFORM FUNCTIONS
*/
testTranslate() {
qx.bom.element.Transform.translate(this.__el, "123px");
this.assertTrue(
this.__el.style[this.__keys.name].indexOf("translate(123px)") != -1
);
},
testRotate() {
qx.bom.element.Transform.rotate(this.__el, "123deg");
this.assertTrue(
this.__el.style[this.__keys.name].indexOf("rotate(123deg)") != -1
);
},
testSkew() {
qx.bom.element.Transform.skew(this.__el, "123deg");
this.assertTrue(
this.__el.style[this.__keys.name].indexOf("skew(123deg)") != -1
);
},
testScale() {
qx.bom.element.Transform.scale(this.__el, 1.5);
this.assertTrue(
this.__el.style[this.__keys.name].indexOf("scale(1.5)") != -1
);
},
testTransform() {
qx.bom.element.Transform.transform(this.__el, {
scale: 1.2,
translate: "123px"
});
this.assertTrue(
this.__el.style[this.__keys.name].indexOf("translate(123px)") != -1
);
this.assertTrue(
this.__el.style[this.__keys.name].indexOf("scale(1.2)") != -1
);
},
"testAddStyleSheetRuleWith-X-Axis"() {
var css = qx.bom.element.Transform.getCss({
scale: 1.2,
translate: "123px"
});
var sheet = qx.bom.Stylesheet.createElement();
qx.bom.Stylesheet.addRule(sheet, ".test", css);
var computedRule = sheet.cssRules[0].cssText;
this.assertTrue(
computedRule.indexOf("translate(123px)") != -1,
"Found: " + computedRule
);
this.assertTrue(
computedRule.indexOf("scale(1.2)") != -1,
"Found: " + computedRule
);
},
"testAddStyleSheetRuleWith-XY-Axis"() {
var css = qx.bom.element.Transform.getCss({
scale: "1.2, 1",
translate: "123px,234px"
});
var sheet = qx.bom.Stylesheet.createElement();
qx.bom.Stylesheet.addRule(sheet, ".test", css);
var computedRule = sheet.cssRules[0].cssText;
this.assertTrue(
computedRule.indexOf("translate(123px, 234px)") != -1,
"Found: " + computedRule
);
this.assertTrue(
computedRule.indexOf("scale(1.2, 1)") != -1,
"Found: " + computedRule
);
},
/**
* ARRAY VALUES
*/
test3D() {
qx.bom.element.Transform.translate(this.__el, ["1px", "2px", "3px"]);
// 3d property
if (qx.core.Environment.get("css.transform.3d")) {
this.assertTrue(
this.__el.style[this.__keys.name].indexOf(
"translate3d(1px, 2px, 3px)"
) != -1,
"translate3d"
);
}
// 2d property
else {
this.assertTrue(
this.__el.style[this.__keys.name].indexOf(
"translateX(1px) translateY(2px)"
) != -1
);
}
},
"testAddStyleSheetRuleWith-XYZ-Axis"() {
var css = qx.bom.element.Transform.getCss({
scale: [1.2, 1, 0],
translate: ["123px", "234px", "345em"]
});
var sheet = qx.bom.Stylesheet.createElement();
qx.bom.Stylesheet.addRule(sheet, ".test", css);
var computedRule = sheet.cssRules[0].cssText;
// 3d property
if (qx.core.Environment.get("css.transform.3d")) {
this.assertTrue(
computedRule.indexOf("translate3d(123px, 234px, 345em)") != -1,
"Found: " + computedRule
);
this.assertTrue(
computedRule.indexOf("scale3d(1.2, 1, 0)") != -1,
"Found: " + computedRule
);
}
// 2d property
else {
this.assertTrue(
computedRule.indexOf("translateX(123px)") != -1,
"Found: " + computedRule
);
this.assertTrue(
computedRule.indexOf("translateY(234px)") != -1,
"Found: " + computedRule
);
this.assertFalse(
computedRule.indexOf("translateY(345em)") != -1,
"Found: " + computedRule
);
this.assertTrue(
computedRule.indexOf("scaleX(1.2)") != -1,
"Found: " + computedRule
);
this.assertTrue(
computedRule.indexOf("scaleY(1)") != -1,
"Found: " + computedRule
);
this.assertFalse(
computedRule.indexOf("scaleZ(0)") != -1,
"Found: " + computedRule
);
}
},
/**
* CSS HELPER
*/
testGetCss() {
var value = qx.bom.element.Transform.getCss({ scale: 1.2 });
this.assertEquals(
qx.bom.Style.getCssName(this.__keys.name) + ":scale(1.2);",
value
);
},
/**
* ADDITIONAL CSS TRANSFORM PROPERTIES
*/
testOrigin() {
qx.bom.element.Transform.setOrigin(this.__el, "30% 20%");
this.assertEquals("30% 20%", this.__el.style[this.__keys["origin"]]);
this.assertEquals(
"30% 20%",
qx.bom.element.Transform.getOrigin(this.__el)
);
},
testStyle() {
qx.bom.element.Transform.setStyle(this.__el, "affe");
this.assertEquals("affe", this.__el.style[this.__keys["style"]]);
this.assertEquals("affe", qx.bom.element.Transform.getStyle(this.__el));
},
testPerspective() {
qx.bom.element.Transform.setPerspective(this.__el, 123);
this.assertEquals("123px", this.__el.style[this.__keys["perspective"]]);
this.assertEquals(
"123px",
qx.bom.element.Transform.getPerspective(this.__el)
);
},
testPerspectiveOrigin() {
qx.bom.element.Transform.setPerspectiveOrigin(this.__el, "30% 10%");
this.assertEquals(
"30% 10%",
this.__el.style[this.__keys["perspective-origin"]]
);
this.assertEquals(
"30% 10%",
qx.bom.element.Transform.getPerspectiveOrigin(this.__el)
);
},
testBackfaceVisibility() {
qx.bom.element.Transform.setBackfaceVisibility(this.__el, true);
this.assertEquals(
"visible",
this.__el.style[this.__keys["backface-visibility"]]
);
this.assertTrue(
qx.bom.element.Transform.getBackfaceVisibility(this.__el)
);
},
testGetTransformValue() {
var cssValue;
// one axis
cssValue = qx.bom.element.Transform.getTransformValue({
scale: [1]
});
this.assertEquals(cssValue, "scaleX(1)");
// two axis
cssValue = qx.bom.element.Transform.getTransformValue({
scale: [1, 2]
});
this.assertEquals(cssValue, "scaleX(1) scaleY(2)");
// three axis
cssValue = qx.bom.element.Transform.getTransformValue({
scale: [1, 2, 3]
});
// 3d property
if (qx.core.Environment.get("css.transform.3d")) {
this.assertEquals(cssValue, "scale3d(1, 2, 3)");
}
// 2d property
else {
this.assertEquals(cssValue, "scaleX(1) scaleY(2)");
}
},
testTransformArray() {
qx.bom.element.Transform.transform(this.__el, {
translate: ["1px", "2px", "3px"],
scale: [1, 2, 3],
rotate: ["1deg", "2deg", "3deg"],
skew: ["1deg", "2deg"]
});
// 3d property
if (qx.core.Environment.get("css.transform.3d")) {
this.assertTrue(
this.__el.style[this.__keys.name].indexOf(
"translate3d(1px, 2px, 3px)"
) != -1,
"translate3d"
);
this.assertTrue(
this.__el.style[this.__keys.name].indexOf("scale3d(1, 2, 3)") != -1,
"scale3d"
);
this.assertTrue(
this.__el.style[this.__keys.name].indexOf("rotateZ(3deg)") != -1,
"rotate"
);
this.assertTrue(
this.__el.style[this.__keys.name].indexOf(
"skewX(1deg) skewY(2deg)"
) != -1,
"skew"
);
}
// 2d property
else {
this.assertTrue(
this.__el.style[this.__keys.name].indexOf(
"translateX(1px) translateY(2px)"
) != -1,
"translate"
);
this.assertTrue(
this.__el.style[this.__keys.name].indexOf("scaleX(1) scaleY(2)") !=
-1,
"scale"
);
this.assertTrue(
this.__el.style[this.__keys.name].indexOf(
"skewX(1deg) skewY(2deg)"
) != -1,
"skew"
);
}
}
}
});