<!DOCTYPE html>
<meta charset=utf-8>
  <head>
    <title>Chrome whitespace bug</title>
    <link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org">
    <link rel="help" href="https://crbug.com/1309014">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <script src="/resources/testdriver.js"></script>
    <script src="/resources/testdriver-vendor.js"></script>
    <style>
      [data-foo] { color: red; }
      div input { color: inherit; }
    </style>
  </head>
  <body>
    <div id="container" data-foo="foo"><input id="input1"></input></div>
    <script>
      async_test(t => {
        let container = document.getElementById('container');
        let input = document.getElementById('input1');
        input.onkeypress = function(e) {
          container.removeAttribute('data-foo');
          input.style.display = 'block';
        };
        test_driver.send_keys(input, "a b")
          .then(t.step_func(() => {
             assert_equals(input.value, "a b");
             t.done();
          }));
      }, "whitespace should not be eaten after parent style recalculation");
    </script>
  </body>
</html>
