mcdado/safari-many-inputs-sluggish-test-case.html

## safari-many-inputs-sluggish-test-case.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test case for huge amount of input fields on page</title>

    <!-- Bootstrap: Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Bootstrap: Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <h1>Hello, <span>world!</span></h1>

      <p>Generate list with this many inputs:</p>

      <div class="container">
        <div class="col-xs-6">
          <div class="input-group">
            <input id="set" type="text" class="form-control" placeholder="5000">
            <span class="input-group-btn">
              <button id="go" class="btn btn-default" type="button">GO!</button>
            </span>
          </div>
        </div>
      </div>

      <p id="result"></p>

      <div id="main-table" class="container">

      </div>
    </div>

    <script type="text/javascript">

    function generateRowsWithInputs(max) {

      var mainTable = document.getElementById('main-table');

      if (typeof max === 'undefined') {
        max = 5000;
      }

      // Create a superfluosly adorned DOM structure
      for (var i = 0; i < max; i += 1) {
        var row = document.createElement('div');
        var columnLabel = document.createElement('div');
        var columnField = document.createElement('div');
        var label = document.createTextNode('Field ' + i.toString());
        var field = document.createElement('input');

        row.className = 'row';
        columnLabel.className = 'col-xs-1 text-right';
        columnField.className = 'col-xs-11';
        field.type = 'text';
        field.style.width = '100%';

        columnLabel.appendChild(label);
        columnField.appendChild(field);
        row.appendChild(columnLabel);
        row.appendChild(columnField);
        mainTable.appendChild(row);
      }

      var result = document.getElementById('result');
      result.innerHTML = 'There are now ' + i.toString() + ' fields on this page';
    }

    var setField = document.getElementById('set');
    var goButton = document.getElementById('go');

    setField.addEventListener('keydown', function (event) {
      var _this = this;

      if (event.keyCode !== 13) {
        return;
      }

      if (_this.value !== '' && parseInt(_this.value, 10)) {
        generateRowsWithInputs(_this.value);
      }
    });

    goButton.addEventListener('click', function (event) {
      var _field = document.getElementById('set');

      if (_field.value !== '' && parseInt(_field.value, 10)) {
        generateRowsWithInputs(_field.value);
      } else if (_field.value === '') {
        generateRowsWithInputs();
      }
    });

    document.addEventListener('DOMContentLoaded', function () {
      var hello = document.querySelector('h1 span');
      hello.innerHTML = navigator.userAgent;
    });

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Test case for huge amount of input fields on page</title>

	<!-- Bootstrap: Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

	<!-- Bootstrap: Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
	</head>
	<body>
	<div class="container">
	<h1>Hello, <span>world!</span></h1>

	<p>Generate list with this many inputs:</p>

	<div class="container">
	<div class="col-xs-6">
	<div class="input-group">
	<input id="set" type="text" class="form-control" placeholder="5000">
	<span class="input-group-btn">
	<button id="go" class="btn btn-default" type="button">GO!</button>
	</span>
	</div>
	</div>
	</div>

	<p id="result"></p>

	<div id="main-table" class="container">

	</div>
	</div>

	<script type="text/javascript">

	function generateRowsWithInputs(max) {

	var mainTable = document.getElementById('main-table');

	if (typeof max === 'undefined') {
	max = 5000;
	}

	// Create a superfluosly adorned DOM structure
	for (var i = 0; i < max; i += 1) {
	var row = document.createElement('div');
	var columnLabel = document.createElement('div');
	var columnField = document.createElement('div');
	var label = document.createTextNode('Field ' + i.toString());
	var field = document.createElement('input');

	row.className = 'row';
	columnLabel.className = 'col-xs-1 text-right';
	columnField.className = 'col-xs-11';
	field.type = 'text';
	field.style.width = '100%';

	columnLabel.appendChild(label);
	columnField.appendChild(field);
	row.appendChild(columnLabel);
	row.appendChild(columnField);
	mainTable.appendChild(row);
	}

	var result = document.getElementById('result');
	result.innerHTML = 'There are now ' + i.toString() + ' fields on this page';
	}

	var setField = document.getElementById('set');
	var goButton = document.getElementById('go');

	setField.addEventListener('keydown', function (event) {
	var _this = this;

	if (event.keyCode !== 13) {
	return;
	}

	if (_this.value !== '' && parseInt(_this.value, 10)) {
	generateRowsWithInputs(_this.value);
	}
	});

	goButton.addEventListener('click', function (event) {
	var _field = document.getElementById('set');

	if (_field.value !== '' && parseInt(_field.value, 10)) {
	generateRowsWithInputs(_field.value);
	} else if (_field.value === '') {
	generateRowsWithInputs();
	}
	});

	document.addEventListener('DOMContentLoaded', function () {
	var hello = document.querySelector('h1 span');
	hello.innerHTML = navigator.userAgent;
	});

	</script>
	</body>
	</html>