tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

floats-wrap-bfc-with-margin-002.tentative.html (4818B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <meta charset="utf-8">
      4 <title>CSS Test: If a BFC's inline-axis margin is sufficiently negative such
      5  that it inflates its border-box to be too large to fit alongside a float,
      6  then it should be pushed below the float</title>
      7 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
      8 <link rel="help" href="https://www.w3.org/TR/CSS21/visuren.html#floats">
      9 <meta name="assert" content="The border box of ... an element in the normal flow that establishes a new block formatting context ... must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats">
     10 <link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">
     11 <!-- For a BFC with 'width:auto', negative total inline-axis margins will
     12     effectively set a lower-bound for the used border-box width, to satisfy
     13     the equation in CSS2.1 10.3.3. This test exercises scenarios where this
     14     mechanism "props up" the BFC's border-box, but not enough to make its
     15     border-box collide width the float's margin-box; so it does not need to
     16     be moved down below the float. -->
     17 <!-- NOTE: Eventually this test might want to merge with the -001 test.
     18     The test logic should be exactly the same, except that here we're testing
     19     some values (in MARGIN_VALS) that aren't currently interoperable, per
     20     the WebKit bug at https://bugs.webkit.org/show_bug.cgi?id=239976 -->
     21 <link rel="match" href="floats-wrap-bfc-with-margin-002-ref.html">
     22 <script>
     23  const MARGIN_VALS = [-16, -15, -10, -1, 0];
     24  const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'.
     25  const DIRECTION_VALS = ["ltr", "rtl"];
     26 
     27  function newDivWithClassAndParent(className, parent) {
     28    let elem = document.createElement("div");
     29    if (className) {
     30      elem.classList.add(className);
     31    }
     32    parent.appendChild(elem);
     33    return elem;
     34  }
     35  function generateGroup(directionVal, floatVal, marginPropSuffix) {
     36    let group = newDivWithClassAndParent("group", document.body);
     37    group.style.direction = directionVal;
     38    const marginPropName = "margin-" + marginPropSuffix;
     39 
     40    for (let v of MARGIN_VALS) {
     41      let container = newDivWithClassAndParent("container", group);
     42      let float = newDivWithClassAndParent("float", container);
     43      float.style.cssFloat = floatVal;
     44 
     45      let bfc = newDivWithClassAndParent("bfc", container);
     46      bfc.style[marginPropName] = v + "px";
     47    }
     48  }
     49  function go() {
     50    for (let directionVal of DIRECTION_VALS) {
     51      for (let floatVal of HORIZ_SIDES) {
     52        for (let marginPropSuffix of HORIZ_SIDES) {
     53          generateGroup(directionVal, floatVal, marginPropSuffix);
     54        }
     55      }
     56    }
     57    // Note: the "reftest-wait" usage here isn't strictly necessary; it just
     58    // helps ensure that we actually make it through all of the above JS and
     59    // populate this document with the content that we want to render.
     60    // (Specifically: if we e.g. throw a JS exception somewhere early in both
     61    // the testcase and reference case, then the "reftest-wait" class will
     62    // never be removed; and that will cause the test run to be classified
     63    // as a failure, rather than a trivial "pass" with a visual comparison of
     64    // two blank documents.)
     65    document.documentElement.removeAttribute("class");
     66  }
     67 </script>
     68 <style>
     69 .group {
     70  width: 500px;
     71  border: 1px solid black;
     72 }
     73 .container {
     74  /* This is the container that holds our float+bfc.  We make it an
     75     inline-block so that we can test a bunch of these in a row.  */
     76  display: inline-block;
     77  vertical-align: top;
     78  width: 30px;
     79  height: 40px;
     80  /* This border and margin are just cosmetic, to avoid overlap between
     81   * adjacent containers within a row. */
     82  border: 1px solid gray;
     83  margin-left: 30px;
     84 }
     85 
     86 .float {
     87  /* We'll set the float property elsewhere (to 'right' or 'left'). */
     88  width: 7px;
     89  height: 8px;
     90  background: fuchsia;
     91  border: 1px solid purple;
     92  /* Each .float's margin-box (which the corresponding .bfc's border-box cannot
     93   * overlap) is 14px wide:
     94   *   7px content + 2px horizontal border + 5px horizontal margin
     95   * Note that we're intentionally using a nonzero 'margin' here, to be sure
     96   * the UA is using the float's margin-box (and not one of its other
     97   * boxes) for this non-overlapping calculation. */
     98  margin: 1px 3px 1px 2px;
     99 }
    100 .bfc {
    101  /* Each .bfc's border-box width is 2px (from the border) plus whatever we
    102   * resolve 'width:auto' to, which is influenced by the particular choice of
    103   * 'margin' values (and the available space). */
    104  display: flow-root;
    105  background: aqua;
    106  height: 15px;
    107  border: 1px solid blue;
    108 }
    109 </style>
    110 <body onload="go()">
    111 </body>
    112 </html>