Blitz - WPT: float-retry-push-xywh.html

wpt / css / css-shapes / shape-outside / assorted / float-retry-push-xywh.html

/css/css-shapes/shape-outside/assorted/float-retry-push-xywh.html

<!DOCTYPE HTML>
<meta charset="utf-8">
<title>Retry inline floats until they fit -- xywh</title>
<link rel="author" title="Jason Leo" href="mailto:cgqaq@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-xywh">
<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 xywh until it fits.">
<style>
  body {
    margin: 0px;
    line-height: 1;
  }

  .too-wide {
    display: inline-block;
    height: 20px;
    width: 250px;
    background: blue;
  }

  .shape {
    width: 100px;
    height: 100px;
    float: left;
    /* xywh(x y width height) defines the shape rectangle.
       xywh(0px 0px 60px 60px) is equivalent to inset(0px 40px 40px 0px)
       on a 100x100 box, with the same border-radius. */
    shape-outside: xywh(0px 0px 60px 60px round 0 0 34.142136px 0);
  }
</style>

<div style="width: 300px; height: 100px;">
  <div class="shape"></div>
  <span class="too-wide"></span>
<div>

/css/css-shapes/shape-outside/assorted/reference/float-retry-push-ref.html

<!DOCTYPE HTML>
<meta charset="utf-8">
<title>Reference for retrying floats and pushing them partway down the float area</title>
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
  body {
    margin: 0px;
    line-height: 1;
  }

  #too-wide {
    display: inline-block;
    height: 20px;
    width: 250px;
    background: blue;
  }
</style>

<div style="width: 300px; height: 100px">
<span id="too-wide" style="margin-top: 50px; margin-left: 50px;"></span>
</div>