<!DOCTYPE html>

<html>
<head>
  <script type="text/javascript" charset="utf-8">
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    function sendKey(element, key) {
        if (window.testRunner) {
            key = key.substr(0,1).toLowerCase() + key.substr(1); // lowercase 1st letter for eventSender
            eventSender.keyDown(key);
        } else {
            // Note that initKeyboardEvent is broken:
            // https://bugs.webkit.org/show_bug.cgi?id=16735
            var event = document.createEvent("KeyboardEvents");
            event.initKeyboardEvent("keydown", true, true, document.defaultView, key, 0,
                                    false, false, false, false, false);
            element.dispatchEvent(event);
        }
    }

    function changeStyle()
    {
      var testInput = document.getElementById('input');
      testInput.focus();

      sendKey(testInput, 'b');
      sendKey(testInput, 'e');
      sendKey(testInput, 'f');
      sendKey(testInput, 'o');
      sendKey(testInput, 'r');
      sendKey(testInput, 'e');

      // make a layout happen
      var containerDiv = document.getElementById('container')
      containerDiv.style.display = 'inline';
      
      window.setTimeout(function() {
        sendKey(testInput, 'a');
        sendKey(testInput, 'f');
        sendKey(testInput, 't');
        sendKey(testInput, 'e');
        sendKey(testInput, 'r');

        document.getElementById('result').innerText = testInput.value;
        if (window.testRunner)
            testRunner.notifyDone();
      }, 0);
    }
    
    window.addEventListener('load', changeStyle, false);
  </script>
</head>
<body>
  <p>This test only works in DRT. You should see 'beforeafter' in the text field.</p>
  <div id="container">
    <input id="input" type="text" value="">
  </div>

  <div id="result"></div>
</body>
</html>