geometry-interfaces-dom-rect.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/fast/dom/geometry-interfaces-dom-rect.html
