text: import { WORKER_OFFSCREEN_CANVAS } from './has.js';
  /**
   * @module ol/dom
   */
  //FIXME Move this function to the canvas module
  /**
   * Create an html canvas element and returns its 2d context.
   * @param {number=} opt_width Canvas width.
   * @param {number=} opt_height Canvas height.
   * @param {Array<HTMLCanvasElement>=} opt_canvasPool Canvas pool to take existing canvas from.
   * @return {CanvasRenderingContext2D} The context.
   */
  export function createCanvasContext2D(opt_width, opt_height, opt_canvasPool) {
      var canvas = opt_canvasPool && opt_canvasPool.length
          ? opt_canvasPool.shift()
          : WORKER_OFFSCREEN_CANVAS
              ? new OffscreenCanvas(opt_width || 300, opt_height || 300)
              : document.createElement('canvas');
      if (opt_width) {
          canvas.width = opt_width;
      }
      if (opt_height) {
          canvas.height = opt_height;
      }
      //FIXME Allow OffscreenCanvasRenderingContext2D as return type
      return /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d'));
  }
  /**
   * Get the current computed width for the given element including margin,
   * padding and border.
   * Equivalent to jQuery's `$(el).outerWidth(true)`.
   * @param {!HTMLElement} element Element.
   * @return {number} The width.
   */
  export function outerWidth(element) {
      var width = element.offsetWidth;
      var style = getComputedStyle(element);
      width += parseInt(style.marginLeft, 10) + parseInt(style.marginRight, 10);
      return width;
  }
  /**
   * Get the current computed height for the given element including margin,
   * padding and border.
   * Equivalent to jQuery's `$(el).outerHeight(true)`.
   * @param {!HTMLElement} element Element.
   * @return {number} The height.
   */
  export function outerHeight(element) {
      var height = element.offsetHeight;
      var style = getComputedStyle(element);
      height += parseInt(style.marginTop, 10) + parseInt(style.marginBottom, 10);
      return height;
  }
  /**
   * @param {Node} newNode Node to replace old node
   * @param {Node} oldNode The node to be replaced
   */
  export function replaceNode(newNode, oldNode) {
      var parent = oldNode.parentNode;
      if (parent) {
          parent.replaceChild(newNode, oldNode);
      }
  }
  /**
   * @param {Node} node The node to remove.
   * @returns {Node} The node that was removed or null.
   */
  export function removeNode(node) {
      return node && node.parentNode ? node.parentNode.removeChild(node) : null;
  }
  /**
   * @param {Node} node The node to remove the children from.
   */
  export function removeChildren(node) {
      while (node.lastChild) {
          node.removeChild(node.lastChild);
      }
  }
  /**
   * Transform the children of a parent node so they match the
   * provided list of children.  This function aims to efficiently
   * remove, add, and reorder child nodes while maintaining a simple
   * implementation (it is not guaranteed to minimize DOM operations).
   * @param {Node} node The parent node whose children need reworking.
   * @param {Array<Node>} children The desired children.
   */
  export function replaceChildren(node, children) {
      var oldChildren = node.childNodes;
      for (var i = 0; true; ++i) {
          var oldChild = oldChildren[i];
          var newChild = children[i];
          // check if our work is done
          if (!oldChild && !newChild) {
              break;
          }
          // check if children match
          if (oldChild === newChild) {
              continue;
          }
          // check if a new child needs to be added
          if (!oldChild) {
              node.appendChild(newChild);
              continue;
          }
          // check if an old child needs to be removed
          if (!newChild) {
              node.removeChild(oldChild);
              --i;
              continue;
          }
          // reorder
          node.insertBefore(newChild, oldChild);
      }
  }
  //# sourceMappingURL=dom.js.map