| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| |
| <title>Geometry Interfaces: DOMRect</title> |
| <link rel="help" href="https://drafts.fxtf.org/geometry/#domrect"> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="./resources/geometry-interfaces-test-helpers.js"></script> |
| <script> |
| 'use strict'; |
| |
| test(() => { |
| var rect = new DOMRect(); |
| assert_dom_rect_equals(rect, [0, 0, 0, 0, 0, 0, 0, 0]); |
| }, 'DOMRect constructor without parameter'); |
| |
| test(() => { |
| var rect = new DOMRect(10); |
| assert_dom_rect_equals(rect, [10, 0, 0, 0, 0, 10, 0, 10]); |
| }, 'DOMRect constructor with x parameter'); |
| |
| test(() => { |
| var rect = new DOMRect(10, 20); |
| assert_dom_rect_equals(rect, [10, 20, 0, 0, 20, 10, 20, 10]); |
| }, 'DOMRect constructor with x, y parameters'); |
| |
| test(() => { |
| var rect = new DOMRect(10, 20, 80); |
| assert_dom_rect_equals(rect, [10, 20, 80, 0, 20, 90, 20, 10]); |
| }, 'DOMRect constructor with x, y, width parameters'); |
| |
| test(() => { |
| var rect = new DOMRect(10, 20, 80, 50); |
| assert_dom_rect_equals(rect, [10, 20, 80, 50, 20, 90, 70, 10]); |
| }, 'DOMRect constructor with x, y, width, height parameters'); |
| |
| test(() => { |
| var rect = new DOMRect(10, 20, -80, -50); |
| assert_dom_rect_equals(rect, [10, 20, -80, -50, -30, 10, 20, -70]); |
| }, 'DOMRect constructor with negative width and height parameters'); |
| |
| test(() => { |
| var rect = new DOMRect(10, 20, 80, 50); |
| assert_object_equals(rect.toJSON(), {x: 10, y: 20, width: 80, height: 50, top: 20, right: 90, bottom: 70, left: 10}); |
| }, 'DOMRect toJSON'); |
| |
| test(() => { |
| var rect = new DOMRect(10, 20, 80, 50); |
| rect.x = 30; |
| assert_dom_rect_equals(rect, [30, 20, 80, 50, 20, 110, 70, 30]); |
| rect.y = -10; |
| assert_dom_rect_equals(rect, [30, -10, 80, 50, -10, 110, 40, 30]); |
| rect.width = 20; |
| assert_dom_rect_equals(rect, [30, -10, 20, 50, -10, 50, 40, 30]); |
| rect.height = 40; |
| assert_dom_rect_equals(rect, [30, -10, 20, 40, -10, 50, 30, 30]); |
| }, 'DOMRect setter'); |
| |
| test(() => { |
| var rect = DOMRect.fromRect({x: 10, y: 20, width: 80, height: 50}); |
| assert_dom_rect_equals(rect, [10, 20, 80, 50, 20, 90, 70, 10]); |
| }, 'DOMRect.fromRect({x: 10, y: 20, width: 80, height: 50}) should create a DOMRect'); |
| |
| test(() => { |
| var rect = DOMRect.fromRect(); |
| assert_dom_rect_equals(rect, [0, 0, 0, 0, 0, 0, 0, 0]); |
| }, 'DOMRect.fromRect({x: 0, y: 0, width: 0, height: 0}) should create a DOMRect'); |
| |
| test(() => { |
| var rect = DOMRect.fromRect({x: 10, y: 20, width: 80, height: 50}); |
| rect.x = 30; |
| assert_dom_rect_equals(rect, [30, 20, 80, 50, 20, 110, 70, 30]); |
| rect.y = -10; |
| assert_dom_rect_equals(rect, [30, -10, 80, 50, -10, 110, 40, 30]); |
| rect.width = 20; |
| assert_dom_rect_equals(rect, [30, -10, 20, 50, -10, 50, 40, 30]); |
| rect.height = 40; |
| assert_dom_rect_equals(rect, [30, -10, 20, 40, -10, 50, 30, 30]); |
| }, 'DOMRect.fromRect({x: 10, y: 20, width: 80, height: 50}) should create a DOMRect and the values can be changed'); |
| |
| test(() => { |
| var rect1 = DOMRect.fromRect(); |
| var rect2 = DOMRect.fromRect(); |
| assert_false(rect1 == rect2); |
| assert_dom_rect_equals(rect1, rect2); |
| }, 'DOMRect.fromRect() should create a new DOMRect'); |
| |
| test(() => { |
| var rect = new DOMRectReadOnly(); |
| assert_dom_rect_equals(rect, [0, 0, 0, 0, 0, 0, 0, 0]); |
| }, 'DOMRectReadOnly constructor without parameter'); |
| |
| test(() => { |
| var rect = new DOMRectReadOnly(10); |
| assert_dom_rect_equals(rect, [10, 0, 0, 0, 0, 10, 0, 10]); |
| }, 'DOMRectReadOnly constructor with x parameter'); |
| |
| test(() => { |
| var rect = new DOMRectReadOnly(10, 20); |
| assert_dom_rect_equals(rect, [10, 20, 0, 0, 20, 10, 20, 10]); |
| }, 'DOMRectReadOnly constructor with x, y parameters'); |
| |
| test(() => { |
| var rect = new DOMRectReadOnly(10, 20, 80); |
| assert_dom_rect_equals(rect, [10, 20, 80, 0, 20, 90, 20, 10]); |
| }, 'DOMRectReadOnly constructor with x, y, width parameters'); |
| |
| test(() => { |
| var rect = new DOMRectReadOnly(10, 20, 80, 50); |
| assert_dom_rect_equals(rect, [10, 20, 80, 50, 20, 90, 70, 10]); |
| }, 'DOMRectReadOnly constructor with x, y, width, height parameters'); |
| |
| test(() => { |
| var rect = new DOMRectReadOnly(10, 20, 80, 50); |
| assert_readonly(rect, 'x'); |
| assert_readonly(rect, 'y'); |
| assert_readonly(rect, 'width'); |
| assert_readonly(rect, 'height'); |
| }, 'DOMRectReadOnly readonly test'); |
| |
| test(() => { |
| var rect = new DOMRectReadOnly(10, 20, 80, 50); |
| assert_object_equals(rect.toJSON(), {x: 10, y: 20, width: 80, height: 50, top: 20, right: 90, bottom: 70, left: 10}); |
| }, 'DOMRectReadOnly toJSON'); |
| |
| test(() => { |
| var rect = DOMRectReadOnly.fromRect({x: 10, y: 20, width: 80, height: 50}); |
| assert_dom_rect_equals(rect, [10, 20, 80, 50, 20, 90, 70, 10]); |
| }, 'DOMRectReadOnly.fromRect({x: 10, y: 20, width: 80, height: 50}) should create a DOMRectReadOnly'); |
| |
| test(() => { |
| var rect = DOMRectReadOnly.fromRect(); |
| assert_dom_rect_equals(rect, [0, 0, 0, 0, 0, 0, 0, 0]); |
| }, 'DOMRectReadOnly.fromRect({x: 0, y: 0, width: 0, height: 0}) should create a DOMRectReadOnly'); |
| |
| test(() => { |
| var rect1 = DOMRectReadOnly.fromRect(); |
| var rect2 = DOMRectReadOnly.fromRect(); |
| assert_false(rect1 == rect2); |
| assert_dom_rect_equals(rect1, rect2); |
| }, 'DOMRectReadOnly.fromRect() should create a new DOMRectReadOnly'); |
| |
| test(() => { |
| var rect = DOMRectReadOnly.fromRect(); |
| assert_readonly(rect, 'x'); |
| assert_readonly(rect, 'y'); |
| assert_readonly(rect, 'width'); |
| assert_readonly(rect, 'height'); |
| }, "DOMRectReadOnly.fromRect() should create DOMRectReadOnly"); |
| |
| </script> |
