Merge pull request microsoft#948 from timocov/add-resize-observer

Add resize observer

Author: Orta Therox

baselines/dom.generated.d.ts

@@ -1607,6 +1607,10 @@ interface RequestInit {
     window?: any;
 }
 
+interface ResizeObserverOptions {
+    box?: ResizeObserverBoxOptions;
+}
+
 interface ResponseInit {
     headers?: HeadersInit;
     status?: number;
@@ -12624,6 +12628,39 @@ declare var Request: {
     new(input: RequestInfo, init?: RequestInit): Request;
 };
 
+interface ResizeObserver {
+    disconnect(): void;
+    observe(target: Element, options?: ResizeObserverOptions): void;
+    unobserve(target: Element): void;
+}
+
+declare var ResizeObserver: {
+    prototype: ResizeObserver;
+    new(callback: ResizeObserverCallback): ResizeObserver;
+};
+
+interface ResizeObserverEntry {
+    readonly borderBoxSize: ReadonlyArray<ResizeObserverSize>;
+    readonly contentBoxSize: ReadonlyArray<ResizeObserverSize>;
+    readonly contentRect: DOMRectReadOnly;
+    readonly target: Element;
+}
+
+declare var ResizeObserverEntry: {
+    prototype: ResizeObserverEntry;
+    new(): ResizeObserverEntry;
+};
+
+interface ResizeObserverSize {
+    readonly blockSize: number;
+    readonly inlineSize: number;
+}
+
+declare var ResizeObserverSize: {
+    prototype: ResizeObserverSize;
+    new(): ResizeObserverSize;
+};
+
 /** This Fetch API interface represents the response to a request. */
 interface Response extends Body {
     readonly headers: Headers;
@@ -19259,6 +19296,10 @@ interface RTCStatsCallback {
     (report: RTCStatsReport): void;
 }
 
+interface ResizeObserverCallback {
+    (entries: ResizeObserverEntry[], observer: ResizeObserver): void;
+}
+
 interface TransformerFlushCallback<O> {
     (controller: TransformStreamDefaultController<O>): void | PromiseLike<void>;
 }
@@ -20111,6 +20152,7 @@ type RequestDestination = "" | "audio" | "audioworklet" | "document" | "embed" |
 type RequestMode = "cors" | "navigate" | "no-cors" | "same-origin";
 type RequestRedirect = "error" | "follow" | "manual";
 type ResidentKeyRequirement = "discouraged" | "preferred" | "required";
+type ResizeObserverBoxOptions = "border-box" | "content-box" | "device-pixel-content-box";
 type ResizeQuality = "high" | "low" | "medium" | "pixelated";
 type ResponseType = "basic" | "cors" | "default" | "error" | "opaque" | "opaqueredirect";
 type ScopedCredentialType = "ScopedCred";

inputfiles/idl/Resize Observer.widl

@@ -0,0 +1,39 @@
+enum ResizeObserverBoxOptions {
+    "border-box", "content-box", "device-pixel-content-box"
+};
+
+dictionary ResizeObserverOptions {
+    ResizeObserverBoxOptions box = "content-box";
+};
+
+[Exposed=(Window)]
+interface ResizeObserver {
+    constructor(ResizeObserverCallback callback);
+    undefined observe(Element target, optional ResizeObserverOptions options = {});
+    undefined unobserve(Element target);
+    undefined disconnect();
+};
+
+callback ResizeObserverCallback = undefined (sequence<ResizeObserverEntry> entries, ResizeObserver observer);
+
+[Exposed=Window]
+interface ResizeObserverEntry {
+    readonly attribute Element target;
+    readonly attribute DOMRectReadOnly contentRect;
+    readonly attribute FrozenArray<ResizeObserverSize> borderBoxSize;
+    readonly attribute FrozenArray<ResizeObserverSize> contentBoxSize;
+    readonly attribute FrozenArray<ResizeObserverSize> devicePixelContentBoxSize;
+};
+
+[Exposed=Window]
+interface ResizeObserverSize {
+    readonly attribute unrestricted double inlineSize;
+    readonly attribute unrestricted double blockSize;
+};
+
+interface ResizeObservation {
+    constructor(Element target);
+    readonly attribute Element target;
+    readonly attribute ResizeObserverBoxOptions observedBox;
+    readonly attribute FrozenArray<ResizeObserverSize> lastReportedSizes;
+};

inputfiles/idlSources.json

@@ -438,6 +438,10 @@
         "url": "https://www.w3.org/TR/referrer-policy/",
         "title": "Referrer Policy"
     },
+    {
+        "url": "https://drafts.csswg.org/resize-observer/",
+        "title": "Resize Observer"
+    },
     {
         "url": "https://w3c.github.io/resource-timing/",
         "title": "Resource Timing"

inputfiles/removedTypes.json

@@ -255,6 +255,14 @@
             "ReadableStreamBYOBReader": null,
             "ReadableStreamBYOBRequest": null,
             "ReadableStreamReader": null,
+            "ResizeObservation": null,
+            "ResizeObserverEntry": {
+                "properties": {
+                    "property": {
+                        "devicePixelContentBoxSize": null
+                    }
+                }
+            },
             "RTCDataChannel": {
                 "properties": {
                     "property": {