third_party/WebKit/LayoutTests/fast/forms/min-content-form-controls.html

   1 <!DOCTYPE html>
   2 <style>
   3 .min-content {
   4     min-width: 10px;
   5     width: -webkit-min-content;
   6     width: -moz-min-content;
   7     width: -ie-min-content;
   8     width: -o-min-content;
   9     width: min-content;
  10 }
  11 </style>
  12 <p>The form controls of the same type below should be the same width.</p>
  13
  14 <input id="text-a" class="min-content"><br>
  15 <input id="text-b"><br>
  16
  17 <input id="file-a" type=file class="min-content"><br>
  18 <input id="file-b" type=file><br>
  19
  20 <input id="range-a" type=range class="min-content"><br>
  21 <input id="range-b" type=range><br>
  22
  23 <select id="select-a" class="min-content"><option>aaaaaaaaaaaaaaaaaaaaaaaaa</option></select><br>
  24 <select id="select-b"><option>aaaaaaaaaaaaaaaaaaaaaaaaa</option></select><br>
  25
  26 <select id="multiple-a" multiple class="min-content"><option>aaaaaaaaaaaaaaaaaaaaaaaaa</option></select><br>
  27 <select id="multiple-b" multiple><option>aaaaaaaaaaaaaaaaaaaaaaaaa</option></select><br>
  28
  29 <script src="../../resources/js-test.js"></script>
  30 <script>
  31 var ids = ['text', 'file', 'range', 'select', 'multiple'];
  32 ids.forEach(function(id) {
  33     shouldBe('document.getElementById("' + id + '-a").offsetWidth', 'document.getElementById("' + id + '-b").offsetWidth');
  34 });
  35 </script>