diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/geometry/spec-examples.html | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/geometry/spec-examples.html')
| -rw-r--r-- | testing/web-platform/tests/css/geometry/spec-examples.html | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/geometry/spec-examples.html b/testing/web-platform/tests/css/geometry/spec-examples.html new file mode 100644 index 0000000000..61efa2a89b --- /dev/null +++ b/testing/web-platform/tests/css/geometry/spec-examples.html @@ -0,0 +1,92 @@ +<!doctype html> +<title>Geometry APIs spec examples</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<link rel=help href="https://drafts.fxtf.org/geometry/"> +<script> +test(() => { + var point = new DOMPoint(5, 4); + var matrix = new DOMMatrix([2, 0, 0, 2, 10, 10]); + var transformedPoint = point.matrixTransform(matrix); + // The point variable is set to a new DOMPoint object with x coordinate initialized to 5 and y + // coordinate initialized to 4. + assert_equals(point.x, 5, 'point.x'); + assert_equals(point.y, 4, 'point.y'); + assert_equals(point.z, 0, 'point.z'); + assert_equals(point.w, 1, 'point.w'); + // This new DOMPoint is now scaled and the translated by matrix. This resulting transformedPoint + // has the x coordinate 20 and y coordinate 18. + assert_equals(transformedPoint.x, 20, 'transformedPoint.x'); + assert_equals(transformedPoint.y, 18, 'transformedPoint.x'); + assert_equals(transformedPoint.z, 0, 'transformedPoint.z'); + assert_equals(transformedPoint.w, 1, 'transformedPoint.w'); +}, 'matrixTransform'); + +test(() => { + var point = new DOMPoint(2, 0); + var quad1 = new DOMQuad(point, {x: 12, y: 0}, {x: 12, y: 10}, {x: 2, y: 10}); + // The attribute values of the resulting DOMQuad quad1 above are also equivalent to the attribute + // values of the following DOMQuad quad2: + var rect = new DOMRect(2, 0, 10, 10); + var quad2 = DOMQuad.fromRect(rect); + for (var p of ['p1', 'p2', 'p3', 'p4']) { + for (var attr of ['x', 'y', 'z', 'w']) { + assert_equals(quad2[p][attr], quad1[p][attr], `${p}.${attr}`); + } + } +}, 'DOMQuad'); + +test(() => { + var quad = new DOMQuad({x: 40, y: 25}, {x: 180, y: 8}, {x: 210, y: 150}, {x: 10, y: 180}); + // <circle cx="40" cy="25" r="3" fill="rgb(204, 51, 51)"/> + assert_equals(quad.p1.x, 40, 'p1.x'); + assert_equals(quad.p1.y, 25, 'p1.y'); + // <circle cx="180" cy="8" r="3" fill="rgb(204, 51, 51)"/> + assert_equals(quad.p2.x, 180, 'p2.x'); + assert_equals(quad.p2.y, 8, 'p2.y'); + // <circle cx="210" cy="150" r="3" fill="rgb(204, 51, 51)"/> + assert_equals(quad.p3.x, 210, 'p3.x'); + assert_equals(quad.p3.y, 150, 'p3.y'); + // <circle cx="10" cy="180" r="3" fill="rgb(204, 51, 51)"/> + assert_equals(quad.p4.x, 10, 'p4.x'); + assert_equals(quad.p4.y, 180, 'p4.y'); + var bounds = quad.getBounds(); + // <rect x="10" y="8" width="200" height="172" fill="none" stroke="black" stroke-dasharray="3 2"/> + assert_equals(bounds.x, 10, 'bounds.x'); + assert_equals(bounds.y, 8, 'bounds.x'); + assert_equals(bounds.width, 200, 'bounds.width'); + assert_equals(bounds.height, 172, 'bounds.height'); +}, 'DOMQuad irregular'); + +test(() => { + // In this example, a matrix is created and several 2D transformation methods are called: + var matrix = new DOMMatrix(); + matrix.scaleSelf(2); + matrix.translateSelf(20,20); + assert_equals(matrix.toString(), "matrix(2, 0, 0, 2, 40, 40)"); +}, 'DOMMatrix 2D transformation'); + +test(() => { + // In the following example, a matrix is created and several 3D transformation methods are called: + var matrix = new DOMMatrix(); + matrix.scale3dSelf(2); + assert_equals(matrix.toString(), "matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)"); +}, 'DOMMatrix 3D transformation'); + +test(() => { + // This example will throw an exception because there are non-finite values in the matrix. + var matrix = new DOMMatrix([NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN]); + assert_throws_dom("InvalidStateError", () => { var string = matrix + " Batman!"; }); +}, 'DOMMatrix NaN'); + +test(() => { + var matrix = new DOMMatrix(); + matrix.translateSelf(20, 20); + matrix.scaleSelf(2); + matrix.translateSelf(-20, -20); + // is equivalent to: + var matrix2 = new DOMMatrix(); + matrix2.translateSelf(20, 20).scaleSelf(2).translateSelf(-20, -20); + assert_equals(matrix.toString(), matrix2.toString()); +}, 'DOMMatrix mutable'); +</script> |