<!DOCTYPE HTML>
<meta charset="utf-8">
<title>Retry inline floats until they fit -- image</title>
<link rel="author" title="Brad Werth" href="mailto:[email protected]">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/">
<link rel="match" href="reference/float-retry-push-ref.html">
<meta name="assert" content="Test that a too-wide inline block is pushed in the block direction along a shape-outside image until it fits.">
<style>
body {
margin: 0px;
line-height: 1;
}
#too-wide {
display: inline-block;
height: 21px;
width: 250px;
background: blue;
}
#shape {
width: 100px;
height: 100px;
float: left;
/* We use a gradient, which is part of the CSS 'image' type.
* We set it up to create a hard diagonal edge from the bottom left to the
* top right of #shape, which slices through each pixel along the diagonal.
* Theoretically, this should place #too-wide at position 50,50 within
* #shape's 100x100 region, but on some devices, the gradient rasterization
* may leave pixel 50,49 unshaded enough that #too-wide is placed there
* instead. To account for that possible off-by-one rounding scenario,
* we set things up as follows:
* - We make #too-wide 1px taller than the corresponding content in the
* reference case.
* - We clip the outermost div using a 'clip-path' that only paints
* the region where the corresponding content is in the reference case.
* - If the testcase renders properly, then #too-wide will have 1px of
* content clipped off of its top or bottom (depending on how the
* linear-gradient rasterization and rounding works out). Either way,
* it'll match the reference case.
*/
shape-outside: linear-gradient(135deg, black, black 50%, transparent 50%);
}
.clip {
clip-path: inset(50px 0 30px 0px);
}
</style>
<div style="width: 300px; height: 100px;" class="clip">
<div id="shape"></div>
<span id="too-wide"></span>
<div>
Codebase Browser
chromium