From aaee80e4563e0f505def4efd2393a1dda877096e Mon Sep 17 00:00:00 2001
From: Abed Islam <versatil@gmail.com>
Date: Wed, 3 Oct 2018 04:17:43 -0400
Subject: [PATCH] fix: Maintain img size regardless of its state via grid + svg
 was not working bc of lowercase b in viewbox

This was in part due to HTML linter. It only has error level severity, eslint style warn severity support is in the works,
see: https://github.com/htmlhint/HTMLHint/issues/279#issuecomment-417939741

The other part was XML vs HTML fragment, latter's attributes are always set as lowercase! Which broke the SVG! Reference for fix is found in inline comment in code.
---
 js/main.js      | 9 +++++++--
 restaurant.html | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/js/main.js b/js/main.js
index fe489be7d38..72a25577056 100644
--- a/js/main.js
+++ b/js/main.js
@@ -188,8 +188,13 @@ createRestaurantHTML = restaurant => {
   const imageWrapper = document.createElement('div');
   imageWrapper.className = 'restaurant-img-sizer';
 
-  const svgAspectRatio = document.createElement('svg');
-  svgAspectRatio.setAttribute('viewbox', '0 0 4 3');
+  // Create XML fragment, not HTML, otherwise setAttribute forces lowercase, though viewBox is case-sensitive
+  // @link https://stackoverflow.com/a/28734954/781824
+  const svgAspectRatio = document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'svg'
+  );
+  svgAspectRatio.setAttribute('viewBox', '0 0 4 3');
   imageWrapper.append(svgAspectRatio);
 
   const image = document.createElement('img');
diff --git a/restaurant.html b/restaurant.html
index dd60b96001e..e56fdbd78c5 100644
--- a/restaurant.html
+++ b/restaurant.html
@@ -40,7 +40,7 @@ <h2 id="restaurant-name"></h2>
       <!-- maintain aspect ratio of img, credit:
            @link https://codeburst.io/keeping-aspect-ratio-with-html-and-no-padding-tricks-40705656808b -->
       <div class="restaurant-img-sizer">
-        <svg viewbox="0 0 4 3"></svg>
+        <svg viewBox="0 0 4 3"></svg>
         <img alt="" id="restaurant-img">
       </div>
       <div id="restaurant-cuisine"></div>