From 60db399a8da126b7cdb516885eefdf9ce9ecd78d Mon Sep 17 00:00:00 2001
From: Sam El-Husseini <sam.elhusseini@gmail.com>
Date: Mon, 24 Feb 2020 17:36:01 -0800
Subject: [PATCH] Use flex to compute measure font metrics (#3714)

* Use flexbox to compute font dimensions instead of inline-block
---
 core/utils/dom.js | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/core/utils/dom.js b/core/utils/dom.js
index 2d470a2eb..c68f98778 100644
--- a/core/utils/dom.js
+++ b/core/utils/dom.js
@@ -347,25 +347,24 @@ Blockly.utils.dom.measureFontMetrics = function(text, fontSize, fontWeight,
     fontFamily) {
 
   var span = document.createElement('span');
-  span.setAttribute('style', 'display: inline-block;');
   span.style.font = fontWeight + ' ' + fontSize + ' ' + fontFamily;
   span.textContent = text;
 
   var block = document.createElement('div');
-  block.setAttribute('style',
-      'display: inline-block; width: 1px; height: 0px;');
-  
+  block.style.width = '1px';
+  block.style.height = '0px';
+
   var div = document.createElement('div');
-  div.setAttribute('style', 'line-height: 0;');
+  div.setAttribute('style', 'position: fixed; top: 0; left: 0; display: flex;');
   div.appendChild(span);
   div.appendChild(block);
 
   document.body.appendChild(div);
   try {
     var result = {};
-    block.style.verticalAlign = 'baseline';
+    div.style.alignItems = 'baseline';
     result.baseline = block.offsetTop - span.offsetTop;
-    block.style.verticalAlign = 'bottom';
+    div.style.alignItems = 'flex-end';
     result.height = block.offsetTop - span.offsetTop;
   } finally {
     document.body.removeChild(div);