spec: update default value for lastReportedSize (#135)

* chore: update dependencies

* chore: remove doc build

* spec: update to use -1 for lastReportedSize

* tests: align with spec update for lastReportedSize

* chore: update ci docker image

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 jobs:
  test:
  docker: # use the docker executor type; machine and macos executors are also supported
- - image: circleci/node:10
+ - image: cimg/node:16.14
  steps:
  - checkout
  - run:

package.json

@@ -12,7 +12,7 @@
  "build": "rm -rf lib && npm run build:esm && npm run build:umd",
  "build:esm": "tsc",
  "build:umd": "rollup -c",
- "build:docs": "rm -f docs/*.* && parcel build docs/src/index.html --out-dir docs --public-url ./",
+ "build:docs": "echo 'no longer building docs for this version'",
  "ci-tests": "npm test -- --ci --runInBand && cat coverage/lcov.info | coveralls",
  "test": "npm run lint && jest --coverage",
  "lint": "eslint '{src,test}/**/*.ts'",
@@ -50,20 +50,20 @@
  },
  "homepage": "https://juggle.studio/resize-observer/",
  "devDependencies": {
- "@types/jest": "^26.0.20",
- "@typescript-eslint/eslint-plugin": "^4.15.2",
- "@typescript-eslint/parser": "^4.15.2",
- "core-js": "^3.9.0",
- "coveralls": "^3.1.0",
- "cssnano": "^4.1.10",
- "eslint": "^7.20.0",
- "jest": "^26.6.3",
- "jest-cli": "^26.6.3",
- "jest-junit": "^12.0.0",
- "jsdom": "^16.4.0",
- "parcel-bundler": "^1.12.4",
- "rollup": "^2.39.1",
- "ts-jest": "^26.5.2",
- "typescript": "^3.9.9"
+ "@types/jest": "^28.1.7",
+ "@typescript-eslint/eslint-plugin": "^5.33.1",
+ "@typescript-eslint/parser": "^5.33.1",
+ "core-js": "^3.24.1",
+ "coveralls": "^3.1.1",
+ "cssnano": "^5.1.13",
+ "eslint": "^8.22.0",
+ "jest": "^28.1.3",
+ "jest-cli": "^28.1.3",
+ "jest-environment-jsdom": "^28.1.3",
+ "jest-junit": "^14.0.0",
+ "jsdom": "^20.0.0",
+ "rollup": "^2.78.0",
+ "ts-jest": "^28.0.8",
+ "typescript": "^4.7.4"
  }
 }

src/ResizeObservation.ts

@@ -22,8 +22,8 @@ class ResizeObservation {
  this.target = target;
  this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX;
  this.lastReportedSize = {
- inlineSize: 0,
- blockSize: 0
+ inlineSize: -1,
+ blockSize: -1
  }
  }
 

test/inline-elements.test.ts

@@ -1,4 +1,3 @@
-import './helpers/mutation-observer';
 import { ResizeObserver } from '../src/ResizeObserver';
 import { delay } from './helpers/delay';
 import './helpers/offset';

test/queue-micro-task.test.ts

@@ -1,4 +1,3 @@
-import './helpers/mutation-observer';
 import { queueMicroTask } from '../src/utils/queueMicroTask';
 
 describe('queueMicroTask', (): void => {

test/resize-observer-basic-svg.test.ts

@@ -1,7 +1,5 @@
-import './helpers/mutation-observer';
 import { ResizeObserver } from '../src/ResizeObserver';
 import { DOMRectReadOnly } from '../src/DOMRectReadOnly';
-import { delay } from './helpers/delay';
 import './helpers/offset';
 
 describe('SVGGraphicsElement', (): void => {
@@ -29,15 +27,22 @@ describe('SVGGraphicsElement', (): void => {
  }
  })
 
- test('Observer should not fire initially when size is 0,0', (done): void => {
- ro = new ResizeObserver((): void => {
- expect(false).toBe(true); // Should not fire
+ test('Observer should fire initially when size is 0,0', (done): void => {
+ ro = new ResizeObserver((entries): void => {
+ expect(entries).toHaveLength(1);
+ expect(entries[0].target).toBe(el);
+ expect(entries[0].contentRect).toMatchObject({
+ top: 0,
+ left: 0,
+ width: 0,
+ height: 0
+ });
+ done();
  })
  el.getBBox = function (): DOMRect {
  return new DOMRectReadOnly(0, 0, 0, 0) as DOMRect;
  }
  ro.observe(el);
- delay(done);
  })
 
  test('Should fire observer when element is observed for the first time.', (done): void => {

test/resize-observer-basic.test.ts

@@ -1,4 +1,3 @@
-import './helpers/mutation-observer';
 import { ResizeObserver } from '../src/ResizeObserver';
 import { scheduler } from '../src/utils/scheduler';
 import { delay } from './helpers/delay';
@@ -99,28 +98,50 @@ describe('Basics', (): void => {
  expect(fn).toThrowError(`Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element`);
  })
 
- test('Observer should not fire initially when size is 0,0', (done): void => {
- ro = new ResizeObserver((): void => {
- expect(false).toBe(true); // Should not fire
+ test('Observer should fire initially when size is 0,0', (done): void => {
+ ro = new ResizeObserver((entries): void => {
+ expect(entries).toHaveLength(1);
+ expect(entries[0].target).toBe(el);
+ expect(entries[0].contentRect).toMatchObject({
+ top: 0,
+ left: 0,
+ width: 0,
+ height: 0
+ });
+ done();
  })
  el.style.width = '0';
  el.style.height = '0';
  ro.observe(el);
- delay(done);
  })
 
- test('Observer should not fire initially when display:none', (done): void => {
- ro = new ResizeObserver((): void => {
- expect(false).toBe(true); // Should not fire
+ test('Observer should fire initially when display:none', (done): void => {
+ ro = new ResizeObserver((entries): void => {
+ expect(entries).toHaveLength(1);
+ expect(entries[0].target).toBe(el);
+ expect(entries[0].contentRect).toMatchObject({
+ top: 0,
+ left: 0,
+ width: 0,
+ height: 0
+ });
+ done();
  })
  el.style.display = 'none';
  ro.observe(el);
- delay(done);
  })
 
- test('Observer should not fire initially when parent element is display:none', (done): void => {
- ro = new ResizeObserver((): void => {
- expect(false).toBe(true); // Should not fire
+ test('Observer should fire initially when parent element is display:none', (done): void => {
+ ro = new ResizeObserver((entries): void => {
+ expect(entries).toHaveLength(1);
+ expect(entries[0].target).toBe(child);
+ expect(entries[0].contentRect).toMatchObject({
+ top: 0,
+ left: 0,
+ width: 0,
+ height: 0
+ });
+ done();
  })
  const child = document.createElement('div');
  el.style.display = 'none';
@@ -129,18 +150,24 @@ describe('Basics', (): void => {
  expect(el.style.display).toBe('none');
  expect(child.style.display).toBe('block');
  ro.observe(child);
- delay(done);
  })
 
- test('Observer should not fire when an element has no document', (done): void => {
+ test('Observer should still fire when an element has no document', (done): void => {
  el = el.cloneNode() as HTMLElement;
- ro = new ResizeObserver((): void => {
- expect(false).toBe(true); // Should not fire
+ ro = new ResizeObserver((entries): void => {
+ expect(entries).toHaveLength(1);
+ expect(entries[0].target).toBe(el);
+ expect(entries[0].contentRect).toMatchObject({
+ top: 0,
+ left: 0,
+ width: 0,
+ height: 0
+ });
+ done();
  })
  el.style.width = '0';
  el.style.height = '0';
  ro.observe(el);
- delay(done);
  })
 
  test('Observer callback.this should be observer', (done): void => {
@@ -183,7 +210,11 @@ describe('Basics', (): void => {
  })
 
  test('Observer should fire when element size changes', (done): void => {
+ let count = 0;
  ro = new ResizeObserver((entries): void => {
+ if (!count++) {
+ return; // skip first callback
+ }
  expect(entries).toHaveLength(1);
  expect(entries[0].target).toBe(el);
  expect(entries[0].contentRect).toMatchObject({
@@ -229,7 +260,11 @@ describe('Basics', (): void => {
  })
 
  test('Observer should fire when only the width changes', (done): void => {
+ let count = 0;
  ro = new ResizeObserver((entries): void => {
+ if (!count++) {
+ return; // skip first callback
+ }
  expect(entries).toHaveLength(1);
  expect(entries[0].target).toBe(el);
  expect(entries[0].contentRect).toMatchObject({
@@ -249,7 +284,11 @@ describe('Basics', (): void => {
  })
 
  test('Observer should fire when only the height changes', (done): void => {
+ let count = 0;
  ro = new ResizeObserver((entries): void => {
+ if (!count++) {
+ return; // skip first callback
+ }
  expect(entries).toHaveLength(1);
  expect(entries[0].target).toBe(el);
  expect(entries[0].contentRect).toMatchObject({
@@ -415,7 +454,7 @@ describe('Basics', (): void => {
  })
 
  test.skip('Observer should fire when text content changes', (): void => {
- // Get MutationObserver to notify correctly in tests
+ // Text doesn't seem so change element dimension
  })
 
  test('Observer should unobserve elements correctly.', (done): void => {

test/resize-observer-box-sizes.test.ts

@@ -1,4 +1,3 @@
-import './helpers/mutation-observer';
 import { ResizeObserver } from '../src/ResizeObserver';
 import './helpers/offset';
 import { delay } from './helpers/delay';

test/resize-observer-multiple.test.ts

@@ -1,4 +1,3 @@
-import './helpers/mutation-observer';
 import { ResizeObserver } from '../src/ResizeObserver';
 import { delay } from './helpers/delay';
 import './helpers/offset';