Does your browser support flexbox on fieldset elements? Here's a test for that

flexbox-fieldset-supported.js

// 28 June 2019
// 18 July 2019: full test suite with results moved.
// see How broadly does your browser support flexbox? https://gist.github.com/dfkaye/0c8510d06119e2dc142a29f1717ca0bf

// Does your browser support flexbox on fieldset elements?
// Chrome doesn't, according to Eric Meyer tweet today:
// see https://twitter.com/meyerweb/status/1144656888707125248

// We ran into this a few months back. Here's a supports test for it.

function flexboxFieldsetSupported(/* tagName */) {

  // Use horizontal flow, centered, 3 inline spans
  var style = 'display: flex; flex-flow: row wrap; justify-content: center';
  var span = '<span style="flex-grow: 1; flex-shrink: 1; outline: 1px solid aqua; text-align: center">p</span>'
  var html = span.concat(span, span);

  var flex = document.createElement('fieldset');
  flex.setAttribute('style', style);
  flex.innerHTML = html;

  var block = flex.cloneNode(true);
  block.style.display = 'block';

  document.body.appendChild(block);
  document.body.appendChild(flex);

  var blockLeft = [].slice.call(block.children, 1).every(function(node, i, arr) {
    return i > 0 ? node.offsetLeft > arr[i - 1].offsetLeft : true;
  });

  var flexLeft = [].slice.call(flex.children, 1).every(function(node, i, arr) {
    return i > 0 ? node.offsetLeft > arr[i - 1].offsetLeft : true;
  });

  return ({ block: blockLeft, flex: flexLeft });
}

/* test it out */

var test = flexboxFieldsetSupported()

console.log(test.block) // true for browsers supporting flexbox on div
console.log(test.flex) // true for browsers supporting flexbox on fieldsets
console.log(test.flex === test.block) // oh yeah