diff --git a/dom/base/ResizeObserver.cpp b/dom/base/ResizeObserver.cpp
new file mode 100644
index 000000000..37d940c2b
--- /dev/null
+++ b/dom/base/ResizeObserver.cpp
@@ -0,0 +1,304 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "mozilla/dom/ResizeObserver.h"
+
+#include "mozilla/dom/DOMRect.h"
+#include "nsContentUtils.h"
+#include "nsIFrame.h"
+#include "nsSVGUtils.h"
+
+namespace mozilla {
+namespace dom {
+
+NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(ResizeObserver)
+  NS_WRAPPERCACHE_INTERFACE_MAP_ENTRY
+  NS_INTERFACE_MAP_ENTRY(nsISupports)
+NS_INTERFACE_MAP_END
+
+NS_IMPL_CYCLE_COLLECTING_ADDREF(ResizeObserver)
+NS_IMPL_CYCLE_COLLECTING_RELEASE(ResizeObserver)
+
+NS_IMPL_CYCLE_COLLECTION_CLASS(ResizeObserver)
+
+NS_IMPL_CYCLE_COLLECTION_TRACE_BEGIN(ResizeObserver)
+  NS_IMPL_CYCLE_COLLECTION_TRACE_PRESERVED_WRAPPER
+NS_IMPL_CYCLE_COLLECTION_TRACE_END
+
+NS_IMPL_CYCLE_COLLECTION_UNLINK_BEGIN(ResizeObserver)
+  NS_IMPL_CYCLE_COLLECTION_UNLINK_PRESERVED_WRAPPER
+  NS_IMPL_CYCLE_COLLECTION_UNLINK(mOwner)
+  NS_IMPL_CYCLE_COLLECTION_UNLINK(mCallback)
+  NS_IMPL_CYCLE_COLLECTION_UNLINK(mObservationMap)
+NS_IMPL_CYCLE_COLLECTION_UNLINK_END
+
+NS_IMPL_CYCLE_COLLECTION_TRAVERSE_BEGIN(ResizeObserver)
+  NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mOwner)
+  NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mCallback)
+  NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mObservationMap)
+NS_IMPL_CYCLE_COLLECTION_TRAVERSE_END
+
+already_AddRefed<ResizeObserver>
+ResizeObserver::Constructor(const GlobalObject& aGlobal,
+                            ResizeObserverCallback& aCb,
+                            ErrorResult& aRv)
+{
+  nsCOMPtr<nsPIDOMWindowInner> window =
+    do_QueryInterface(aGlobal.GetAsSupports());
+
+  if (!window) {
+    aRv.Throw(NS_ERROR_FAILURE);
+    return nullptr;
+  }
+
+  nsCOMPtr<nsIDocument> document = window->GetExtantDoc();
+
+  if (!document) {
+    aRv.Throw(NS_ERROR_FAILURE);
+    return nullptr;
+  }
+
+  RefPtr<ResizeObserver> observer = new ResizeObserver(window.forget(), aCb);
+  document->AddResizeObserver(observer);
+
+  return observer.forget();
+}
+
+void
+ResizeObserver::Observe(Element* aTarget,
+                        ErrorResult& aRv)
+{
+  if (!aTarget) {
+    aRv.Throw(NS_ERROR_DOM_NOT_FOUND_ERR);
+    return;
+  }
+
+  RefPtr<ResizeObservation> observation;
+
+  if (!mObservationMap.Get(aTarget, getter_AddRefs(observation))) {
+    observation = new ResizeObservation(this, aTarget);
+
+    mObservationMap.Put(aTarget, observation);
+    mObservationList.insertBack(observation);
+
+    // Per the spec, we need to trigger notification in event loop that
+    // contains ResizeObserver observe call even when resize/reflow does
+    // not happen.
+    aTarget->OwnerDoc()->ScheduleResizeObserversNotification();
+  }
+}
+
+void
+ResizeObserver::Unobserve(Element* aTarget,
+                          ErrorResult& aRv)
+{
+  if (!aTarget) {
+    aRv.Throw(NS_ERROR_DOM_NOT_FOUND_ERR);
+    return;
+  }
+
+  RefPtr<ResizeObservation> observation;
+
+  if (mObservationMap.Get(aTarget, getter_AddRefs(observation))) {
+    mObservationMap.Remove(aTarget);
+
+    MOZ_ASSERT(!mObservationList.isEmpty(),
+               "If ResizeObservation found for an element, observation list "
+               "must be not empty.");
+
+    observation->remove();
+  }
+}
+
+void
+ResizeObserver::Disconnect()
+{
+  mObservationMap.Clear();
+  mObservationList.clear();
+  mActiveTargets.Clear();
+}
+
+void
+ResizeObserver::GatherActiveObservations(uint32_t aDepth)
+{
+  mActiveTargets.Clear();
+  mHasSkippedTargets = false;
+
+  for (auto observation : mObservationList) {
+    if (observation->IsActive()) {
+      uint32_t targetDepth =
+        nsContentUtils::GetNodeDepth(observation->Target());
+
+      if (targetDepth > aDepth) {
+        mActiveTargets.AppendElement(observation);
+      } else {
+        mHasSkippedTargets = true;
+      }
+    }
+  }
+}
+
+bool
+ResizeObserver::HasActiveObservations() const
+{
+  return !mActiveTargets.IsEmpty();
+}
+
+bool
+ResizeObserver::HasSkippedObservations() const
+{
+  return mHasSkippedTargets;
+}
+
+uint32_t
+ResizeObserver::BroadcastActiveObservations()
+{
+  uint32_t shallowestTargetDepth = UINT32_MAX;
+
+  if (HasActiveObservations()) {
+    Sequence<OwningNonNull<ResizeObserverEntry>> entries;
+
+    for (auto observation : mActiveTargets) {
+      RefPtr<ResizeObserverEntry> entry =
+        new ResizeObserverEntry(this, observation->Target());
+
+      nsRect rect = observation->GetTargetRect();
+      entry->SetContentRect(rect);
+
+      if (!entries.AppendElement(entry.forget(), fallible)) {
+        // Out of memory.
+        break;
+      }
+
+      // Sync the broadcast size of observation so the next size inspection
+      // will be based on the updated size from last delivered observations.
+      observation->UpdateBroadcastSize(rect);
+
+      uint32_t targetDepth =
+        nsContentUtils::GetNodeDepth(observation->Target());
+
+      if (targetDepth < shallowestTargetDepth) {
+        shallowestTargetDepth = targetDepth;
+      }
+    }
+
+    mCallback->Call(this, entries, *this);
+    mActiveTargets.Clear();
+    mHasSkippedTargets = false;
+  }
+
+  return shallowestTargetDepth;
+}
+
+NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(ResizeObserverEntry)
+  NS_WRAPPERCACHE_INTERFACE_MAP_ENTRY
+  NS_INTERFACE_MAP_ENTRY(nsISupports)
+NS_INTERFACE_MAP_END
+
+NS_IMPL_CYCLE_COLLECTING_ADDREF(ResizeObserverEntry)
+NS_IMPL_CYCLE_COLLECTING_RELEASE(ResizeObserverEntry)
+
+NS_IMPL_CYCLE_COLLECTION_WRAPPERCACHE(ResizeObserverEntry,
+                                      mTarget, mContentRect,
+                                      mOwner)
+
+already_AddRefed<ResizeObserverEntry>
+ResizeObserverEntry::Constructor(const GlobalObject& aGlobal,
+                                 Element* aTarget,
+                                 ErrorResult& aRv)
+{
+  RefPtr<ResizeObserverEntry> observerEntry =
+    new ResizeObserverEntry(aGlobal.GetAsSupports(), aTarget);
+  return observerEntry.forget();
+}
+
+void
+ResizeObserverEntry::SetContentRect(nsRect aRect)
+{
+  RefPtr<DOMRect> contentRect = new DOMRect(mTarget);
+  nsIFrame* frame = mTarget->GetPrimaryFrame();
+
+  if (frame) {
+    nsMargin padding = frame->GetUsedPadding();
+
+    // Per the spec, we need to include padding in contentRect of
+    // ResizeObserverEntry.
+    aRect.x = padding.left;
+    aRect.y = padding.top;
+  }
+
+  contentRect->SetLayoutRect(aRect);
+  mContentRect = contentRect.forget();
+}
+
+ResizeObserverEntry::~ResizeObserverEntry()
+{
+}
+
+NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(ResizeObservation)
+  NS_WRAPPERCACHE_INTERFACE_MAP_ENTRY
+  NS_INTERFACE_MAP_ENTRY(nsISupports)
+NS_INTERFACE_MAP_END
+
+NS_IMPL_CYCLE_COLLECTING_ADDREF(ResizeObservation)
+NS_IMPL_CYCLE_COLLECTING_RELEASE(ResizeObservation)
+
+NS_IMPL_CYCLE_COLLECTION_WRAPPERCACHE(ResizeObservation,
+                                      mTarget, mOwner)
+
+already_AddRefed<ResizeObservation>
+ResizeObservation::Constructor(const GlobalObject& aGlobal,
+                               Element* aTarget,
+                               ErrorResult& aRv)
+{
+  RefPtr<ResizeObservation> observation =
+    new ResizeObservation(aGlobal.GetAsSupports(), aTarget);
+  return observation.forget();
+}
+
+bool
+ResizeObservation::IsActive() const
+{
+  nsRect rect = GetTargetRect();
+  return (rect.width != mBroadcastWidth || rect.height != mBroadcastHeight);
+}
+
+void
+ResizeObservation::UpdateBroadcastSize(nsRect aRect)
+{
+  mBroadcastWidth = aRect.width;
+  mBroadcastHeight = aRect.height;
+}
+
+nsRect
+ResizeObservation::GetTargetRect() const
+{
+  nsRect rect;
+  nsIFrame* frame = mTarget->GetPrimaryFrame();
+
+  if (frame) {
+    if (mTarget->IsSVGElement()) {
+      gfxRect bbox = nsSVGUtils::GetBBox(frame);
+      rect.width = NSFloatPixelsToAppUnits(bbox.width, AppUnitsPerCSSPixel());
+      rect.height = NSFloatPixelsToAppUnits(bbox.height, AppUnitsPerCSSPixel());
+    } else {
+      // Per the spec, non-replaced inline Elements will always have an empty
+      // content rect.
+      if (frame->IsFrameOfType(nsIFrame::eReplaced) ||
+          !frame->IsFrameOfType(nsIFrame::eLineParticipant)) {
+        rect = frame->GetContentRectRelativeToSelf();
+      }
+    }
+  }
+
+  return rect;
+}
+
+ResizeObservation::~ResizeObservation()
+{
+}
+
+} // namespace dom
+} // namespace mozilla
diff --git a/dom/base/ResizeObserver.h b/dom/base/ResizeObserver.h
new file mode 100644
index 000000000..2f56c580f
--- /dev/null
+++ b/dom/base/ResizeObserver.h
@@ -0,0 +1,254 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef mozilla_dom_ResizeObserver_h
+#define mozilla_dom_ResizeObserver_h
+
+#include "mozilla/dom/ResizeObserverBinding.h"
+
+namespace mozilla {
+namespace dom {
+
+/**
+ * ResizeObserver interfaces and algorithms are based on
+ * https://wicg.github.io/ResizeObserver/#api
+ */
+class ResizeObserver final
+  : public nsISupports
+  , public nsWrapperCache
+{
+public:
+  NS_DECL_CYCLE_COLLECTING_ISUPPORTS
+  NS_DECL_CYCLE_COLLECTION_SCRIPT_HOLDER_CLASS(ResizeObserver)
+
+  ResizeObserver(already_AddRefed<nsPIDOMWindowInner>&& aOwner,
+                 ResizeObserverCallback& aCb)
+    : mOwner(aOwner)
+    , mCallback(&aCb)
+  {
+    MOZ_ASSERT(mOwner, "Need a non-null owner window");
+  }
+
+  static already_AddRefed<ResizeObserver>
+  Constructor(const GlobalObject& aGlobal,
+              ResizeObserverCallback& aCb,
+              ErrorResult& aRv);
+
+  JSObject* WrapObject(JSContext* aCx,
+                       JS::Handle<JSObject*> aGivenProto) override
+  {
+    return ResizeObserverBinding::Wrap(aCx, this, aGivenProto);
+  }
+
+  nsISupports* GetParentObject() const
+  {
+    return mOwner;
+  }
+
+  void Observe(Element* aTarget, ErrorResult& aRv);
+
+  void Unobserve(Element* aTarget, ErrorResult& aRv);
+
+  void Disconnect();
+
+  /*
+   * Gather all observations which have an observed target with size changed
+   * since last BroadcastActiveObservations() in this ResizeObserver.
+   * An observation will be skipped if the depth of its observed target is less
+   * or equal than aDepth. All gathered observations will be added to
+   * mActiveTargets.
+  */
+  void GatherActiveObservations(uint32_t aDepth);
+
+  /*
+   * Returns whether this ResizeObserver has any active observations
+   * since last GatherActiveObservations().
+  */
+  bool HasActiveObservations() const;
+
+  /*
+   * Returns whether this ResizeObserver has any skipped observations
+   * since last GatherActiveObservations().
+  */
+  bool HasSkippedObservations() const;
+
+  /*
+   * Deliver the callback function in JavaScript for all active observations
+   * and pass the sequence of ResizeObserverEntry so JavaScript can access them.
+   * The broadcast size of observations will be updated and mActiveTargets will
+   * be cleared. It also returns the shallowest depth of elements from active
+   * observations or UINT32_MAX if there is no any active observations.
+  */
+  uint32_t BroadcastActiveObservations();
+
+protected:
+  ~ResizeObserver()
+  {
+    mObservationList.clear();
+  }
+
+  nsCOMPtr<nsPIDOMWindowInner> mOwner;
+  RefPtr<ResizeObserverCallback> mCallback;
+  nsTArray<RefPtr<ResizeObservation>> mActiveTargets;
+  bool mHasSkippedTargets;
+
+  // Combination of HashTable and LinkedList so we can iterate through
+  // the elements of HashTable in order of insertion time.
+  // Will be nice if we have our own data structure for this in the future.
+  nsRefPtrHashtable<nsPtrHashKey<Element>, ResizeObservation> mObservationMap;
+  LinkedList<ResizeObservation> mObservationList;
+};
+
+/**
+ * ResizeObserverEntry is the entry that contains the information for observed
+ * elements. This object is the one that visible to JavaScript in callback
+ * function that is fired by ResizeObserver.
+ */
+class ResizeObserverEntry final
+  : public nsISupports
+  , public nsWrapperCache
+{
+public:
+  NS_DECL_CYCLE_COLLECTING_ISUPPORTS
+  NS_DECL_CYCLE_COLLECTION_SCRIPT_HOLDER_CLASS(ResizeObserverEntry)
+
+  ResizeObserverEntry(nsISupports* aOwner, Element* aTarget)
+    : mOwner(aOwner)
+    , mTarget(aTarget)
+  {
+    MOZ_ASSERT(mOwner, "Need a non-null owner");
+    MOZ_ASSERT(mTarget, "Need a non-null target element");
+  }
+
+  static already_AddRefed<ResizeObserverEntry>
+  Constructor(const GlobalObject& aGlobal,
+              Element* aTarget,
+              ErrorResult& aRv);
+
+  JSObject* WrapObject(JSContext* aCx,
+                       JS::Handle<JSObject*> aGivenProto) override
+  {
+    return ResizeObserverEntryBinding::Wrap(aCx, this,
+                                            aGivenProto);
+  }
+
+  nsISupports* GetParentObject() const
+  {
+    return mOwner;
+  }
+
+  Element* Target() const
+  {
+    return mTarget;
+  }
+
+  /*
+   * Returns the DOMRectReadOnly of target's content rect so it can be
+   * accessed from JavaScript in callback function of ResizeObserver.
+  */
+  DOMRectReadOnly* GetContentRect() const
+  {
+    return mContentRect;
+  }
+
+  void SetContentRect(nsRect aRect);
+
+protected:
+  ~ResizeObserverEntry();
+
+  nsCOMPtr<nsISupports> mOwner;
+  nsCOMPtr<Element> mTarget;
+  RefPtr<DOMRectReadOnly> mContentRect;
+};
+
+/**
+ * We use ResizeObservation to store and sync the size information of one
+ * observed element so we can decide whether an observation should be fired
+ * or not.
+ */
+class ResizeObservation final
+  : public nsISupports
+  , public nsWrapperCache
+  , public LinkedListElement<ResizeObservation>
+{
+public:
+  NS_DECL_CYCLE_COLLECTING_ISUPPORTS
+  NS_DECL_CYCLE_COLLECTION_SCRIPT_HOLDER_CLASS(ResizeObservation)
+
+  ResizeObservation(nsISupports* aOwner, Element* aTarget)
+    : mOwner(aOwner)
+    , mTarget(aTarget)
+    , mBroadcastWidth(0)
+    , mBroadcastHeight(0)
+  {
+    MOZ_ASSERT(mOwner, "Need a non-null owner");
+    MOZ_ASSERT(mTarget, "Need a non-null target element");
+  }
+
+  static already_AddRefed<ResizeObservation>
+  Constructor(const GlobalObject& aGlobal,
+              Element* aTarget,
+              ErrorResult& aRv);
+
+  JSObject* WrapObject(JSContext* aCx,
+                       JS::Handle<JSObject*> aGivenProto) override
+  {
+    return ResizeObservationBinding::Wrap(aCx, this, aGivenProto);
+  }
+
+  nsISupports* GetParentObject() const
+  {
+    return mOwner;
+  }
+
+  Element* Target() const
+  {
+    return mTarget;
+  }
+
+  nscoord BroadcastWidth() const
+  {
+    return mBroadcastWidth;
+  }
+
+  nscoord BroadcastHeight() const
+  {
+    return mBroadcastHeight;
+  }
+
+  /*
+   * Returns whether the observed target element size differs from current
+   * BroadcastWidth and BroadcastHeight
+  */
+  bool IsActive() const;
+
+  /*
+   * Update current BroadcastWidth and BroadcastHeight with size from aRect.
+  */
+  void UpdateBroadcastSize(nsRect aRect);
+
+  /*
+   * Returns the target's rect in the form of nsRect.
+   * If the target is SVG, width and height are determined from bounding box.
+  */
+  nsRect GetTargetRect() const;
+
+protected:
+  ~ResizeObservation();
+
+  nsCOMPtr<nsISupports> mOwner;
+  nsCOMPtr<Element> mTarget;
+
+  // Broadcast width and broadcast height are the latest recorded size
+  // of observed target.
+  nscoord mBroadcastWidth;
+  nscoord mBroadcastHeight;
+};
+
+} // namespace dom
+} // namespace mozilla
+
+#endif // mozilla_dom_ResizeObserver_h
+
diff --git a/dom/base/ResizeObserverController.cpp b/dom/base/ResizeObserverController.cpp
new file mode 100644
index 000000000..d4166155e
--- /dev/null
+++ b/dom/base/ResizeObserverController.cpp
@@ -0,0 +1,248 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "mozilla/dom/ResizeObserverController.h"
+#include "mozilla/dom/Element.h"
+#include "mozilla/dom/ErrorEvent.h"
+#include "nsIPresShell.h"
+#include "nsPresContext.h"
+
+namespace mozilla {
+namespace dom {
+
+void
+ResizeObserverNotificationHelper::WillRefresh(TimeStamp aTime)
+{
+  MOZ_ASSERT(mOwner, "Why is mOwner already dead when this RefreshObserver is still registered?");
+  if (mOwner) {
+    mOwner->Notify();
+  }
+}
+
+nsRefreshDriver*
+ResizeObserverNotificationHelper::GetRefreshDriver() const
+{
+  nsIPresShell* presShell = mOwner->GetShell();
+  if (MOZ_UNLIKELY(!presShell)) {
+    return nullptr;
+  }
+
+  nsPresContext* presContext = presShell->GetPresContext();
+  if (MOZ_UNLIKELY(!presContext)) {
+    return nullptr;
+  }
+
+  return presContext->RefreshDriver();
+}
+
+void
+ResizeObserverNotificationHelper::Register()
+{
+  if (mRegistered) {
+    return;
+  }
+
+  nsRefreshDriver* refreshDriver = GetRefreshDriver();
+  if (!refreshDriver) {
+    // We maybe navigating away from this page or currently in an iframe with
+    // display: none. Just abort the Register(), no need to do notification.
+    return;
+  }
+
+  refreshDriver->AddRefreshObserver(this, Flush_Display);
+  mRegistered = true;
+}
+
+void
+ResizeObserverNotificationHelper::Unregister()
+{
+  if (!mOwner) {
+    // We've outlived our owner, so there's nothing registered anymore.
+    mRegistered = false;
+    return;
+  }
+
+  if (!mRegistered) {
+    return;
+  }
+
+  nsRefreshDriver* refreshDriver = GetRefreshDriver();
+  if (!refreshDriver) {
+    // We can't access RefreshDriver now. Just abort the Unregister().
+    return;
+  }
+
+  refreshDriver->RemoveRefreshObserver(this, Flush_Display);
+  mRegistered = false;
+}
+
+void
+ResizeObserverNotificationHelper::Disconnect()
+{
+  Unregister();
+  // Our owner is dying. Clear our pointer to it, in case we outlive it.
+  mOwner = nullptr;
+}
+
+ResizeObserverNotificationHelper::~ResizeObserverNotificationHelper()
+{
+  Unregister();
+}
+
+void
+ResizeObserverController::Traverse(nsCycleCollectionTraversalCallback& aCb)
+{
+  ImplCycleCollectionTraverse(aCb, mResizeObservers, "mResizeObservers");
+}
+
+void
+ResizeObserverController::Unlink()
+{
+  mResizeObservers.Clear();
+}
+
+void
+ResizeObserverController::AddResizeObserver(ResizeObserver* aObserver)
+{
+  MOZ_ASSERT(aObserver, "AddResizeObserver() should never be called with "
+                        "a null parameter");
+  mResizeObservers.AppendElement(aObserver);
+}
+
+void
+ResizeObserverController::Notify()
+{
+  if (mResizeObservers.IsEmpty()) {
+    return;
+  }
+
+  // Hold a strong reference to the document, because otherwise calling
+  // all active observers on it might yank it out from under us.
+  RefPtr<nsIDocument> document(mDocument);
+  
+  uint32_t shallowestTargetDepth = 0;
+
+  GatherAllActiveObservations(shallowestTargetDepth);
+
+  while (HasAnyActiveObservations()) {
+    DebugOnly<uint32_t> oldShallowestTargetDepth = shallowestTargetDepth;
+    shallowestTargetDepth = BroadcastAllActiveObservations();
+    NS_ASSERTION(oldShallowestTargetDepth < shallowestTargetDepth,
+                 "shallowestTargetDepth should be getting strictly deeper");
+
+    // Flush layout, so that any callback functions' style changes / resizes
+    // get a chance to take effect.
+    mDocument->FlushPendingNotifications(Flush_Layout);
+
+    // To avoid infinite resize loop, we only gather all active observations
+    // that have the depth of observed target element more than current
+    // shallowestTargetDepth.
+    GatherAllActiveObservations(shallowestTargetDepth);
+  }
+
+  mResizeObserverNotificationHelper->Unregister();
+
+  // Per spec, we deliver an error if the document has any skipped observations.
+  if (HasAnySkippedObservations()) {
+    RootedDictionary<ErrorEventInit> init(RootingCx());
+
+    init.mMessage.AssignLiteral("ResizeObserver loop completed with undelivered"
+                                " notifications.");
+    init.mCancelable = true;
+    init.mBubbles = true;
+
+    nsEventStatus status = nsEventStatus_eIgnore;
+
+    nsCOMPtr<nsPIDOMWindowInner> window =
+      document->GetWindow()->GetCurrentInnerWindow();
+
+    if (window) {
+      nsCOMPtr<nsIScriptGlobalObject> sgo = do_QueryInterface(window);
+      MOZ_ASSERT(sgo);
+
+      if (NS_WARN_IF(NS_FAILED(sgo->HandleScriptError(init, &status)))) {
+        status = nsEventStatus_eIgnore;
+      }
+    } else {
+      // We don't fire error events at any global for non-window JS on the main
+      // thread.
+    }
+
+    // We need to deliver pending notifications in next cycle.
+    ScheduleNotification();
+  }
+}
+
+void
+ResizeObserverController::GatherAllActiveObservations(uint32_t aDepth)
+{
+  for (auto observer : mResizeObservers) {
+    observer->GatherActiveObservations(aDepth);
+  }
+}
+
+uint32_t
+ResizeObserverController::BroadcastAllActiveObservations()
+{
+  uint32_t shallowestTargetDepth = UINT32_MAX;
+
+  // Use a copy of the observers as this invokes the callbacks of the observers
+  // which could register/unregister observers at will.
+  nsTArray<RefPtr<ResizeObserver>> tempObservers(mResizeObservers);
+  
+  for (auto observer : tempObservers) {
+
+    uint32_t targetDepth = observer->BroadcastActiveObservations();
+
+    if (targetDepth < shallowestTargetDepth) {
+      shallowestTargetDepth = targetDepth;
+    }
+  }
+
+  return shallowestTargetDepth;
+}
+
+bool
+ResizeObserverController::HasAnyActiveObservations() const
+{
+  for (auto observer : mResizeObservers) {
+    if (observer->HasActiveObservations()) {
+      return true;
+    }
+  }
+  return false;
+}
+
+bool
+ResizeObserverController::HasAnySkippedObservations() const
+{
+  for (auto observer : mResizeObservers) {
+    if (observer->HasSkippedObservations()) {
+      return true;
+    }
+  }
+  return false;
+}
+
+void
+ResizeObserverController::ScheduleNotification()
+{
+  mResizeObserverNotificationHelper->Register();
+}
+
+nsIPresShell*
+ResizeObserverController::GetShell() const
+{
+  return mDocument->GetShell();
+}
+
+ResizeObserverController::~ResizeObserverController()
+{
+  mResizeObserverNotificationHelper->Disconnect();
+}
+
+} // namespace dom
+} // namespace mozilla
diff --git a/dom/base/ResizeObserverController.h b/dom/base/ResizeObserverController.h
new file mode 100644
index 000000000..a77511587
--- /dev/null
+++ b/dom/base/ResizeObserverController.h
@@ -0,0 +1,129 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef mozilla_dom_ResizeObserverController_h
+#define mozilla_dom_ResizeObserverController_h
+
+#include "mozilla/dom/ResizeObserver.h"
+#include "mozilla/TimeStamp.h"
+#include "nsRefreshDriver.h"
+
+namespace mozilla {
+namespace dom {
+
+class ResizeObserverController;
+
+/*
+ * ResizeObserverNotificationHelper will trigger ResizeObserver notifications
+ * by registering with the Refresh Driver.
+*/
+class ResizeObserverNotificationHelper final : public nsARefreshObserver
+{
+public:
+  NS_INLINE_DECL_REFCOUNTING(ResizeObserverNotificationHelper, override)
+
+  explicit ResizeObserverNotificationHelper(ResizeObserverController* aOwner)
+    : mOwner(aOwner)
+    , mRegistered(false)
+  {
+    MOZ_ASSERT(mOwner, "Need a non-null owner");
+  }
+
+  void WillRefresh(TimeStamp aTime) override;
+
+  nsRefreshDriver* GetRefreshDriver() const;
+
+  void Register();
+
+  void Unregister();
+
+  void Disconnect();
+
+protected:
+  virtual ~ResizeObserverNotificationHelper();
+
+  ResizeObserverController* mOwner;
+  bool mRegistered;
+};
+
+/*
+ * ResizeObserverController contains the list of ResizeObservers and controls
+ * the flow of notification.
+*/
+class ResizeObserverController final
+{
+public:
+  explicit ResizeObserverController(nsIDocument* aDocument)
+    : mDocument(aDocument)
+    , mIsNotificationActive(false)
+  {
+    MOZ_ASSERT(mDocument, "Need a non-null document");
+    mResizeObserverNotificationHelper =
+      new ResizeObserverNotificationHelper(this);
+  }
+
+  // Methods for supporting cycle-collection
+  void Traverse(nsCycleCollectionTraversalCallback& aCb);
+  void Unlink();
+
+  void AddResizeObserver(ResizeObserver* aObserver);
+
+  /*
+   * Schedule the notification via ResizeObserverNotificationHelper refresh
+   * observer.
+  */
+  void ScheduleNotification();
+
+  /*
+   * Notify all ResizeObservers by gathering and broadcasting all active
+   * observations.
+  */
+  void Notify();
+
+  nsIPresShell* GetShell() const;
+
+  ~ResizeObserverController();
+
+private:
+  /*
+   * Calls GatherActiveObservations(aDepth) for all ResizeObservers in this
+   * controller. All observations in each ResizeObserver with element's depth
+   * more than aDepth will be gathered.
+  */
+  void GatherAllActiveObservations(uint32_t aDepth);
+
+  /*
+   * Calls BroadcastActiveObservations() for all ResizeObservers in this
+   * controller. It also returns the shallowest depth of observed target
+   * elements from all ResizeObserver or UINT32_MAX if there is no any
+   * active obsevations at all.
+  */
+  uint32_t BroadcastAllActiveObservations();
+
+  /*
+   * Returns whether there is any ResizeObserver that has active observations.
+  */
+  bool HasAnyActiveObservations() const;
+
+  /*
+   * Returns whether there is any ResizeObserver that has skipped observations.
+  */
+  bool HasAnySkippedObservations() const;
+
+protected:
+  // Raw pointer is OK because mDocument strongly owns us & hence must outlive
+  // us.
+  nsIDocument* const mDocument;
+
+  RefPtr<ResizeObserverNotificationHelper> mResizeObserverNotificationHelper;
+  nsTArray<RefPtr<ResizeObserver>> mResizeObservers;
+  bool mIsNotificationActive;
+};
+
+} // namespace dom
+} // namespace mozilla
+
+#endif // mozilla_dom_ResizeObserverController_h
diff --git a/dom/base/moz.build b/dom/base/moz.build
index 42e559e61..d6cb27818 100644
--- a/dom/base/moz.build
+++ b/dom/base/moz.build
@@ -204,6 +204,8 @@ EXPORTS.mozilla.dom += [
     'PartialSHistory.h',
     'Pose.h',
     'ProcessGlobal.h',
+    'ResizeObserver.h',
+    'ResizeObserverController.h',
     'ResponsiveImageSelector.h',
     'SameProcessMessageQueue.h',
     'ScreenOrientation.h',
@@ -349,6 +351,8 @@ SOURCES += [
     'Pose.cpp',
     'PostMessageEvent.cpp',
     'ProcessGlobal.cpp',
+    'ResizeObserver.cpp',
+    'ResizeObserverController.cpp',
     'ResponsiveImageSelector.cpp',
     'SameProcessMessageQueue.cpp',
     'ScreenOrientation.cpp',
diff --git a/dom/base/nsContentUtils.cpp b/dom/base/nsContentUtils.cpp
index 3568ced90..20b6beffa 100644
--- a/dom/base/nsContentUtils.cpp
+++ b/dom/base/nsContentUtils.cpp
@@ -9843,3 +9843,17 @@ nsContentUtils::GetClosestNonNativeAnonymousAncestor(Element* aElement)
   }
   return e;
 }
+
+/* static */ uint32_t
+nsContentUtils::GetNodeDepth(nsINode* aNode)
+{
+  uint32_t depth = 1;
+
+  MOZ_ASSERT(aNode, "Node shouldn't be null");
+
+  while ((aNode = aNode->GetParentNode())) {
+    ++depth;
+  }
+
+  return depth;
+}
\ No newline at end of file
diff --git a/dom/base/nsContentUtils.h b/dom/base/nsContentUtils.h
index 8cf105bb3..db9558d06 100644
--- a/dom/base/nsContentUtils.h
+++ b/dom/base/nsContentUtils.h
@@ -2763,6 +2763,14 @@ public:
   static bool
   IsCustomElementsEnabled() { return sIsCustomElementsEnabled; }
 
+  /**
+   * Returns the length of the parent-traversal path (in terms of the number of
+   * nodes) to an unparented/root node from aNode. An unparented/root node is
+   * considered to have a depth of 1, its children have a depth of 2, etc.
+   * aNode is expected to be non-null.
+   */
+  static uint32_t GetNodeDepth(nsINode* aNode);
+
 private:
   static bool InitializeEventTable();
 
diff --git a/dom/base/nsDocument.cpp b/dom/base/nsDocument.cpp
index 76490e6b4..5bf89f26a 100644
--- a/dom/base/nsDocument.cpp
+++ b/dom/base/nsDocument.cpp
@@ -1681,6 +1681,10 @@ NS_IMPL_CYCLE_COLLECTION_TRAVERSE_BEGIN_INTERNAL(nsDocument)
       cb.NoteXPCOMChild(mql);
     }
   }
+
+  if (tmp->mResizeObserverController) {
+    tmp->mResizeObserverController->Traverse(cb);
+  }
 NS_IMPL_CYCLE_COLLECTION_TRAVERSE_END
 
 NS_IMPL_CYCLE_COLLECTION_CLASS(nsDocument)
@@ -1786,6 +1790,10 @@ NS_IMPL_CYCLE_COLLECTION_UNLINK_BEGIN(nsDocument)
   }
 
   tmp->mInUnlinkOrDeletion = false;
+
+  if (tmp->mResizeObserverController) {
+    tmp->mResizeObserverController->Unlink();
+  }
 NS_IMPL_CYCLE_COLLECTION_UNLINK_END
 
 nsresult
@@ -11823,6 +11831,24 @@ nsDocument::QuerySelectorAll(const nsAString& aSelector, nsIDOMNodeList **aRetur
   return nsINode::QuerySelectorAll(aSelector, aReturn);
 }
 
+void
+nsDocument::AddResizeObserver(ResizeObserver* aResizeObserver)
+{
+  if (!mResizeObserverController) {
+    mResizeObserverController = MakeUnique<ResizeObserverController>(this);
+  }
+
+  mResizeObserverController->AddResizeObserver(aResizeObserver);
+}
+
+void
+nsDocument::ScheduleResizeObserversNotification() const
+{
+  if (mResizeObserverController) {
+    mResizeObserverController->ScheduleNotification();
+  }
+}
+
 already_AddRefed<nsIDocument>
 nsIDocument::Constructor(const GlobalObject& aGlobal,
                          ErrorResult& rv)
diff --git a/dom/base/nsDocument.h b/dom/base/nsDocument.h
index 502ba0f13..017879b1f 100644
--- a/dom/base/nsDocument.h
+++ b/dom/base/nsDocument.h
@@ -60,6 +60,7 @@
 #include "mozilla/MemoryReporting.h"
 #include "mozilla/PendingAnimationTracker.h"
 #include "mozilla/dom/DOMImplementation.h"
+#include "mozilla/dom/ResizeObserverController.h"
 #include "mozilla/dom/ScriptLoader.h"
 #include "mozilla/dom/StyleSheetList.h"
 #include "nsDataHashtable.h"
@@ -1024,6 +1025,10 @@ public:
 
   virtual void UnblockDOMContentLoaded() override;
 
+  void AddResizeObserver(mozilla::dom::ResizeObserver* aResizeObserver) override;
+
+  void ScheduleResizeObserversNotification() const override;
+
 protected:
   friend class nsNodeUtils;
   friend class nsDocumentOnStack;
@@ -1160,6 +1165,9 @@ protected:
 
   nsTArray<nsIObserver*> mCharSetObservers;
 
+  mozilla::UniquePtr<mozilla::dom::ResizeObserverController>
+    mResizeObserverController;
+
   PLDHashTable *mSubDocuments;
 
   // Array of owning references to all children
diff --git a/dom/base/nsIDocument.h b/dom/base/nsIDocument.h
index 7c1f5b584..38391358d 100644
--- a/dom/base/nsIDocument.h
+++ b/dom/base/nsIDocument.h
@@ -153,6 +153,7 @@ class ProcessingInstruction;
 class Promise;
 class Selection;
 class ScriptLoader;
+class ResizeObserver;
 class StyleSheetList;
 class SVGDocument;
 class SVGSVGElement;
@@ -2832,6 +2833,10 @@ public:
 
   bool ModuleScriptsEnabled();
 
+  virtual void AddResizeObserver(mozilla::dom::ResizeObserver* aResizeObserver) = 0;
+
+  virtual void ScheduleResizeObserversNotification() const = 0;
+
   bool ShouldThrowOnDynamicMarkupInsertion()
   {
     return mThrowOnDynamicMarkupInsertionCounter;
diff --git a/dom/bindings/Bindings.conf b/dom/bindings/Bindings.conf
index 56d220194..fe4a4eaef 100644
--- a/dom/bindings/Bindings.conf
+++ b/dom/bindings/Bindings.conf
@@ -722,6 +722,21 @@ DOMInterfaces = {
     },
 },
 
+'ResizeObservation': {
+    'nativeType': 'mozilla::dom::ResizeObservation',
+    'headerFile': 'mozilla/dom/ResizeObserver.h',
+},
+
+'ResizeObserver': {
+    'nativeType': 'mozilla::dom::ResizeObserver',
+    'headerFile': 'mozilla/dom/ResizeObserver.h',
+},
+
+'ResizeObserverEntry': {
+    'nativeType': 'mozilla::dom::ResizeObserverEntry',
+    'headerFile': 'mozilla/dom/ResizeObserver.h',
+},
+
 'Response': {
     'binaryNames': { 'headers': 'headers_' },
 },
diff --git a/dom/webidl/ResizeObserver.webidl b/dom/webidl/ResizeObserver.webidl
new file mode 100644
index 000000000..98700f53c
--- /dev/null
+++ b/dom/webidl/ResizeObserver.webidl
@@ -0,0 +1,39 @@
+/* -*- Mode: IDL; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * The origin of this IDL file is
+ * https://wicg.github.io/ResizeObserver/
+ */
+
+[Constructor(ResizeObserverCallback callback),
+ Exposed=Window,
+ Pref="layout.css.resizeobserver.enabled"]
+interface ResizeObserver {
+    [Throws]
+    void observe(Element? target);
+    [Throws]
+    void unobserve(Element? target);
+    void disconnect();
+};
+
+callback ResizeObserverCallback = void (sequence<ResizeObserverEntry> entries, ResizeObserver observer);
+
+[Constructor(Element? target),
+ ChromeOnly,
+ Pref="layout.css.resizeobserver.enabled"]
+interface ResizeObserverEntry {
+    readonly attribute Element target;
+    readonly attribute DOMRectReadOnly? contentRect;
+};
+
+[Constructor(Element? target),
+ ChromeOnly,
+ Pref="layout.css.resizeobserver.enabled"]
+interface ResizeObservation {
+    readonly attribute Element target;
+    readonly attribute long broadcastWidth;
+    readonly attribute long broadcastHeight;
+    boolean isActive();
+};
diff --git a/dom/webidl/moz.build b/dom/webidl/moz.build
index fd0ac8317..aeab80149 100644
--- a/dom/webidl/moz.build
+++ b/dom/webidl/moz.build
@@ -365,6 +365,7 @@ WEBIDL_FILES = [
     'Range.webidl',
     'Rect.webidl',
     'Request.webidl',
+    'ResizeObserver.webidl',
     'Response.webidl',
     'RGBColor.webidl',
     'RTCStatsReport.webidl',
diff --git a/layout/base/nsPresShell.cpp b/layout/base/nsPresShell.cpp
index e8670ff3b..de3dc1a25 100644
--- a/layout/base/nsPresShell.cpp
+++ b/layout/base/nsPresShell.cpp
@@ -9060,6 +9060,11 @@ PresShell::DidDoReflow(bool aInterruptible)
     docShell->NotifyReflowObservers(aInterruptible, mLastReflowStart, now);
   }
 
+  // Notify resize observers on reflow.
+  if (!mPresContext->HasPendingInterrupt()) {
+    mDocument->ScheduleResizeObserversNotification();
+  }
+
   if (sSynthMouseMove) {
     SynthesizeMouseMove(false);
   }
diff --git a/modules/libpref/init/all.js b/modules/libpref/init/all.js
index 1f0b28817..ceb27ede9 100644
--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -2653,6 +2653,9 @@ pref("layout.css.font-loading-api.enabled", true);
 // Should stray control characters be rendered visibly?
 pref("layout.css.control-characters.visible", false);
 
+// Is support for ResizeObservers enabled?
+pref("layout.css.resizeobserver.enabled", true);
+
 // pref for which side vertical scrollbars should be on
 // 0 = end-side in UI direction
 // 1 = end-side in document/content direction