Blitz - WPT: table-sizing-with-adjacent-floats.html

wpt / css / CSS2 / floats / table-sizing-with-adjacent-floats.html

/css/CSS2/floats/table-sizing-with-adjacent-floats.html

<!DOCTYPE html>
<meta charset=utf-8>
<title>CSS Floats — table sizing with multiple adjacent floats</title>
<meta name=assert content="A table next to multiple right-floated elements should shrink its width to avoid overlapping all of them, not just the first one.">
<link rel=help href="https://www.w3.org/TR/CSS2/visuren.html#floats">
<link rel=match href="table-sizing-with-adjacent-floats-ref.html">
<style>
.container {
  width: 250px;
}
.float-small {
  float: right;
  height: 50px;
  width: 50px;
  background-color: blue;
}
.float-wide {
  clear: right;
  float: right;
  height: 50px;
  width: 200px;
  background-color: blue;
}
table {
  background-color: green;
  border-spacing: 0px;
}
td {
  width: 100px;
  height: 100px;
  padding: 0px;
}
</style>
<p>Test passes if blue and green boxes do not overlap.</p>
<div class=container>
  <div class=float-small></div>
  <div class=float-wide></div>
  <table><td></td></table>
</div>

/css/CSS2/floats/table-sizing-with-adjacent-floats-ref.html

<!DOCTYPE html>
<meta charset=utf-8>
<title>CSS Floats — table sizing with multiple adjacent floats (reference)</title>
<style>
div {
  display: inline-block;
  background-color: blue;
  height: 100px;
  width: 50px;
}
.wide {
  width: 150px;
  height: 50px;
}
.table {
  background-color: green;
}
</style>
<p>Test passes if blue and green boxes do not overlap.</p>
<div class=table></div><div class=wide></div><div></div>