feat(border-image generator): allow border-image-width: auto (mdn#183)

Author: Josh-Cena

tools/border-image-generator/index.html

@@ -90,7 +90,7 @@
 
         <!-- other-settings -->
         <div id="additional-properties" class="category">
-          <div class="title">additional-properties</div>
+          <div class="title">Additional properties</div>
           <div class="property">
             <div class="name">repeat-x</div>
             <div
@@ -152,27 +152,27 @@
             CSS Code <button type="button" id="copy-css">Click to Copy</button>
           </div>
           <div class="css-property">
-            <span class="name"> border-image-slice: </span>
-            <span id="out-border-slice" class="value"> </span>
+            <span class="name">border-image-slice: </span>
+            <span id="out-border-slice" class="value"> =</span>
           </div>
           <div class="css-property">
             <span class="name"> border-image-width: </span>
-            <span id="out-border-width" class="value"> </span>
+            <span id="out-border-width" class="value"></span>
           </div>
           <div class="css-property">
-            <span class="name"> border-image-outset: </span>
-            <span id="out-border-outset" class="value"> </span>
+            <span class="name">border-image-outset: </span>
+            <span id="out-border-outset" class="value"></span>
           </div>
           <div class="css-property">
-            <span class="name"> border-image-repeat: </span>
-            <span id="out-border-repeat" class="value"> </span>
+            <span class="name">border-image-repeat: </span>
+            <span id="out-border-repeat" class="value"></span>
           </div>
           <div class="css-property">
-            <span class="name"> border-image-source: </span>
-            <span id="out-border-source" class="value"> </span>
+            <span class="name">border-image-source: </span>
+            <span id="out-border-source" class="value"></span>
           </div>
           <div class="css-property">
-            <span class="name"> border-style: </span>
+            <span class="name">border-style: </span>
             <span id="out-border-style" class="value">solid;</span>
           </div>
         </div>

tools/border-image-generator/script.js

@@ -1064,8 +1064,8 @@ var BorderImage = (function BorderImage() {
     var preview_area;
     var dropdown_unit_options = [
       { "": "--", "%": "%" },
-      { px: "px", "%": "%", em: "em" },
-      { px: "px", em: "em" },
+      { px: "px", "%": "%", em: "em", "": "--", auto: "auto" },
+      { px: "px", em: "em", "": "--" },
     ];
 
     var border_slice = [];
@@ -1225,7 +1225,18 @@ var BorderImage = (function BorderImage() {
           else InputSliderManager.setMax(topic, 1000);
 
           border_width_units[id] = obj.value;
-          border_width[id] = border_width_values[id] + obj.value;
+          var thisInput = document.querySelector(".ui-input-slider[data-topic='" + topic + "']");
+          if (obj.value === "auto") {
+            thisInput.querySelector("input").style.visibility = "hidden";
+            thisInput.querySelector(".ui-input-slider-left").style.visibility = "hidden";
+            thisInput.querySelector(".ui-input-slider-right").style.visibility = "hidden";
+            border_width[id] = "auto";
+          } else {
+            thisInput.querySelector("input").style.visibility = "visible";
+            thisInput.querySelector(".ui-input-slider-left").style.visibility = "visible";
+            thisInput.querySelector(".ui-input-slider-right").style.visibility = "visible";
+            border_width[id] = border_width_values[id] + obj.value;
+          }
           updateBorderWidth();
         });
       };

tools/border-image-generator/styles.css

@@ -189,7 +189,6 @@
 
 .ui-dropdown-list {
   width: 100%;
-  height: 150px;
   max-height: 150px;
   margin: 0;
   padding: 0 0.3em;
@@ -842,29 +841,10 @@ body[data-move="Y"] {
 }
 
 #controls .border-repeat .ui-dropdown-list {
-  height: 8.2em;
   border-width: 1px;
   text-align: center;
 }
 
-/* border-image-slice */
-
-#border-slice-control .ui-dropdown-list {
-  height: 4.3em;
-}
-
-/* border-image-width */
-
-#border-width-control .ui-dropdown-list {
-  height: 6.2em;
-}
-
-/* border-image-outset */
-
-#border-outset-control .ui-dropdown-list {
-  height: 4.3em;
-}
-
 #additional-properties .property {
   width: 200px;
 }