<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
.container {
  width:200px;
  background-color:#eee;
}
.spacer {
  height:10px; background-color:black;
}
.nowrap {
  white-space: nowrap;
}
</style>
<body>
<p>Spaces in nowrap shold not break when the text before it fits but the space overflows.</p>
<template id=template>
  <div class=container>
    <img class=spacer />
    <span class=nowrap><span>foo</span> <span>bar</span></span>
  </div>
</template>
<script>
run();
function run() {
  let tests = [];
  for (let width = 170; width < 180; width++) {
    let element = template.content.children[0].cloneNode(true);
    let spacer = element.querySelector('img');
    spacer.style.width = width + 'px';
    document.body.appendChild(element);
    tests.push({width: width, element: element});
  }
  let results = [];
  for (let t of tests) {
    test(() => {
      let nowrap = t.element.querySelector('.nowrap');
      let child1 = nowrap.children[0];
      let child2 = nowrap.children[1];
      assert_equals(child1.offsetTop, child2.offsetTop);
    }, `width: ${t.width}`);
  }
}
</script>
</body>