wpt / css / css-text / white-space / white-space-intrinsic-size-021.html

Status: FAIL | Duration: 6ms | Subtests: 130/192 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (130/192)

Data from commit:
708eb61 WPT runner: support mismatch reftests and multiple rel=match links (#665) (2026-08-09)

SubtestStatusMessage
.container > div 1PASS
.container > div 2PASS
.container > div 3PASS
.container > div 4PASS
.container > div 5PASS
.container > div 6PASS
.container > div 7PASS
.container > div 8PASS
.container > div 9PASS
.container > div 10PASS
.container > div 11FAILassert_equals: data-expected-client-height expected 10 got 0
.container > div 12FAILassert_equals: data-expected-client-width expected 10 got 0 assert_equals: data-expected-client-height expected 10 got 0
.container > div 13PASS
.container > div 14PASS
.container > div 15FAILassert_equals: data-expected-client-width expected 10 got 0 assert_equals: data-expected-client-height expected 10 got 0
.container > div 16FAILassert_equals: data-expected-client-width expected 10 got 0 assert_equals: data-expected-client-height expected 10 got 0
.container > div 17PASS
.container > div 18PASS
.container > div 19FAILassert_equals: data-expected-client-height expected 10 got 0
.container > div 20FAILassert_equals: data-expected-client-width expected 20 got 0 assert_equals: data-expected-client-height expected 10 got 0
.container > div 21PASS
.container > div 22PASS
.container > div 23FAILassert_equals: data-expected-client-width expected 10 got 0 assert_equals: data-expected-client-height expected 20 got 0
.container > div 24FAILassert_equals: data-expected-client-width expected 20 got 0 assert_equals: data-expected-client-height expected 10 got 0
.container > div 25PASS
.container > div 26PASS
.container > div 27PASS
.container > div 28PASS
.container > div 29PASS
.container > div 30PASS
.container > div 31PASS
.container > div 32PASS
.container > div 33PASS
.container > div 34PASS
.container > div 35PASS
.container > div 36PASS
.container > div 37FAILassert_equals: data-expected-client-height expected 10 got 20
.container > div 38FAILassert_equals: data-expected-client-width expected 10 got 20
.container > div 39PASS
.container > div 40PASS
.container > div 41PASS
.container > div 42PASS
.container > div 43PASS
.container > div 44PASS
.container > div 45FAILassert_equals: data-expected-client-height expected 10 got 20
.container > div 46FAILassert_equals: data-expected-client-width expected 10 got 30
.container > div 47FAILassert_equals: data-expected-client-height expected 30 got 20
.container > div 48PASS
.container > div 49PASS
.container > div 50PASS
.container > div 51FAILassert_equals: data-expected-client-height expected 10 got 20
.container > div 52FAILassert_equals: data-expected-client-width expected 20 got 10
.container > div 53FAILassert_equals: data-expected-client-height expected 10 got 20
.container > div 54PASS
.container > div 55FAILassert_equals: data-expected-client-width expected 20 got 10 assert_equals: data-expected-client-height expected 10 got 20
.container > div 56FAILassert_equals: data-expected-client-width expected 20 got 10
.container > div 57PASS
.container > div 58PASS
.container > div 59FAILassert_equals: data-expected-client-width expected 10 got 20 assert_equals: data-expected-client-height expected 10 got 20
.container > div 60FAILassert_equals: data-expected-client-width expected 30 got 20
.container > div 61FAILassert_equals: data-expected-client-width expected 10 got 20 assert_equals: data-expected-client-height expected 10 got 20
.container > div 62FAILassert_equals: data-expected-client-width expected 10 got 20
.container > div 63PASS
.container > div 64FAILassert_equals: data-expected-client-width expected 30 got 20
.container > div 65PASS
.container > div 66PASS
.container > div 67PASS
.container > div 68PASS
.container > div 69PASS
.container > div 70PASS
.container > div 71FAILassert_equals: data-expected-client-width expected 20 got 10
.container > div 72PASS
.container > div 73PASS
.container > div 74PASS
.container > div 75FAILassert_equals: data-expected-client-width expected 10 got 20
.container > div 76PASS
.container > div 77FAILassert_equals: data-expected-client-width expected 10 got 20
.container > div 78FAILassert_equals: data-expected-client-width expected 30 got 40
.container > div 79PASS
.container > div 80PASS
.container > div 81FAILassert_equals: data-expected-client-width expected 10 got 20
.container > div 82FAILassert_equals: data-expected-client-width expected 10 got 20
.container > div 83FAILassert_equals: data-expected-client-width expected 10 got 20
.container > div 84PASS
.container > div 85FAILassert_equals: data-expected-client-width expected 10 got 20
.container > div 86FAILassert_equals: data-expected-client-width expected 10 got 20
.container > div 87PASS
.container > div 88PASS
.container > div 89PASS
.container > div 90PASS
.container > div 91PASS
.container > div 92PASS
.container > div 93PASS
.container > div 94PASS
.container > div 95FAILassert_equals: data-expected-client-width expected 20 got 10
.container > div 96PASS
.container > div 97PASS
.container > div 98PASS
.container > div 99PASS
.container > div 100PASS
.container > div 101PASS
.container > div 102PASS
.container > div 103PASS
.container > div 104PASS
.container > div 105PASS
.container > div 106PASS
.container > div 107FAILassert_equals: data-expected-client-width expected 10 got 0 assert_equals: data-expected-client-height expected 10 got 0
.container > div 108FAILassert_equals: data-expected-client-width expected 10 got 0 assert_equals: data-expected-client-height expected 10 got 0
.container > div 109PASS
.container > div 110PASS
.container > div 111FAILassert_equals: data-expected-client-width expected 10 got 0 assert_equals: data-expected-client-height expected 10 got 0
.container > div 112FAILassert_equals: data-expected-client-width expected 10 got 0 assert_equals: data-expected-client-height expected 10 got 0
.container > div 113PASS
.container > div 114PASS
.container > div 115FAILassert_equals: data-expected-client-width expected 20 got 0 assert_equals: data-expected-client-height expected 10 got 0
.container > div 116FAILassert_equals: data-expected-client-width expected 20 got 0 assert_equals: data-expected-client-height expected 10 got 0
.container > div 117PASS
.container > div 118PASS
.container > div 119FAILassert_equals: data-expected-client-width expected 20 got 0 assert_equals: data-expected-client-height expected 10 got 0
.container > div 120FAILassert_equals: data-expected-client-width expected 20 got 0 assert_equals: data-expected-client-height expected 10 got 0
.container > div 121PASS
.container > div 122PASS
.container > div 123PASS
.container > div 124PASS
.container > div 125PASS
.container > div 126PASS
.container > div 127PASS
.container > div 128PASS
.container > div 129PASS
.container > div 130PASS
.container > div 131PASS
.container > div 132PASS
.container > div 133FAILassert_equals: data-expected-client-width expected 10 got 20
.container > div 134FAILassert_equals: data-expected-client-width expected 10 got 20
.container > div 135PASS
.container > div 136PASS
.container > div 137PASS
.container > div 138PASS
.container > div 139PASS
.container > div 140PASS
.container > div 141FAILassert_equals: data-expected-client-width expected 10 got 30
.container > div 142FAILassert_equals: data-expected-client-width expected 10 got 30
.container > div 143PASS
.container > div 144PASS
.container > div 145PASS
.container > div 146PASS
.container > div 147FAILassert_equals: data-expected-client-width expected 20 got 10 assert_equals: data-expected-client-height expected 10 got 20
.container > div 148FAILassert_equals: data-expected-client-width expected 20 got 10
.container > div 149FAILassert_equals: data-expected-client-height expected 10 got 20
.container > div 150PASS
.container > div 151FAILassert_equals: data-expected-client-width expected 20 got 10 assert_equals: data-expected-client-height expected 10 got 20
.container > div 152FAILassert_equals: data-expected-client-width expected 20 got 10
.container > div 153PASS
.container > div 154PASS
.container > div 155FAILassert_equals: data-expected-client-width expected 30 got 20 assert_equals: data-expected-client-height expected 10 got 20
.container > div 156FAILassert_equals: data-expected-client-width expected 30 got 20
.container > div 157FAILassert_equals: data-expected-client-width expected 10 got 20 assert_equals: data-expected-client-height expected 10 got 20
.container > div 158FAILassert_equals: data-expected-client-width expected 10 got 20
.container > div 159FAILassert_equals: data-expected-client-width expected 30 got 20 assert_equals: data-expected-client-height expected 10 got 20
.container > div 160FAILassert_equals: data-expected-client-width expected 30 got 20
.container > div 161PASS
.container > div 162PASS
.container > div 163PASS
.container > div 164PASS
.container > div 165PASS
.container > div 166PASS
.container > div 167PASS
.container > div 168PASS
.container > div 169PASS
.container > div 170PASS
.container > div 171PASS
.container > div 172PASS
.container > div 173FAILassert_equals: data-expected-client-width expected 30 got 40
.container > div 174FAILassert_equals: data-expected-client-width expected 30 got 40
.container > div 175PASS
.container > div 176PASS
.container > div 177FAILassert_equals: data-expected-client-width expected 10 got 20
.container > div 178FAILassert_equals: data-expected-client-width expected 10 got 20
.container > div 179PASS
.container > div 180PASS
.container > div 181FAILassert_equals: data-expected-client-width expected 10 got 20
.container > div 182FAILassert_equals: data-expected-client-width expected 10 got 20
.container > div 183PASS
.container > div 184PASS
.container > div 185PASS
.container > div 186PASS
.container > div 187PASS
.container > div 188PASS
.container > div 189PASS
.container > div 190PASS
.container > div 191PASS
.container > div 192PASS

/css/css-text/white-space/white-space-intrinsic-size-021.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text level 4 Test: intrinsic sizes of block containers with various 'white-space' values</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-text-4/#white-space-property">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">

<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.container {
  font: 10px / 1 Ahem;
  color: gray;
}
.container.narrow {
  float: left;
  width: 0;
  margin-right: 50px;
}
.container.wide {
  width: 800px;
}
.container > div {
  display: inline-block;
  border: solid black;
}
hr {
  clear: both;
}
x-br::before {
  content: "\a";
  white-space: preserve-breaks;
}
.collapse.wrap {
  white-space: normal;
}
.collapse.nowrap {
  white-space: nowrap;
}
.preserve.wrap {
  white-space: pre-wrap;
}
.preserve.nowrap {
  white-space: pre;
}
.preserve-breaks.wrap {
  white-space: preserve-breaks;
}
.preserve-breaks.nowrap {
  white-space: preserve-breaks nowrap;
}
.break-spaces.wrap {
  white-space: break-spaces;
}
.break-spaces.nowrap {
  white-space: break-spaces nowrap;
}
</style>

<div class="container narrow">
  <div class="collapse wrap"          data-expected-client-width= "0" data-expected-client-height= "0"></div>
  <div class="collapse nowrap"        data-expected-client-width= "0" data-expected-client-height= "0"></div>
  <div class="preserve wrap"          data-expected-client-width= "0" data-expected-client-height= "0"></div>
  <div class="preserve nowrap"        data-expected-client-width= "0" data-expected-client-height= "0"></div>
  <div class="preserve-breaks wrap"   data-expected-client-width= "0" data-expected-client-height= "0"></div>
  <div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
  <div class="break-spaces wrap"      data-expected-client-width= "0" data-expected-client-height= "0"></div>
  <div class="break-spaces nowrap"    data-expected-client-width= "0" data-expected-client-height= "0"></div>
</div>
<div class="container narrow">
  <div class="collapse wrap"          data-expected-client-width= "0" data-expected-client-height= "0"> </div>
  <div class="collapse nowrap"        data-expected-client-width= "0" data-expected-client-height= "0"> </div>
  <div class="preserve wrap"          data-expected-client-width= "0" data-expected-client-height="10"> </div>
  <div class="preserve nowrap"        data-expected-client-width="10" data-expected-client-height="10"> </div>
  <div class="preserve-breaks wrap"   data-expected-client-width= "0" data-expected-client-height= "0"> </div>
  <div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
  <div class="break-spaces wrap"      data-expected-client-width="10" data-expected-client-height="10"> </div>
  <div class="break-spaces nowrap"    data-expected-client-width="10" data-expected-client-height="10"> </div>
</div>
<div class="container narrow">
  <div class="collapse wrap"          data-expected-client-width= "0" data-expected-client-height= "0">  </div>
  <div class="collapse nowrap"        data-expected-client-width= "0" data-expected-client-height= "0">  </div>
  <div class="preserve wrap"          data-expected-client-width= "0" data-expected-client-height="10">  </div>
  <div class="preserve nowrap"        data-expected-client-width="20" data-expected-client-height="10">  </div>
  <div class="preserve-breaks wrap"   data-expected-client-width= "0" data-expected-client-height= "0">  </div>
  <div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0">  </div>
  <div class="break-spaces wrap"      data-expected-client-width="10" data-expected-client-height="20">  </div>
  <div class="break-spaces nowrap"    data-expected-client-width="20" data-expected-client-height="10">  </div>
</div>
<div class="container narrow">
  <div class="collapse wrap"          data-expected-client-width="10" data-expected-client-height="10">X</div>
  <div class="collapse nowrap"        data-expected-client-width="10" data-expected-client-height="10">X</div>
  <div class="preserve wrap"          data-expected-client-width="10" data-expected-client-height="10">X</div>
  <div class="preserve nowrap"        data-expected-client-width="10" data-expected-client-height="10">X</div>
  <div class="preserve-breaks wrap"   data-expected-client-width="10" data-expected-client-height="10">X</div>
  <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
  <div class="break-spaces wrap"      data-expected-client-width="10" data-expected-client-height="10">X</div>
  <div class="break-spaces nowrap"    data-expected-client-width="10" data-expected-client-height="10">X</div>
</div>
<div class="container narrow">
  <div class="collapse wrap"          data-expected-client-width="10" data-expected-client-height="10"> X</div>
  <div class="collapse nowrap"        data-expected-client-width="10" data-expected-client-height="10"> X</div>
  <div class="preserve wrap"          data-expected-client-width="10" data-expected-client-height="20"> X</div>
  <div class="preserve nowrap"        data-expected-client-width="20" data-expected-client-height="10"> X</div>
  <div class="preserve-breaks wrap"   data-expected-client-width="10" data-expected-client-height="10"> X</div>
  <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
  <div class="break-spaces wrap"      data-expected-client-width="10" data-expected-client-height="20"> X</div>
  <div class="break-spaces nowrap"    data-expected-client-width="20" data-expected-client-height="10"> X</div>
</div>
<div class="container narrow">
  <div class="collapse wrap"          data-expected-client-width="10" data-expected-client-height="10">  X</div>
  <div class="collapse nowrap"        data-expected-client-width="10" data-expected-client-height="10">  X</div>
  <div class="preserve wrap"          data-expected-client-width="10" data-expected-client-height="20">  X</div>
  <div class="preserve nowrap"        data-expected-client-width="30" data-expected-client-height="10">  X</div>
  <div class="preserve-breaks wrap"   data-expected-client-width="10" data-expected-client-height="10">  X</div>
  <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">  X</div>
  <div class="break-spaces wrap"      data-expected-client-width="10" data-expected-client-height="30">  X</div>
  <div class="break-spaces nowrap"    data-expected-client-width="30" data-expected-client-height="10">  X</div>
</div>
<div class="container narrow">
  <div class="collapse wrap"          data-expected-client-width="10" data-expected-client-height="10">X </div>
  <div class="collapse nowrap"        data-expected-client-width="10" data-expected-client-height="10">X </div>
  <div class="preserve wrap"          data-expected-client-width="10" data-expected-client-height="10">X </div>
  <div class="preserve nowrap"        data-expected-client-width="20" data-expected-client-height="10">X </div>
  <div class="preserve-breaks wrap"   data-expected-client-width="10" data-expected-client-height="10">X </div>
  <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
  <div class="break-spaces wrap"      data-expected-client-width="20" data-expected-client-height="10">X </div>
  <div class="break-spaces nowrap"    data-expected-client-width="20" data-expected-client-height="10">X </div>
</div>
<div class="container narrow">
  <div class="collapse wrap"          data-expected-client-width="10" data-expected-client-height="10">X  </div>
  <div class="collapse nowrap"        data-expected-client-width="10" data-expected-client-height="10">X  </div>
  <div class="preserve wrap"          data-expected-client-width="10" data-expected-client-height="10">X  </div>
  <div class="preserve nowrap"        data-expected-client-width="30" data-expected-client-height="10">X  </div>
  <div class="preserve-breaks wrap"   data-expected-client-width="10" data-expected-client-height="10">X  </div>
  <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X  </div>
  <div class="break-spaces wrap"      data-expected-client-width="20" data-expected-client-height="20">X  </div>
  <div class="break-spaces nowrap"    data-expected-client-width="30" data-expected-client-height="10">X  </div>
</div>
<div class="container narrow">
  <div class="collapse wrap"          data-expected-client-width="10" data-expected-client-height="20">X É</div>
  <div class="collapse nowrap"        data-expected-client-width="30" data-expected-client-height="10">X É</div>
  <div class="preserve wrap"          data-expected-client-width="10" data-expected-client-height="20">X É</div>
  <div class="preserve nowrap"        data-expected-client-width="30" data-expected-client-height="10">X É</div>
  <div class="preserve-breaks wrap"   data-expected-client-width="10" data-expected-client-height="20">X É</div>
  <div class="preserve-breaks nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
  <div class="break-spaces wrap"      data-expected-client-width="20" data-expected-client-height="20">X É</div>
  <div class="break-spaces nowrap"    data-expected-client-width="30" data-expected-client-height="10">X É</div>
</div>
<div class="container narrow">
  <div class="collapse wrap"          data-expected-client-width="10" data-expected-client-height="20">X  É</div>
  <div class="collapse nowrap"        data-expected-client-width="30" data-expected-client-height="10">X  É</div>
  <div class="preserve wrap"          data-expected-client-width="10" data-expected-client-height="20">X  É</div>
  <div class="preserve nowrap"        data-expected-client-width="40" data-expected-client-height="10">X  É</div>
  <div class="preserve-breaks wrap"   data-expected-client-width="10" data-expected-client-height="20">X  É</div>
  <div class="preserve-breaks nowrap" data-expected-client-width="30" data-expected-client-height="10">X  É</div>
  <div class="break-spaces wrap"      data-expected-client-width="20" data-expected-client-height="20">X  É</div>
  <div class="break-spaces nowrap"    data-expected-client-width="40" data-expected-client-height="10">X  É</div>
</div>
<div class="container narrow">
  <div class="collapse wrap"          data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div>
  <div class="collapse nowrap"        data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div>
  <div class="preserve wrap"          data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div>
  <div class="preserve nowrap"        data-expected-client-width="20" data-expected-client-height="20">X <x-br></x-br>É</div>
  <div class="preserve-breaks wrap"   data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div>
  <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div>
  <div class="break-spaces wrap"      data-expected-client-width="20" data-expected-client-height="20">X <x-br></x-br>É</div>
  <div class="break-spaces nowrap"    data-expected-client-width="20" data-expected-client-height="20">X <x-br></x-br>É</div>
</div>
<div class="container narrow">
  <div class="collapse wrap"          data-expected-client-width="10" data-expected-client-height="20">X <a>É</a></div>
  <div class="collapse nowrap"        data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div>
  <div class="preserve wrap"          data-expected-client-width="10" data-expected-client-height="20">X <a>É</a></div>
  <div class="preserve nowrap"        data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div>
  <div class="preserve-breaks wrap"   data-expected-client-width="10" data-expected-client-height="20">X <a>É</a></div>
  <div class="preserve-breaks nowrap" data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div>
  <div class="break-spaces wrap"      data-expected-client-width="20" data-expected-client-height="20">X <a>É</a></div>
  <div class="break-spaces nowrap"    data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div>
</div>

<hr>

<div class="container wide">
  <div class="collapse wrap"          data-expected-client-width= "0" data-expected-client-height= "0"></div>
  <div class="collapse nowrap"        data-expected-client-width= "0" data-expected-client-height= "0"></div>
  <div class="preserve wrap"          data-expected-client-width= "0" data-expected-client-height= "0"></div>
  <div class="preserve nowrap"        data-expected-client-width= "0" data-expected-client-height= "0"></div>
  <div class="preserve-breaks wrap"   data-expected-client-width= "0" data-expected-client-height= "0"></div>
  <div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
  <div class="break-spaces wrap"      data-expected-client-width= "0" data-expected-client-height= "0"></div>
  <div class="break-spaces nowrap"    data-expected-client-width= "0" data-expected-client-height= "0"></div>
</div>
<div class="container wide">
  <div class="collapse wrap"          data-expected-client-width= "0" data-expected-client-height= "0"> </div>
  <div class="collapse nowrap"        data-expected-client-width= "0" data-expected-client-height= "0"> </div>
  <div class="preserve wrap"          data-expected-client-width="10" data-expected-client-height="10"> </div>
  <div class="preserve nowrap"        data-expected-client-width="10" data-expected-client-height="10"> </div>
  <div class="preserve-breaks wrap"   data-expected-client-width= "0" data-expected-client-height= "0"> </div>
  <div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
  <div class="break-spaces wrap"      data-expected-client-width="10" data-expected-client-height="10"> </div>
  <div class="break-spaces nowrap"    data-expected-client-width="10" data-expected-client-height="10"> </div>
</div>
<div class="container wide">
  <div class="collapse wrap"          data-expected-client-width= "0" data-expected-client-height= "0">  </div>
  <div class="collapse nowrap"        data-expected-client-width= "0" data-expected-client-height= "0">  </div>
  <div class="preserve wrap"          data-expected-client-width="20" data-expected-client-height="10">  </div>
  <div class="preserve nowrap"        data-expected-client-width="20" data-expected-client-height="10">  </div>
  <div class="preserve-breaks wrap"   data-expected-client-width= "0" data-expected-client-height= "0">  </div>
  <div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0">  </div>
  <div class="break-spaces wrap"      data-expected-client-width="20" data-expected-client-height="10">  </div>
  <div class="break-spaces nowrap"    data-expected-client-width="20" data-expected-client-height="10">  </div>
</div>
<div class="container wide">
  <div class="collapse wrap"          data-expected-client-width="10" data-expected-client-height="10">X</div>
  <div class="collapse nowrap"        data-expected-client-width="10" data-expected-client-height="10">X</div>
  <div class="preserve wrap"          data-expected-client-width="10" data-expected-client-height="10">X</div>
  <div class="preserve nowrap"        data-expected-client-width="10" data-expected-client-height="10">X</div>
  <div class="preserve-breaks wrap"   data-expected-client-width="10" data-expected-client-height="10">X</div>
  <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
  <div class="break-spaces wrap"      data-expected-client-width="10" data-expected-client-height="10">X</div>
  <div class="break-spaces nowrap"    data-expected-client-width="10" data-expected-client-height="10">X</div>
</div>
<div class="container wide">
  <div class="collapse wrap"          data-expected-client-width="10" data-expected-client-height="10"> X</div>
  <div class="collapse nowrap"        data-expected-client-width="10" data-expected-client-height="10"> X</div>
  <div class="preserve wrap"          data-expected-client-width="20" data-expected-client-height="10"> X</div>
  <div class="preserve nowrap"        data-expected-client-width="20" data-expected-client-height="10"> X</div>
  <div class="preserve-breaks wrap"   data-expected-client-width="10" data-expected-client-height="10"> X</div>
  <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
  <div class="break-spaces wrap"      data-expected-client-width="20" data-expected-client-height="10"> X</div>
  <div class="break-spaces nowrap"    data-expected-client-width="20" data-expected-client-height="10"> X</div>
</div>
<div class="container wide">
  <div class="collapse wrap"          data-expected-client-width="10" data-expected-client-height="10">  X</div>
  <div class="collapse nowrap"        data-expected-client-width="10" data-expected-client-height="10">  X</div>
  <div class="preserve wrap"          data-expected-client-width="30" data-expected-client-height="10">  X</div>
  <div class="preserve nowrap"        data-expected-client-width="30" data-expected-client-height="10">  X</div>
  <div class="preserve-breaks wrap"   data-expected-client-width="10" data-expected-client-height="10">  X</div>
  <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">  X</div>
  <div class="break-spaces wrap"      data-expected-client-width="30" data-expected-client-height="10">  X</div>
  <div class="break-spaces nowrap"    data-expected-client-width="30" data-expected-client-height="10">  X</div>
</div>
<div class="container wide">
  <div class="collapse wrap"          data-expected-client-width="10" data-expected-client-height="10">X </div>
  <div class="collapse nowrap"        data-expected-client-width="10" data-expected-client-height="10">X </div>
  <div class="preserve wrap"          data-expected-client-width="20" data-expected-client-height="10">X </div>
  <div class="preserve nowrap"        data-expected-client-width="20" data-expected-client-height="10">X </div>
  <div class="preserve-breaks wrap"   data-expected-client-width="10" data-expected-client-height="10">X </div>
  <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
  <div class="break-spaces wrap"      data-expected-client-width="20" data-expected-client-height="10">X </div>
  <div class="break-spaces nowrap"    data-expected-client-width="20" data-expected-client-height="10">X </div>
</div>
<div class="container wide">
  <div class="collapse wrap"          data-expected-client-width="10" data-expected-client-height="10">X  </div>
  <div class="collapse nowrap"        data-expected-client-width="10" data-expected-client-height="10">X  </div>
  <div class="preserve wrap"          data-expected-client-width="30" data-expected-client-height="10">X  </div>
  <div class="preserve nowrap"        data-expected-client-width="30" data-expected-client-height="10">X  </div>
  <div class="preserve-breaks wrap"   data-expected-client-width="10" data-expected-client-height="10">X  </div>
  <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X  </div>
  <div class="break-spaces wrap"      data-expected-client-width="30" data-expected-client-height="10">X  </div>
  <div class="break-spaces nowrap"    data-expected-client-width="30" data-expected-client-height="10">X  </div>
</div>
<div class="container wide">
  <div class="collapse wrap"          data-expected-client-width="30" data-expected-client-height="10">X É</div>
  <div class="collapse nowrap"        data-expected-client-width="30" data-expected-client-height="10">X É</div>
  <div class="preserve wrap"          data-expected-client-width="30" data-expected-client-height="10">X É</div>
  <div class="preserve nowrap"        data-expected-client-width="30" data-expected-client-height="10">X É</div>
  <div class="preserve-breaks wrap"   data-expected-client-width="30" data-expected-client-height="10">X É</div>
  <div class="preserve-breaks nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
  <div class="break-spaces wrap"      data-expected-client-width="30" data-expected-client-height="10">X É</div>
  <div class="break-spaces nowrap"    data-expected-client-width="30" data-expected-client-height="10">X É</div>
</div>
<div class="container wide">
  <div class="collapse wrap"          data-expected-client-width="30" data-expected-client-height="10">X  É</div>
  <div class="collapse nowrap"        data-expected-client-width="30" data-expected-client-height="10">X  É</div>
  <div class="preserve wrap"          data-expected-client-width="40" data-expected-client-height="10">X  É</div>
  <div class="preserve nowrap"        data-expected-client-width="40" data-expected-client-height="10">X  É</div>
  <div class="preserve-breaks wrap"   data-expected-client-width="30" data-expected-client-height="10">X  É</div>
  <div class="preserve-breaks nowrap" data-expected-client-width="30" data-expected-client-height="10">X  É</div>
  <div class="break-spaces wrap"      data-expected-client-width="40" data-expected-client-height="10">X  É</div>
  <div class="break-spaces nowrap"    data-expected-client-width="40" data-expected-client-height="10">X  É</div>
</div>
<div class="container wide">
  <div class="collapse wrap"          data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div>
  <div class="collapse nowrap"        data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div>
  <div class="preserve wrap"          data-expected-client-width="20" data-expected-client-height="20">X <x-br></x-br>É</div>
  <div class="preserve nowrap"        data-expected-client-width="20" data-expected-client-height="20">X <x-br></x-br>É</div>
  <div class="preserve-breaks wrap"   data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div>
  <div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="20">X <x-br></x-br>É</div>
  <div class="break-spaces wrap"      data-expected-client-width="20" data-expected-client-height="20">X <x-br></x-br>É</div>
  <div class="break-spaces nowrap"    data-expected-client-width="20" data-expected-client-height="20">X <x-br></x-br>É</div>
</div>
<div class="container wide">
  <div class="collapse wrap"          data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div>
  <div class="collapse nowrap"        data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div>
  <div class="preserve wrap"          data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div>
  <div class="preserve nowrap"        data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div>
  <div class="preserve-breaks wrap"   data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div>
  <div class="preserve-breaks nowrap" data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div>
  <div class="break-spaces wrap"      data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div>
  <div class="break-spaces nowrap"    data-expected-client-width="30" data-expected-client-height="10">X <a>É</a></div>
</div>

<hr>

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
document.fonts.ready.then(() => checkLayout(".container > div"));
</script>