Commit f8a9be71 authored by meade's avatar meade Committed by Commit bot
Browse files

[Typed OM] Rename cssString methods to cssText

Spec for CSSStyleValue:
https://drafts.css-houdini.org/css-typed-om/#dom-cssstylevalue-csstext

Spec for CSSTransformComponent:
https://drafts.css-houdini.org/css-typed-om/#dom-csstransformcomponent-csstext

BUG=545318

Review-Url: https://codereview.chromium.org/2097093002
Cr-Commit-Position: refs/heads/master@{#402335}
parent 161c00e2
......@@ -16,7 +16,7 @@ function generatePaintStyleLogging(properties) {
const properties = styleMap.getProperties().sort();
for (let i = 0; i < properties.length; i++) {
const value = styleMap.get(properties[i]);
console.log(properties[i] + ': ' + (value ? value.cssString : '[null]'));
console.log(properties[i] + ': ' + (value ? value.cssText: '[null]'));
}
}
});
......
......@@ -90,10 +90,10 @@ CONSOLE MESSAGE: line 137: getter ay
CONSOLE MESSAGE: line 137: method constructor
CONSOLE MESSAGE: line 137: interface CSSStyleValue
CONSOLE MESSAGE: line 137: static method parse
CONSOLE MESSAGE: line 137: getter cssString
CONSOLE MESSAGE: line 137: getter cssText
CONSOLE MESSAGE: line 137: method constructor
CONSOLE MESSAGE: line 137: interface CSSTransformComponent
CONSOLE MESSAGE: line 137: getter cssString
CONSOLE MESSAGE: line 137: getter cssText
CONSOLE MESSAGE: line 137: method asMatrix
CONSOLE MESSAGE: line 137: method constructor
CONSOLE MESSAGE: line 137: method is2DComponent
......
......@@ -13,7 +13,7 @@ test(function() {
var result = computedStyleMap.get('border-top-width');
assert_true(result instanceof CSSSimpleLength);
assert_equals(result.cssString, '10px');
assert_equals(result.cssText, '10px');
}, "Getting a 10px border-top-width returns a CSSSimpleLength");
test(function() {
......@@ -21,7 +21,7 @@ test(function() {
var result = computedStyleMap.getAll('border-top-width');
assert_equals(result.length, 1);
assert_equals(result[0].cssString, '20px');
assert_equals(result[0].cssText, '20px');
}, "getAll for border-top-width returns a single value");
</script>
......@@ -28,7 +28,7 @@ test(function() {
if (styleValues.length == 1) {
// TODO(meade): Remove this if statement once all properties are supported.
// TODO(meade): Handle sequence types.
assert_equals(computedStyleMap.get(property).cssString, computedStyle[property]);
assert_equals(computedStyleMap.get(property).cssText, computedStyle[property]);
}
}
}, 'Properties retrieved from ComputedStyleMap reflect the same values as from ComputedStyle');
......@@ -37,7 +37,7 @@ test(function() {
testElement.style.border = '1px solid #00ff00';
var styleValue = computedStyleMap.get('border');
assert_equals(styleValue.constructor, CSSStyleValue);
assert_equals(styleValue.cssString, testElement.style.border);
assert_equals(styleValue.cssText, testElement.style.border);
}, 'Unsupported but serializable property returns a base CSSStyleValue.');
test(function() {
......
......@@ -20,8 +20,8 @@
var computedStyleMap = getComputedStyleMap(testElement);
var pseudoComputedStyleMap = getComputedStyleMap(testElement, '::after');
test(function() {
assert_equals(computedStyleMap.get('border-top-width').cssString, '5px');
assert_equals(pseudoComputedStyleMap.get('border-top-width').cssString, '1px');
assert_equals(computedStyleMap.get('border-top-width').cssText, '5px');
assert_equals(pseudoComputedStyleMap.get('border-top-width').cssText, '1px');
}, 'get on Computed StyleMap of pseudo element returns correct styles');
test(function() {
......@@ -29,7 +29,7 @@ test(function() {
var styleValueList = pseudoComputedStyleMap.getAll('border-top-width');
assert_equals(styleValueList.length, 1);
assert_equals(styleValueList[0].cssString, '1px');
assert_equals(styleValueList[0].cssText, '1px');
}, 'getAll on Computed StyleMap of pseudo element returns list of correct styles');
</script>
......@@ -13,7 +13,7 @@ test(function() {
var result = computedStyleMap.get('width');
assert_true(result instanceof CSSSimpleLength);
assert_equals(result.cssString, '10px');
assert_equals(result.cssText, '10px');
}, "Getting a 10px width results in a CSSSimpleLength");
test(function() {
......@@ -21,7 +21,7 @@ test(function() {
var result = computedStyleMap.getAll('width');
assert_equals(result.length, 1);
assert_equals(result[0].cssString, '20px');
assert_equals(result[0].cssText, '20px');
}, "getAll for width returns a single value");
</script>
......@@ -50,10 +50,10 @@ test(function() {
}, 'Test turn conversions');
test(function() {
assert_equals((new CSSAngleValue(100, 'deg')).cssString, '100deg');
assert_equals((new CSSAngleValue(200, 'rad')).cssString, '200rad');
assert_equals((new CSSAngleValue(300, 'grad')).cssString, '300grad');
assert_equals((new CSSAngleValue(400, 'turn')).cssString, '400turn');
}, 'Test cssString');
assert_equals((new CSSAngleValue(100, 'deg')).cssText, '100deg');
assert_equals((new CSSAngleValue(200, 'rad')).cssText, '200rad');
assert_equals((new CSSAngleValue(300, 'grad')).cssText, '300grad');
assert_equals((new CSSAngleValue(400, 'turn')).cssText, '400turn');
}, 'Test cssText');
</script>
......@@ -55,17 +55,17 @@ test(function() {
test(function() {
var values = [
{input: new CSSCalcLength({px: 1}), cssString: 'calc(1px)'},
{input: new CSSCalcLength({px: -1}), cssString: 'calc(-1px)'},
{input: new CSSCalcLength({px: 1, percent: 15.6}), cssString: 'calc(15.6% + 1px)'},
{input: new CSSCalcLength({px: 1, percent: -15.6}), cssString: 'calc(-15.6% + 1px)'},
{input: new CSSCalcLength({px: -1, percent: -15.6}), cssString: 'calc(-15.6% - 1px)'},
{input: new CSSCalcLength({px: -1, percent: -15.6, vw: 5}), cssString: 'calc((-15.6% - 1px) + 5vw)'},
{input: new CSSCalcLength({px: -1, percent: -15.6, vw: -5}), cssString: 'calc((-15.6% - 1px) - 5vw)'},
{input: new CSSCalcLength({px: 1}), cssText: 'calc(1px)'},
{input: new CSSCalcLength({px: -1}), cssText: 'calc(-1px)'},
{input: new CSSCalcLength({px: 1, percent: 15.6}), cssText: 'calc(15.6% + 1px)'},
{input: new CSSCalcLength({px: 1, percent: -15.6}), cssText: 'calc(-15.6% + 1px)'},
{input: new CSSCalcLength({px: -1, percent: -15.6}), cssText: 'calc(-15.6% - 1px)'},
{input: new CSSCalcLength({px: -1, percent: -15.6, vw: 5}), cssText: 'calc((-15.6% - 1px) + 5vw)'},
{input: new CSSCalcLength({px: -1, percent: -15.6, vw: -5}), cssText: 'calc((-15.6% - 1px) - 5vw)'},
];
for (var i = 0; i < values.length; ++i) {
assert_equals(values[i].input.cssString, values[i].cssString);
assert_equals(values[i].input.cssText, values[i].cssText);
}
}, 'Test that the CSS string method for a CSSCalcLength produces the correct result');
......
......@@ -8,12 +8,12 @@ test(function() {
}, "Constructor should throw an error if given an empty string");
test(function() {
assert_equals(new CSSKeywordValue('initial').cssString, 'initial');
assert_equals(new CSSKeywordValue('center').cssString, 'center');
assert_equals(new CSSKeywordValue('customLemon').cssString, 'customLemon');
assert_equals(new CSSKeywordValue(' Hello World').cssString, CSS.escape(' Hello World'));
assert_equals(new CSSKeywordValue('3').cssString, CSS.escape('3'));
}, 'cssString returns a string with a format similar to CSS.escape. This test also ' +
assert_equals(new CSSKeywordValue('initial').cssText, 'initial');
assert_equals(new CSSKeywordValue('center').cssText, 'center');
assert_equals(new CSSKeywordValue('customLemon').cssText, 'customLemon');
assert_equals(new CSSKeywordValue(' Hello World').cssText, CSS.escape(' Hello World'));
assert_equals(new CSSKeywordValue('3').cssText, CSS.escape('3'));
}, 'cssText returns a string with a format similar to CSS.escape. This test also ' +
'implies that toCSSValue supports all keywords including custom identifiers');
test(function() {
......
......@@ -6,28 +6,28 @@
var values = [
{input: new CSSMatrix(0, 0, 0, 0, 0, 0),
a: 0, b: 0, c: 0, d: 0, e: 0, f: 0,
is2DComponent: true, cssString: "matrix(0, 0, 0, 0, 0, 0)"},
is2DComponent: true, cssText: "matrix(0, 0, 0, 0, 0, 0)"},
{input: new CSSMatrix(2, 4, 6, 8, 10, 12),
a: 2, b: 4, c: 6, d: 8, e: 10, f: 12,
is2DComponent: true, cssString: "matrix(2, 4, 6, 8, 10, 12)"},
is2DComponent: true, cssText: "matrix(2, 4, 6, 8, 10, 12)"},
{input: new CSSMatrix(-2, -4, -6, -8, -10, -12),
a: -2, b: -4, c: -6, d: -8, e: -10, f: -12,
is2DComponent: true, cssString: "matrix(-2, -4, -6, -8, -10, -12)"},
is2DComponent: true, cssText: "matrix(-2, -4, -6, -8, -10, -12)"},
{input: new CSSMatrix(1.1, -2.2, 3.3, -4.4, 5.5, 0.6),
a: 1.1, b: -2.2, c: 3.3, d: -4.4, e: 5.5, f: 0.6,
is2DComponent: true, cssString: "matrix(1.1, -2.2, 3.3, -4.4, 5.5, 0.6)"},
is2DComponent: true, cssText: "matrix(1.1, -2.2, 3.3, -4.4, 5.5, 0.6)"},
{input: new CSSMatrix(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0),
m11: 0, m12: 0, m13: 0, m14: 0, m21: 0, m22: 0, m23: 0, m24: 0,
m31: 0, m32: 0, m33: 0, m34: 0, m41: 0, m42: 0, m43: 0, m44: 0,
is2DComponent: false, cssString: "matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)"},
is2DComponent: false, cssText: "matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)"},
{input: new CSSMatrix(11, 12, 13, 14, 21, 22, 23, 24, 31, 32, 33, 34, 41, 42, 43, 44),
m11: 11, m12: 12, m13: 13, m14: 14, m21: 21, m22: 22, m23: 23, m24: 24,
m31: 31, m32: 32, m33: 33, m34: 34, m41: 41, m42: 42, m43: 43, m44: 44,
is2DComponent: false, cssString: "matrix3d(11, 12, 13, 14, 21, 22, 23, 24, 31, 32, 33, 34, 41, 42, 43, 44)"},
is2DComponent: false, cssText: "matrix3d(11, 12, 13, 14, 21, 22, 23, 24, 31, 32, 33, 34, 41, 42, 43, 44)"},
{input: new CSSMatrix(1.1, 1.2, -13, -1.4, 2, 0, -2, 4, 3.1, 3, 3, 3.4, -4.1, 42, 43, 4.4),
m11: 1.1, m12: 1.2, m13: -13, m14: -1.4, m21: 2, m22: 0, m23: -2, m24: 4,
m31: 3.1, m32: 3, m33: 3, m34: 3.4, m41: -4.1, m42: 42, m43: 43, m44: 4.4,
is2DComponent: false, cssString: "matrix3d(1.1, 1.2, -13, -1.4, 2, 0, -2, 4, 3.1, 3, 3, 3.4, -4.1, 42, 43, 4.4)"}
is2DComponent: false, cssText: "matrix3d(1.1, 1.2, -13, -1.4, 2, 0, -2, 4, 3.1, 3, 3, 3.4, -4.1, 42, 43, 4.4)"}
];
var attributeValues2D = ["a", "b", "c", "d", "e", "f"];
......@@ -52,9 +52,9 @@ test(function() {
test(function() {
for (var i = 0; i < values.length; ++i) {
assert_equals(values[i].input.cssString, values[i].cssString);
assert_equals(values[i].input.cssText, values[i].cssText);
}
}, "Test that the cssString for CSSMatrix is correct.");
}, "Test that the cssText for CSSMatrix is correct.");
test(function() {
assert_throws(null, function() { new CSSMatrix(); });
......@@ -73,7 +73,7 @@ test(function() {
assert_equals(inputAsMatrix[attribute], values[i].input[attribute]);
}
assert_equals(inputAsMatrix.is2DComponent(), values[i].input.is2DComponent());
assert_equals(inputAsMatrix.cssString, values[i].input.cssString);
assert_equals(inputAsMatrix.cssText, values[i].input.cssText);
}
}, "Test that asMatrix has all the same properties as the original CSSMatrix.");
......
......@@ -4,15 +4,15 @@
<script>
var values = [
{input: new CSSNumberValue(0), cssString: '0'},
{input: new CSSNumberValue(1), cssString: '1'},
{input: new CSSNumberValue(-2), cssString: '-2'},
{input: new CSSNumberValue(3.4), cssString: '3.4'}
{input: new CSSNumberValue(0), cssText: '0'},
{input: new CSSNumberValue(1), cssText: '1'},
{input: new CSSNumberValue(-2), cssText: '-2'},
{input: new CSSNumberValue(3.4), cssText: '3.4'}
];
test(function() {
for (var i = 0; i < values.length; ++i) {
assert_equals(values[i].input.cssString, values[i].cssString);
assert_equals(values[i].input.cssText, values[i].cssText);
}
}, "Test that the css string for CSSNumberValue is correct.");
......
......@@ -20,9 +20,9 @@ test(function() {
var perspectiveTransformSimple = new CSSPerspective(simpleLength);
var perspectiveTransformCalc = new CSSPerspective(calcLength);
assert_equals(perspectiveTransformSimple.cssString, 'perspective(10px)');
assert_equals(perspectiveTransformCalc.cssString,'perspective(calc(3.2em + 10px))');
}, "cssString should return a string of form perspective(<CSSLengthValue.cssString()>)");
assert_equals(perspectiveTransformSimple.cssText, 'perspective(10px)');
assert_equals(perspectiveTransformCalc.cssText,'perspective(calc(3.2em + 10px))');
}, "cssText should return a string of form perspective(<CSSLengthValue.cssString()>)");
</script>
......
......@@ -6,14 +6,14 @@
test(function() {
assert_equals(new CSSPositionValue(new CSSSimpleLength(50, 'px'),
new CSSCalcLength({px: -10, em: -3.2, pt: 0})).cssString, '50px calc((-3.2em - 10px) + 0pt)');
new CSSCalcLength({px: -10, em: -3.2, pt: 0})).cssText, '50px calc((-3.2em - 10px) + 0pt)');
assert_equals(new CSSPositionValue(new CSSSimpleLength(50, 'px'),
new CSSSimpleLength(2, 'em')).cssString, '50px 2em');
new CSSSimpleLength(2, 'em')).cssText, '50px 2em');
assert_equals(new CSSPositionValue(new CSSCalcLength({px: -10, em: -3.2, pt: 0}),
new CSSCalcLength({px: -10, em: 3.2})).cssString, 'calc((-3.2em - 10px) + 0pt) calc(3.2em - 10px)');
new CSSCalcLength({px: -10, em: 3.2})).cssText, 'calc((-3.2em - 10px) + 0pt) calc(3.2em - 10px)');
assert_equals(new CSSPositionValue(new CSSCalcLength({px: -10, em: -3.2, pt: 0}),
new CSSSimpleLength(10, 'percent')).cssString, 'calc((-3.2em - 10px) + 0pt) 10%');
}, "cssString returns a string with the x and y positions cssStrings separated by a space");
new CSSSimpleLength(10, 'percent')).cssText, 'calc((-3.2em - 10px) + 0pt) 10%');
}, "cssText returns a string with the x and y positions cssStrings separated by a space");
</script>
......
......@@ -6,36 +6,36 @@
var EPSILON = 1e-6; // float epsilon
var values = [
{input: new CSSRotation(0), angle: 0, x: 0, y: 0, z: 1,
is2DComponent: true, cssString: "rotate(0deg)",
is2DComponent: true, cssText: "rotate(0deg)",
asMatrix: new CSSMatrix(1, 0, 0, 1, 0, 0)},
{input: new CSSRotation(10), angle: 10, x: 0, y: 0, z: 1,
is2DComponent: true, cssString: "rotate(10deg)",
is2DComponent: true, cssText: "rotate(10deg)",
asMatrix: new CSSMatrix(0.9848077, 0.1736481, -0.1736481, 0.9848077, 0, 0)},
{input: new CSSRotation(new CSSAngleValue(10, 'deg')), angle: 10, x: 0, y: 0, z: 1,
is2DComponent: true, cssString: "rotate(10deg)",
is2DComponent: true, cssText: "rotate(10deg)",
asMatrix: new CSSMatrix(0.9848077, 0.1736481, -0.1736481, 0.9848077, 0, 0)},
{input: new CSSRotation(-21), angle: -21, x: 0, y: 0, z: 1,
is2DComponent: true, cssString: "rotate(-21deg)",
is2DComponent: true, cssText: "rotate(-21deg)",
asMatrix: new CSSMatrix(0.9335804, -0.3583679, 0.3583679, 0.9335804, 0, 0)},
{input: new CSSRotation(3.2), angle: 3.2, x: 0, y: 0, z: 1,
is2DComponent: true, cssString: "rotate(3.2deg)",
is2DComponent: true, cssText: "rotate(3.2deg)",
asMatrix: new CSSMatrix(0.9984407, 0.0558215, -0.0558215, 0.9984407, 0, 0)},
{input: new CSSRotation(0, 0, 1, 90), angle: 90, x: 0, y: 0, z: 1,
is2DComponent: false, cssString: "rotate3d(0, 0, 1, 90deg)",
is2DComponent: false, cssText: "rotate3d(0, 0, 1, 90deg)",
asMatrix: new CSSMatrix(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)},
{input: new CSSRotation(2.7, -3, 4.4, 0), angle: 0, x: 2.7, y: -3, z: 4.4,
is2DComponent: false, cssString: "rotate3d(2.7, -3, 4.4, 0deg)",
is2DComponent: false, cssText: "rotate3d(2.7, -3, 4.4, 0deg)",
asMatrix: new CSSMatrix(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)},
{input: new CSSRotation(2, 3, 4, 10), angle: 10, x: 2, y: 3, z: 4,
is2DComponent: false, cssString: "rotate3d(2, 3, 4, 10deg)",
is2DComponent: false, cssText: "rotate3d(2, 3, 4, 10deg)",
asMatrix: new CSSMatrix(0.9869032, 0.1321258, -0.0925460, 0, -0.1258394,
0.9895225, 0.0707777, 0, 0.1009279, -0.0582048, 0.9931896, 0, 0, 0, 0, 1)},
{input: new CSSRotation(2, 3.7, -4, -1.2), angle: -1.2, x: 2, y: 3.7, z: -4,
is2DComponent: false, cssString: "rotate3d(2, 3.7, -4, -1.2deg)",
is2DComponent: false, cssText: "rotate3d(2, 3.7, -4, -1.2deg)",
asMatrix: new CSSMatrix(0.9998067, 0.01448049, 0.0132978, 0, -0.0143841,
0.9998698, -0.0073125, 0, -0.0134019, 0.0071198, 0.9998848, 0, 0, 0, 0, 1)},
{input: new CSSRotation(1, 0, 0, new CSSAngleValue(0.5, 'turn')), angle: 180, x: 1, y: 0, z: 0,
is2DComponent: false, cssString: "rotate3d(1, 0, 0, 180deg)",
is2DComponent: false, cssText: "rotate3d(1, 0, 0, 180deg)",
asMatrix: new CSSMatrix(1, 0, 0, 0, 0, -1, 1.2246467991473532e-16, 0, 0,
-1.2246467991473532e-16, -1, 0, 0, 0, 0, 1)}
];
......@@ -57,9 +57,9 @@ test(function() {
test(function() {
for (var i = 0; i < values.length; ++i) {
assert_equals(values[i].input.cssString, values[i].cssString);
assert_equals(values[i].input.cssText, values[i].cssText);
}
}, "Test that cssString values for CSSRotation is correct.");
}, "Test that cssText values for CSSRotation is correct.");
test(function() {
for (var i = 0; i < values.length; ++i) {
......@@ -70,10 +70,10 @@ test(function() {
for (var attribute in expectedMatrix) {
if (typeof expectedMatrix[attribute] === "number") {
assert_approx_equals(inputAsMatrix[attribute], expectedMatrix[attribute], EPSILON);
} else if (attribute != "cssString") {
} else if (attribute != "cssText") {
// Due to the complex trigonometric calculations required for a CSSRotation matrix,
// the 6 significant figures of each value in the cssString might be different.
// Hence, do not check cssString.
// the 6 significant figures of each value in the cssText might be different.
// Hence, do not check cssText.
assert_equals(inputAsMatrix[attribute], expectedMatrix[attribute]);
}
}
......
......@@ -6,19 +6,19 @@
var EPSILON = 1e-6; // float epsilon
var values = [
{input: new CSSScale(0, 0), x: 0, y: 0, z: 1, is2DComponent: true,
cssString: "scale(0, 0)"},
cssText: "scale(0, 0)"},
{input: new CSSScale(1, 2), x: 1, y: 2, z: 1, is2DComponent: true,
cssString: "scale(1, 2)"},
cssText: "scale(1, 2)"},
{input: new CSSScale(-2, -4), x: -2, y: -4, z: 1, is2DComponent: true,
cssString: "scale(-2, -4)"},
cssText: "scale(-2, -4)"},
{input: new CSSScale(3.4, 2.7), x: 3.4, y: 2.7, z: 1, is2DComponent: true,
cssString: "scale(3.4, 2.7)"},
cssText: "scale(3.4, 2.7)"},
{input: new CSSScale(0, 0, 0), x: 0, y: 0, z: 0, is2DComponent: false,
cssString: "scale3d(0, 0, 0)"},
cssText: "scale3d(0, 0, 0)"},
{input: new CSSScale(1, 2, 3), x: 1, y: 2, z: 3, is2DComponent: false,
cssString: "scale3d(1, 2, 3)"},
cssText: "scale3d(1, 2, 3)"},
{input: new CSSScale(3.5, -2.7, -2), x: 3.5, y: -2.7, z: -2, is2DComponent: false,
cssString: "scale3d(3.5, -2.7, -2)"}
cssText: "scale3d(3.5, -2.7, -2)"}
];
test(function() {
......@@ -37,9 +37,9 @@ test(function() {
test(function() {
for (var i = 0; i < values.length; ++i) {
assert_equals(values[i].input.cssString, values[i].cssString);
assert_equals(values[i].input.cssText, values[i].cssText);
}
}, "Test that the cssString for CSSScale is correct.");
}, "Test that the cssText for CSSScale is correct.");
test(function() {
assert_throws(null, () => { new CSSScale(); });
......
......@@ -74,43 +74,43 @@ test(function() {
test(function() {
var values = [
{input: new CSSSimpleLength(1, 'px'), cssString: '1px' },
{input: new CSSSimpleLength(2, 'percent'), cssString: '2%' },
{input: new CSSSimpleLength(3, '%'), cssString: '3%' },
{input: new CSSSimpleLength(4, 'em'), cssString: '4em' },
{input: new CSSSimpleLength(5, 'ex'), cssString: '5ex' },
{input: new CSSSimpleLength(6, 'ch'), cssString: '6ch' },
{input: new CSSSimpleLength(7, 'rem'), cssString: '7rem' },
{input: new CSSSimpleLength(8, 'vw'), cssString: '8vw' },
{input: new CSSSimpleLength(9, 'vh'), cssString: '9vh' },
{input: new CSSSimpleLength(10, 'vmin'), cssString: '10vmin' },
{input: new CSSSimpleLength(11, 'vmax'), cssString: '11vmax' },
{input: new CSSSimpleLength(12, 'cm'), cssString: '12cm' },
{input: new CSSSimpleLength(13, 'mm'), cssString: '13mm' },
{input: new CSSSimpleLength(14, 'in'), cssString: '14in' },
{input: new CSSSimpleLength(15, 'pc'), cssString: '15pc' },
{input: new CSSSimpleLength(16, 'pt'), cssString: '16pt' },
{input: new CSSSimpleLength(1, 'px'), cssText: '1px' },
{input: new CSSSimpleLength(2, 'percent'), cssText: '2%' },
{input: new CSSSimpleLength(3, '%'), cssText: '3%' },
{input: new CSSSimpleLength(4, 'em'), cssText: '4em' },
{input: new CSSSimpleLength(5, 'ex'), cssText: '5ex' },
{input: new CSSSimpleLength(6, 'ch'), cssText: '6ch' },
{input: new CSSSimpleLength(7, 'rem'), cssText: '7rem' },
{input: new CSSSimpleLength(8, 'vw'), cssText: '8vw' },
{input: new CSSSimpleLength(9, 'vh'), cssText: '9vh' },
{input: new CSSSimpleLength(10, 'vmin'), cssText: '10vmin' },
{input: new CSSSimpleLength(11, 'vmax'), cssText: '11vmax' },
{input: new CSSSimpleLength(12, 'cm'), cssText: '12cm' },
{input: new CSSSimpleLength(13, 'mm'), cssText: '13mm' },
{input: new CSSSimpleLength(14, 'in'), cssText: '14in' },
{input: new CSSSimpleLength(15, 'pc'), cssText: '15pc' },
{input: new CSSSimpleLength(16, 'pt'), cssText: '16pt' },
// Same again to double check that it's case insensitive.
{input: new CSSSimpleLength(1, 'PX'), cssString: '1px' },
{input: new CSSSimpleLength(2, 'PERCENT'), cssString: '2%' },
{input: new CSSSimpleLength(3, '%'), cssString: '3%' },
{input: new CSSSimpleLength(4, 'EM'), cssString: '4em' },
{input: new CSSSimpleLength(5, 'EX'), cssString: '5ex' },
{input: new CSSSimpleLength(6, 'CH'), cssString: '6ch' },
{input: new CSSSimpleLength(7, 'REM'), cssString: '7rem' },
{input: new CSSSimpleLength(8, 'VW'), cssString: '8vw' },
{input: new CSSSimpleLength(9, 'VH'), cssString: '9vh' },
{input: new CSSSimpleLength(10, 'VMIN'), cssString: '10vmin' },
{input: new CSSSimpleLength(11, 'VMAX'), cssString: '11vmax' },
{input: new CSSSimpleLength(12, 'CM'), cssString: '12cm' },
{input: new CSSSimpleLength(13, 'MM'), cssString: '13mm' },
{input: new CSSSimpleLength(14, 'IN'), cssString: '14in' },
{input: new CSSSimpleLength(15, 'PC'), cssString: '15pc' },
{input: new CSSSimpleLength(16, 'PT'), cssString: '16pt' },
{input: new CSSSimpleLength(1, 'PX'), cssText: '1px' },
{input: new CSSSimpleLength(2, 'PERCENT'), cssText: '2%' },
{input: new CSSSimpleLength(3, '%'), cssText: '3%' },
{input: new CSSSimpleLength(4, 'EM'), cssText: '4em' },
{input: new CSSSimpleLength(5, 'EX'), cssText: '5ex' },
{input: new CSSSimpleLength(6, 'CH'), cssText: '6ch' },
{input: new CSSSimpleLength(7, 'REM'), cssText: '7rem' },
{input: new CSSSimpleLength(8, 'VW'), cssText: '8vw' },
{input: new CSSSimpleLength(9, 'VH'), cssText: '9vh' },
{input: new CSSSimpleLength(10, 'VMIN'), cssText: '10vmin' },
{input: new CSSSimpleLength(11, 'VMAX'), cssText: '11vmax' },
{input: new CSSSimpleLength(12, 'CM'), cssText: '12cm' },
{input: new CSSSimpleLength(13, 'MM'), cssText: '13mm' },
{input: new CSSSimpleLength(14, 'IN'), cssText: '14in' },
{input: new CSSSimpleLength(15, 'PC'), cssText: '15pc' },
{input: new CSSSimpleLength(16, 'PT'), cssText: '16pt' },
];
for (var i = 0; i < values.length; ++i) {
assert_equals(values[i].input.cssString, values[i].cssString);
assert_equals(values[i].input.cssText, values[i].cssText);
}
}, 'Test that the CSSSimpleLength css string is generated correctly for each unit type.');
......
......@@ -5,10 +5,10 @@
<script>
var EPSILON = 1e-6; // float epsilon
var values = [
{input: new CSSSkew(0, 0), ax: 0, ay: 0, cssString: "skew(0, 0)"},
{input: new CSSSkew(1, 2), ax: 1, ay: 2, cssString: "skew(1, 2)"},
{input: new CSSSkew(-2, -4), ax: -2, ay: -4, cssString: "skew(-2, -4)"},
{input: new CSSSkew(3.4, 2.7), ax: 3.4, ay: 2.7, cssString: "skew(3.4, 2.7)"}
{input: new CSSSkew(0, 0), ax: 0, ay: 0, cssText: "skew(0, 0)"},
{input: new CSSSkew(1, 2), ax: 1, ay: 2, cssText: "skew(1, 2)"},
{input: new CSSSkew(-2, -4), ax: -2, ay: -4, cssText: "skew(-2, -4)"},
{input: new CSSSkew(3.4, 2.7), ax: 3.4, ay: 2.7, cssText: "skew(3.4, 2.7)"}
];
test(function() {
......@@ -26,9 +26,9 @@ test(function() {
test(function() {
for (var i = 0; i < values.length; ++i) {
assert_equals(values[i].input.cssString, values[i].cssString);
assert_equals(values[i].input.cssText, values[i].cssText);
}
}, "Test that the cssString for CSSSkew is correct.");
}, "Test that the cssText for CSSSkew is correct.");
test(function() {
assert_throws(null, function() { new CSSSkew(); });
......
......@@ -52,12 +52,12 @@ var values = [
];
function expectedCssString(obj) {
var cssString = obj.is2DComponent ? "translate(" : "translate3d(";
cssString += obj.x.cssString + ", " + obj.y.cssString;
var cssText = obj.is2DComponent ? "translate(" : "translate3d(";
cssText += obj.x.cssText + ", " + obj.y.cssText;
if (!obj.is2DComponent)
cssString += ", " + obj.z.cssString;
cssString += ")";
return cssString;
cssText += ", " + obj.z.cssText;
cssText += ")";
return cssText;
}
test(function() {
......@@ -79,9 +79,9 @@ test(function() {
test(function() {
for (var i = 0; i < values.length; ++i) {
assert_equals(values[i].input.cssString, expectedCssString(values[i]));
assert_equals(values[i].input.cssText, expectedCssString(values[i]));
}
}, "Test that cssString values for CSSTranslation is correct.");
}, "Test that cssText values for CSSTranslation is correct.");
test(function() {
assert_throws(null, function() { new CSSTranslation(simpleLength, simpleLength, simplePercent); });
......