blob: 47dc05dbec6a77584c56826922830d7ce32dbfe8 [file] [log] [blame]
<!doctype html>
<meta charset="utf-8">
<title>CSSTransformValue tests</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#transformvalue-objects">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/testhelper.js"></script>
<script src="../resources/comparisons.js"></script>
<script>
'use strict';
test(() => {
assert_throws(new TypeError(), () => new CSSTransformValue());
assert_throws(new TypeError(), () => new CSSTransformValue([]));
}, 'Constructing a CSSTransformValue with no components throws TypeError');
test(() => {
const values = [
new CSSScale(1, 1),
new CSSTranslate(CSS.px(1), CSS.px(1)),
new CSSRotate(CSS.deg(90))
];
const transform = new CSSTransformValue(values);
assert_style_value_array_equals(transform, values);
}, 'CSSTransformValue can be constructed with multiple transforms');
test(() => {
const values = [
new CSSScale(1, 1),
new CSSTranslate(CSS.px(1), CSS.px(1)),
new CSSRotate(CSS.deg(90))
];
const transform = new CSSTransformValue(values);
assert_style_value_array_equals(transform, values);
values.pop();
var new_value = new CSSRotate(CSS.deg(45));
values[2] = new_value;
transform[2] = new_value;
assert_style_value_array_equals(transform, values);
}, 'CSSTransformValue.set correctly sets the CSSTransformComponent at the given index');
test(() => {
const values = [
new CSSScale(1, 1),
new CSSTranslate(CSS.px(1), CSS.px(1)),
new CSSRotate(CSS.deg(90))
];
const transform = new CSSTransformValue(values);
assert_style_value_array_equals(transform, values);
var new_value = new CSSRotate(CSS.deg(45));
values[3] = new_value;
transform[3] = new_value;
assert_style_value_array_equals(transform, values);
}, 'Setting a component in CSSTransformValue correctly appends the CSSTransformComponent if index specified is greater than length');
test(() => {
const transform = new CSSTransformValue([
new CSSScale(1, 1),
new CSSTranslate(CSS.px(1), CSS.px(1), CSS.px(1)),
new CSSScale(1, 1)
]);
assert_equals(transform.is2D, false);
}, 'CSSTransformValue.is2D is false when given mix of 2D and 3D transforms');
test(() => {
const transform = new CSSTransformValue([
new CSSScale(1, 1),
new CSSTranslate(CSS.px(1), CSS.px(1)),
new CSSScale(1, 1)
]);
assert_equals(transform.is2D, true);
}, 'CSSTransformValue.is2D is true when given only 2D transforms');
test(() => {
let transform = new CSSTransformValue([new CSSScale(1, 2)]);
assert_throws(new TypeError(), () => transform.is2D = false);
assert_equals(transform.is2D, true);
}, 'CSSTransformValue.is2D is readonly');
test(() => {
const transformArray = [
new CSSScale(2, 2),
new CSSMatrixComponent(new DOMMatrixReadOnly([1, 1, 1, 1, 1, 1])),
new CSSScale(5, 6)
];
const transformValue = new CSSTransformValue(transformArray);
const newTransformArray = [...transformValue];
assert_style_value_array_equals([...transformValue], transformArray);
}, 'Can iterate through CSSTransformValue components');
</script>