* work. However, they have different sizes, so percentages need to be
* computed differently. */
body {
- margin: -15px;
- width: 130px;
- height: 80px;
+ margin: -15px;
+ width: 130px;
+ height: 80px;
}
body > div {
- width: 120px;
- height: 70px;
- padding: 5px;
- background: orange;
+ width: 120px;
+ height: 70px;
+ padding: 5px;
+ background: orange;
}
body > div > div {
- width: 110px;
- height: 60px;
- padding: 5px;
- background: yellow;
+ width: 110px;
+ height: 60px;
+ padding: 5px;
+ background: yellow;
}
body, div {
- position: relative;
+ position: relative;
}
#test {
- position: static;
- height: 30px;
- width: 80px;
- padding: 5px;
- border: 5px solid black;
- margin: 5px;
- background: blue;
+ position: static;
+ height: 30px;
+ width: 80px;
+ padding: 5px;
+ border: 5px solid black;
+ margin: 5px;
+ background: blue;
}
#log { display: none }
</style>
// Test case-sensitivity and other parsing issues
section = "parsing";
[
- // "none" and parse errors; we prepend scale(2) for parse errors to ensure
- // that any resulting identity matrix is really due to a parse error and
- // not just the function happening to evaluate to the identity matrix
- [[// "none"
- "none", "NONE", "nOnE",
- // Gibberish
- "scale(2) quasit", "scale(2) QUASIT", "scale(2) qUaSiT",
- // No arguments
- "scale(2) matrix()", "scale(2) translate()", "scale(2) translateX()",
- "scale(2) translateY()", "scale(2) scale()", "scale(2) scaleX()",
- "scale(2) scaleY()", "scale(2) rotate()", "scale(2) skewX()",
- "scale(2) skewY()", "scale(2) skew()",
- // Too few arguments
- "scale(2) matrix(1)", "scale(2) matrix(1,2)", "scale(2) matrix(1,2,3)",
- "scale(2) matrix(1,2,3,4)", "scale(2) matrix(1,2,3,4,5)",
- // Too many arguments
- "scale(2) matrix(1,2,3,4,5,6,7)", "scale(2) translateX(0,0)",
- "scale(2) translateY(0,0)", "scale(2) scaleX(1,1)",
- "scale(2) scaleY(1,1)", "scale(2) rotate(90deg,90deg)",
- "scale(2) rotate(1,90deg)", "scale(2) rotate(90deg,1)",
- "scale(2) rotate(1,1,90deg)", "scale(2) rotate(90deg,1,1)",
- "scale(2) rotate(90deg,1,1,1)", "scale(2) skewX(90deg,90deg)",
- "scale(2) skewY(90deg,90deg)", "scale(2) skew(90deg,90deg,90deg)",
- // Wrong unit
- "scale(2) translate(10,10)", "scale(2) translate(10px,10)",
- "scale(2) translate(10,10px)", "scale(2) translateX(10)",
- "scale(2) translateY(10)",
- "scale(2) scale(10px,10px)", "scale(2) scale(10px,10)",
- "scale(2) scale(10,10px)", "scale(2) scale(10%,10%)",
- "scale(2) scale(10%,10)", "scale(2) scale(10,10%)",
- "scale(2) scaleX(10px)", "scale(2) scaleX(10%)",
- "scale(2) scaleY(10px)", "scale(2) scaleY(10%)",
- "scale(2) rotate(10px)", "scale(2) rotate(10%)", "scale(2) rotate(10)",
- "scale(2) skewX(10px)", "scale(2) skewX(10)",
- "scale(2) skewY(10px)", "scale(2) skewY(10)",
- "scale(2) skew(10px,10px)", "scale(2) skew(0deg,10px)",
- "scale(2) skew(10px,0deg)", "scale(2) skew(10,10)",
- "scale(2) skew(0deg,10)", "scale(2) skew(10,0deg)",
-
// FIXME: <angle> doesn't allow "0" with no unit, except really it does
- // https://www.w3.org/Bugs/Public/show_bug.cgi?id=15598
- //"scale(2) rotate(0)", "scale(2) skewX(0)", "scale(2) skewY(0)",
- //"scale(2) skew(90deg,0)", "scale(2) skew(0,90deg)", "scale(2) skew(0,0)",
- // The spec says <number> for all entries, so lengths and percentages are
- // not allowed in the last two entries. FIXME: Mozilla wants this
- // changed. https://www.w3.org/Bugs/Public/show_bug.cgi?id=15628
- "scale(2) matrix(1,2,3,4,5px,6)", "scale(2) matrix(1,2,3,4,5%,6)",
- "scale(2) matrix(1,2,3,4,5,6px)", "scale(2) matrix(1,2,3,4,5,6%)",
- "scale(2) matrix(1,2,3,4,5px,6px)", "scale(2) matrix(1,2,3,4,5%,6%)",
- // The 3D transform spec requires that the 3D versions of these all have
- // "3d" (matrix3d, translate3d, scale3d, rotate3d), so these are all
- // parse errors
- "scale(2) matrix(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16)",
- "scale(2) translate(1px,1px,1px)", "scale(2) scale(1,1,1)",
- "scale(2) rotate(1,1,1,90deg)",
- ]],
- // Case-sensitivity
- [["matrix(1,2,3,4,5,6)", "MATRIX(1,2,3,4,5,6)", "mAtRiX(1,2,3,4,5,6)"], 1, 2, 3, 4, 5, 6],
- [["translate(1px)", "TRANSLATE(1PX)", "tRaNsLaTe(1Px)"], 1, 0, 0, 1, 1, 0],
- [["translatex(1pt)", "TRANSLATEX(1PT)", "tRaNsLaTeX(1pT)"], 1, 0, 0, 1, 1/0.75, 0],
- [["translatey(1in)", "TRANSLATEY(1IN)", "tRaNsLaTeY(1iN)"], 1, 0, 0, 1, 0, 96],
- [["scale(2)", "SCALE(2)", "sCaLe(2)"], 2, 0, 0, 2, 0, 0],
- [["scalex(2)", "SCALEX(2)", "sCaLeX(2)"], 2, 0, 0, 1, 0, 0],
- [["scaley(2)", "SCALEY(2)", "sCaLeY(2)"], 1, 0, 0, 2, 0, 0],
- // Nothing much uses angle units, so I'll test case-insensitivity for those
- // while I'm here
- [["rotate(90deg)", "ROTATE(90DEG)", "rOtAtE(90dEg)",
- "rotate(100grad)", "ROTATE(100GRAD)", "rOtAtE(100gRaD)",
- "rotate(1.57079633rad)", "ROTATE(1.57079633RAD)", "rOtAtE(1.57079633rAd)",
- "rotate(0.25turn)", "ROTATE(0.25TURN)", "rOtAtE(0.25tUrN)"], 0, 1, -1, 0, 0, 0],
- [["skewx(45deg)", "SKEWX(45DEG)", "sKeWx(45DeG)"], 1, 0, 1, 1, 0, 0],
- [["skewy(45deg)", "SKEWY(45DEG)", "sKeWy(45DeG)"], 1, 1, 0, 1, 0, 0],
- [["skew(45deg, 45deg)", "SKEW(45DEG, 45DEG)", "sKeW(45dEg, 45DeG)"], 1, 1, 1, 1, 0, 0],
+ // "none" and parse errors; we prepend scale(2) for parse errors to ensure
+ // that any resulting identity matrix is really due to a parse error and
+ // not just the function happening to evaluate to the identity matrix
+ [[// "none"
+ "none", "NONE", "nOnE",
+ // Gibberish
+ "scale(2) quasit", "scale(2) QUASIT", "scale(2) qUaSiT",
+ // No arguments
+ "scale(2) matrix()", "scale(2) translate()", "scale(2) translateX()",
+ "scale(2) translateY()", "scale(2) scale()", "scale(2) scaleX()",
+ "scale(2) scaleY()", "scale(2) rotate()", "scale(2) skewX()",
+ "scale(2) skewY()", "scale(2) skew()",
+ // Too few arguments
+ "scale(2) matrix(1)", "scale(2) matrix(1,2)", "scale(2) matrix(1,2,3)",
+ "scale(2) matrix(1,2,3,4)", "scale(2) matrix(1,2,3,4,5)",
+ // Too many arguments
+ "scale(2) matrix(1,2,3,4,5,6,7)", "scale(2) translateX(0,0)",
+ "scale(2) translateY(0,0)", "scale(2) scaleX(1,1)",
+ "scale(2) scaleY(1,1)", "scale(2) rotate(90deg,90deg)",
+ "scale(2) rotate(1,90deg)", "scale(2) rotate(90deg,1)",
+ "scale(2) rotate(1,1,90deg)", "scale(2) rotate(90deg,1,1)",
+ "scale(2) rotate(90deg,1,1,1)", "scale(2) skewX(90deg,90deg)",
+ "scale(2) skewY(90deg,90deg)", "scale(2) skew(90deg,90deg,90deg)",
+ // Wrong unit
+ "scale(2) translate(10,10)", "scale(2) translate(10px,10)",
+ "scale(2) translate(10,10px)", "scale(2) translateX(10)",
+ "scale(2) translateY(10)",
+ "scale(2) scale(10px,10px)", "scale(2) scale(10px,10)",
+ "scale(2) scale(10,10px)", "scale(2) scale(10%,10%)",
+ "scale(2) scale(10%,10)", "scale(2) scale(10,10%)",
+ "scale(2) scaleX(10px)", "scale(2) scaleX(10%)",
+ "scale(2) scaleY(10px)", "scale(2) scaleY(10%)",
+ "scale(2) rotate(10px)", "scale(2) rotate(10%)", "scale(2) rotate(10)",
+ "scale(2) skewX(10px)", "scale(2) skewX(10)",
+ "scale(2) skewY(10px)", "scale(2) skewY(10)",
+ "scale(2) skew(10px,10px)", "scale(2) skew(0deg,10px)",
+ "scale(2) skew(10px,0deg)", "scale(2) skew(10,10)",
+ "scale(2) skew(0deg,10)", "scale(2) skew(10,0deg)",
+ // FIXME: <angle> doesn't allow "0" with no unit, except really it does
+ // https://www.w3.org/Bugs/Public/show_bug.cgi?id=15598
+ //"scale(2) rotate(0)", "scale(2) skewX(0)", "scale(2) skewY(0)",
+ //"scale(2) skew(90deg,0)", "scale(2) skew(0,90deg)", "scale(2) skew(0,0)",
+ // The spec says <number> for all entries, so lengths and percentages are
+ // not allowed in the last two entries. FIXME: Mozilla wants this
+ // changed. https://www.w3.org/Bugs/Public/show_bug.cgi?id=15628
+ "scale(2) matrix(1,2,3,4,5px,6)", "scale(2) matrix(1,2,3,4,5%,6)",
+ "scale(2) matrix(1,2,3,4,5,6px)", "scale(2) matrix(1,2,3,4,5,6%)",
+ "scale(2) matrix(1,2,3,4,5px,6px)", "scale(2) matrix(1,2,3,4,5%,6%)",
+ // The 3D transform spec requires that the 3D versions of these all have
+ // "3d" (matrix3d, translate3d, scale3d, rotate3d), so these are all
+ // parse errors
+ "scale(2) matrix(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16)",
+ "scale(2) translate(1px,1px,1px)", "scale(2) scale(1,1,1)",
+ "scale(2) rotate(1,1,1,90deg)",
+ ]],
+ // Case-sensitivity
+ [["matrix(1,2,3,4,5,6)", "MATRIX(1,2,3,4,5,6)", "mAtRiX(1,2,3,4,5,6)"], 1, 2, 3, 4, 5, 6],
+ [["translate(1px)", "TRANSLATE(1PX)", "tRaNsLaTe(1Px)"], 1, 0, 0, 1, 1, 0],
+ [["translatex(1pt)", "TRANSLATEX(1PT)", "tRaNsLaTeX(1pT)"], 1, 0, 0, 1, 1/0.75, 0],
+ [["translatey(1in)", "TRANSLATEY(1IN)", "tRaNsLaTeY(1iN)"], 1, 0, 0, 1, 0, 96],
+ [["scale(2)", "SCALE(2)", "sCaLe(2)"], 2, 0, 0, 2, 0, 0],
+ [["scalex(2)", "SCALEX(2)", "sCaLeX(2)"], 2, 0, 0, 1, 0, 0],
+ [["scaley(2)", "SCALEY(2)", "sCaLeY(2)"], 1, 0, 0, 2, 0, 0],
+ // Nothing much uses angle units, so I'll test case-insensitivity for those
+ // while I'm here
+ [["rotate(90deg)", "ROTATE(90DEG)", "rOtAtE(90dEg)",
+ "rotate(100grad)", "ROTATE(100GRAD)", "rOtAtE(100gRaD)",
+ "rotate(1.57079633rad)", "ROTATE(1.57079633RAD)", "rOtAtE(1.57079633rAd)",
+ "rotate(0.25turn)", "ROTATE(0.25TURN)", "rOtAtE(0.25tUrN)"], 0, 1, -1, 0, 0, 0],
+ [["skewx(45deg)", "SKEWX(45DEG)", "sKeWx(45DeG)"], 1, 0, 1, 1, 0, 0],
+ [["skewy(45deg)", "SKEWY(45DEG)", "sKeWy(45DeG)"], 1, 1, 0, 1, 0, 0],
+ [["skew(45deg, 45deg)", "SKEW(45DEG, 45DEG)", "sKeW(45dEg, 45DeG)"], 1, 1, 1, 1, 0, 0],
].forEach(function(arr) {
- arr[0].forEach(function(transform, i) {
+ arr[0].forEach(function(transform, i) {
//var transformKeyword = {0: "TRANSFORM", 1: "tRAnSFoRM", 2: "transform"}[i%3];
var transformKeyword = prefixProp("transform");
- test(function() {
- div.removeAttribute("style");
+ test(function() {
+ div.removeAttribute("style");
//div.style[prefixProp("transform").replace("transform", transformKeyword)] = transform;
div.style[prefixProp("transform")] = transform;
- testTransformParsing(arr.slice(1));
- }, 'Computed value for "' + transformKeyword + ": " + transform + '" set via CSSOM');
- });
+ testTransformParsing(arr.slice(1));
+ }, 'Computed value for "' + transformKeyword + ": " + transform + '" set via CSSOM');
+ });
});
testTransform("", []);
matrixValues.forEach(function(d) {
matrixValues.forEach(function(e) {
matrixValues.forEach(function(f) {
- if (i % 13 == 0) {
- testTransform(
- "matrix(" + a + ", " + b + ", " + c + ", " + d + ", " + e + ", " + f + ")",
- [a, b, c, d, e, f]
- );
- }
- i++;
- i %= 13;
+ if (i % 13 == 0) {
+ testTransform(
+ "matrix(" + a + ", " + b + ", " + c + ", " + d + ", " + e + ", " + f + ")",
+ [a, b, c, d, e, f]
+ );
+ }
+ i++;
+ i %= 13;
});
});
});
// Test translate()/translateX()/translateY()
section = "translate";
percentagesAndLengths.forEach(function(tx) {
- testTransform(
- "translateX(" + tx + ")",
- [1, 0, 0, 1, convertToPx(tx, divWidth), 0]
- );
- // tx is poorly named, since it's used for y here.
- testTransform(
- "translateY(" + tx + ")",
- [1, 0, 0, 1, 0, convertToPx(tx, divHeight)]
- );
- testTransform(
- "translate(" + tx + ")",
- [1, 0, 0, 1, convertToPx(tx, divWidth), 0]
- );
+ testTransform(
+ "translateX(" + tx + ")",
+ [1, 0, 0, 1, convertToPx(tx, divWidth), 0]
+ );
+ // tx is poorly named, since it's used for y here.
+ testTransform(
+ "translateY(" + tx + ")",
+ [1, 0, 0, 1, 0, convertToPx(tx, divHeight)]
+ );
+ testTransform(
+ "translate(" + tx + ")",
+ [1, 0, 0, 1, convertToPx(tx, divWidth), 0]
+ );
- percentagesAndLengths.forEach(function(ty) {
- testTransform(
- "translate(" + tx + ", " + ty + ")",
- [1, 0, 0, 1, convertToPx(tx, divWidth), convertToPx(ty, divHeight)]
- );
- });
+ percentagesAndLengths.forEach(function(ty) {
+ testTransform(
+ "translate(" + tx + ", " + ty + ")",
+ [1, 0, 0, 1, convertToPx(tx, divWidth), convertToPx(ty, divHeight)]
+ );
+ });
});
// Test scale()/scaleX()/scaleY()
(function(){
var scales = [-2, -1, -0.12, 0, 0.12, 1, 2];
scales.forEach(function(sx) {
- testTransform(
- "scaleX(" + sx + ")",
- [sx, 0, 0, 1, 0, 0]
- );
- // sx is poorly named, since it's used for y here, then for both x and y.
- testTransform(
- "scaleY(" + sx + ")",
- [1, 0, 0, sx, 0, 0]
- );
- testTransform(
- "scale(" + sx + ")",
- [sx, 0, 0, sx, 0, 0]
- );
+ testTransform(
+ "scaleX(" + sx + ")",
+ [sx, 0, 0, 1, 0, 0]
+ );
+ // sx is poorly named, since it's used for y here, then for both x and y.
+ testTransform(
+ "scaleY(" + sx + ")",
+ [1, 0, 0, sx, 0, 0]
+ );
+ testTransform(
+ "scale(" + sx + ")",
+ [sx, 0, 0, sx, 0, 0]
+ );
- scales.forEach(function(sy) {
- testTransform(
- "scale(" + sx + ", " + sy + ")",
- [sx, 0, 0, sy, 0, 0]
- );
- });
+ scales.forEach(function(sy) {
+ testTransform(
+ "scale(" + sx + ", " + sy + ")",
+ [sx, 0, 0, sy, 0, 0]
+ );
+ });
});
})();
// Test rotate()
section = "rotate";
rotateAngles.forEach(function(angle) {
- var rads = convertToRad(angle);
- testTransform(
- "rotate(" + angle + ")",
- [Math.cos(rads), Math.sin(rads), -Math.sin(rads), Math.cos(rads),
- 0, 0]
- );
+ var rads = convertToRad(angle);
+ testTransform(
+ "rotate(" + angle + ")",
+ [Math.cos(rads), Math.sin(rads), -Math.sin(rads), Math.cos(rads),
+ 0, 0]
+ );
});
// Test skewX()/skewY()/skew()
section = "skew";
skewAngles.forEach(function(angle1) {
- testTransform(
- "skewX(" + angle1 + ")",
- [1, 0, Math.tan(convertToRad(angle1)), 1, 0, 0]
- );
- testTransform(
- "skewY(" + angle1 + ")",
- [1, Math.tan(convertToRad(angle1)), 0, 1, 0, 0]
- );
- testTransform(
- "skew(" + angle1 + ")",
- [1, 0, Math.tan(convertToRad(angle1)), 1, 0, 0]
- );
+ testTransform(
+ "skewX(" + angle1 + ")",
+ [1, 0, Math.tan(convertToRad(angle1)), 1, 0, 0]
+ );
+ testTransform(
+ "skewY(" + angle1 + ")",
+ [1, Math.tan(convertToRad(angle1)), 0, 1, 0, 0]
+ );
+ testTransform(
+ "skew(" + angle1 + ")",
+ [1, 0, Math.tan(convertToRad(angle1)), 1, 0, 0]
+ );
- skewAngles.forEach(function(angle2) {
- testTransform(
- "skew(" + angle1 + ", " + angle2 + ")",
- [1, Math.tan(convertToRad(angle2)),
- Math.tan(convertToRad(angle1)), 1,
- 0, 0]
- );
- });
+ skewAngles.forEach(function(angle2) {
+ testTransform(
+ "skew(" + angle1 + ", " + angle2 + ")",
+ [1, Math.tan(convertToRad(angle2)),
+ Math.tan(convertToRad(angle1)), 1,
+ 0, 0]
+ );
+ });
});
// Test multiple transformations
section = "multiple";
(function(){
var transforms = [
- ["matrix(4, -7, 2.3, -3.8, 6, 6)", 4, -7, 2.3, -3.8, 6, 6],
- ["translate(0.23in, -17pt)",
- 1, 0, 0, 1, convertToPx("0.23in"), convertToPx("-17pt")],
- ["scale(1.3, -5.6)", 1.3, 0, 0, -5.6, 0, 0],
- ["rotate(0.759rad)", Math.cos(0.759), Math.sin(0.759),
- -Math.sin(0.759), Math.cos(0.759), 0, 0],
- ["skewX(-0.221rad)", 1, 0, Math.tan(-0.221), 1, 0, 0],
+ ["matrix(4, -7, 2.3, -3.8, 6, 6)", 4, -7, 2.3, -3.8, 6, 6],
+ ["translate(0.23in, -17pt)",
+ 1, 0, 0, 1, convertToPx("0.23in"), convertToPx("-17pt")],
+ ["scale(1.3, -5.6)", 1.3, 0, 0, -5.6, 0, 0],
+ ["rotate(0.759rad)", Math.cos(0.759), Math.sin(0.759),
+ -Math.sin(0.759), Math.cos(0.759), 0, 0],
+ ["skewX(-0.221rad)", 1, 0, Math.tan(-0.221), 1, 0, 0],
];
transforms.forEach(function(trans1) {
- testTransform(trans1[0], trans1.slice(1));
+ testTransform(trans1[0], trans1.slice(1));
- transforms.forEach(function(trans2) {
- var mx = mxmul23(trans1.slice(1), trans2.slice(1));
+ transforms.forEach(function(trans2) {
+ var mx = mxmul23(trans1.slice(1), trans2.slice(1));
- // First put both transforms on the test div
- testTransform(trans1[0] + " " + trans2[0], mx);
+ // First put both transforms on the test div
+ testTransform(trans1[0] + " " + trans2[0], mx);
- // Now put the first on its grandparent, and the second on its parent.
- // No need to test parsing.
- testTransformedBoundary([trans1[0], trans2[0], "none"], mx);
+ // Now put the first on its grandparent, and the second on its parent.
+ // No need to test parsing.
+ testTransformedBoundary([trans1[0], trans2[0], "none"], mx);
- transforms.forEach(function(trans3) {
- var mx = mxmul23(trans1.slice(1), trans2.slice(1), trans3.slice(1));
- testTransform(trans1[0] + " " + trans2[0] + " " + trans3[0], mx);
- testTransformedBoundary([trans1[0], trans2[0], trans3[0]], mx);
- });
- });
+ transforms.forEach(function(trans3) {
+ var mx = mxmul23(trans1.slice(1), trans2.slice(1), trans3.slice(1));
+ testTransform(trans1[0] + " " + trans2[0] + " " + trans3[0], mx);
+ testTransformedBoundary([trans1[0], trans2[0], trans3[0]], mx);
+ });
+ });
});
})();
// Try to trigger rounding errors (although this is not precisely defined by
// the spec)
testTransform("translateX(-1000px) scaleX(1000000) "
- + "translateX(0.001px) scaleX(0.000001)",
- [1, 0, 0, 1, 0, 0]);
+ + "translateX(0.001px) scaleX(0.000001)",
+ [1, 0, 0, 1, 0, 0]);
section = "origin";
// Test transform-origin with one argument
[
- ["none", "50%", "50%"],
- ["NONE", "50%", "50%"],
- ["nOnE", "50%", "50%"],
- ["quasit", "50%", "50%"],
- ["top", "50%", "0%"],
- ["TOP", "50%", "0%"],
- ["tOp", "50%", "0%"],
- ["right", "100%", "50%"],
- ["RIGHT", "100%", "50%"],
- ["rIgHt", "100%", "50%"],
- ["bottom", "50%", "100%"],
- ["BOTTOM", "50%", "100%"],
- ["bOtToM", "50%", "100%"],
- ["left", "0%", "50%"],
- ["LEFT", "0%", "50%"],
- ["lEfT", "0%", "50%"],
- ["center", "50%", "50%"],
- ["CENTER", "50%", "50%"],
- ["cEnTeR", "50%", "50%"],
- ["37%", "37%", "50%"],
- ["117%", "117%", "50%"],
- ["41.2px", "41.2px", "50%"],
- ["-31.8px", "-31.8px", "50%"],
+ ["none", "50%", "50%"],
+ ["NONE", "50%", "50%"],
+ ["nOnE", "50%", "50%"],
+ ["quasit", "50%", "50%"],
+ ["top", "50%", "0%"],
+ ["TOP", "50%", "0%"],
+ ["tOp", "50%", "0%"],
+ ["right", "100%", "50%"],
+ ["RIGHT", "100%", "50%"],
+ ["rIgHt", "100%", "50%"],
+ ["bottom", "50%", "100%"],
+ ["BOTTOM", "50%", "100%"],
+ ["bOtToM", "50%", "100%"],
+ ["left", "0%", "50%"],
+ ["LEFT", "0%", "50%"],
+ ["lEfT", "0%", "50%"],
+ ["center", "50%", "50%"],
+ ["CENTER", "50%", "50%"],
+ ["cEnTeR", "50%", "50%"],
+ ["37%", "37%", "50%"],
+ ["117%", "117%", "50%"],
+ ["41.2px", "41.2px", "50%"],
+ ["-31.8px", "-31.8px", "50%"],
].forEach(function(arr) {
- testTransformOrigin(arr[0], arr[1], arr[2]);
+ testTransformOrigin(arr[0], arr[1], arr[2]);
});
// Test transform-origin with two arguments.
["left", "center", "right"].concat(percentagesAndLengths).forEach(function(arg1) {
- ["top", "center", "bottom"].concat(percentagesAndLengths).forEach(function(arg2) {
- testTransformOrigin(arg1 + " " + arg2, arg1, arg2);
- });
+ ["top", "center", "bottom"].concat(percentagesAndLengths).forEach(function(arg2) {
+ testTransformOrigin(arg1 + " " + arg2, arg1, arg2);
+ });
});
// FIXME: Three- and four-value variants are not generally implemented; see
setStyles({}, {transformOrigin: "0% 75%"}, {});
testTransformOrigin("inherit", "0%", "75%");
setStyles({},
- {transformOrigin: "inherit", fontSize: "0.5em"},
- {transformOrigin: "1em 1em", fontSize: "2em"});
+ {transformOrigin: "inherit", fontSize: "0.5em"},
+ {transformOrigin: "1em 1em", fontSize: "2em"});
testTransformOrigin("inherit", "2em", "2em");
setStyles({}, {}, {});
// lengths nor percentages are to be resolved. Note that the transformations
// are cumulative in this case.
testTransformedBoundary(["", "translate(25px)", "inherit"],
- [1, 0, 0, 1, 50, 0]);
+ [1, 0, 0, 1, 50, 0]);
testTransformedBoundary(["", "translate(50%)", "inherit"],
- [1, 0, 0, 1,
- convertToPx("50%", divParentWidth) + convertToPx("50%", divWidth),
- 0]);
+ [1, 0, 0, 1,
+ convertToPx("50%", divParentWidth) + convertToPx("50%", divWidth),
+ 0]);
// FIXME: Resolution of relative lengths is unclear.
// https://www.w3.org/Bugs/Public/show_bug.cgi?id=15797
//setStyles({},
-// {transform: "inherit", fontSize: "0.5em"},
-// {transform: "translate(1em)", fontSize: "2em"});
+// {transform: "inherit", fontSize: "0.5em"},
+// {transform: "translate(1em)", fontSize: "2em"});
//testTransformedBoundary("inherit",
-// [1, 0, 0, 1, convertToPx("4em"), 0]);
+// [1, 0, 0, 1, convertToPx("4em"), 0]);
[].forEach.call(document.querySelectorAll("style"), function(style) {style.disabled = true});
</script>
projects / test / tct / web / api.git / commitdiff