tor-browser

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

floats-wrap-bfc-with-margin-003-ref.html (4648B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <meta charset="utf-8">
      4 <title>CSS Reference Case</title>
      5 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
      6 <script>
      7  const MARGIN_VALS = [15, 22, 28];
      8  const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'.
      9  const DIRECTION_VALS = ["ltr", "rtl"];
     10  // This comes from .float width + horizontal border and padding:
     11  const FLOAT_MARGIN_BOX_WIDTH = 14;
     12  // This comes from 30 (container) - 14 (float mbox width) - 2 (bfc border):
     13  const AVAIL_WIDTH_NO_WRAPPING = 14;
     14 
     15  function newDivWithClassAndParent(className, parent) {
     16    let elem = document.createElement("div");
     17    if (className) {
     18      elem.classList.add(className);
     19    }
     20    parent.appendChild(elem);
     21    return elem;
     22  }
     23  function generateGroup(directionVal, floatVal, marginPropSuffix) {
     24    let group = newDivWithClassAndParent("group", document.body);
     25    group.style.direction = directionVal;
     26    const marginPropName = "margin-" + marginPropSuffix;
     27 
     28    for (let v of MARGIN_VALS) {
     29      const isMarginSideFloatSide = (marginPropSuffix == floatVal);
     30      // initial-char comparison to match [l]eft/[l]tr and [r]ight/[r]tl:
     31      const isMarginSideLineStartSide = (marginPropSuffix[0] == directionVal[0]);
     32      const isFloatSideLineStartSide = (floatVal[0] == directionVal[0]);
     33 
     34      let container = newDivWithClassAndParent("container", group);
     35      if (!isFloatSideLineStartSide) {
     36        // In the corresponding piece of the testcase, the float is floated to
     37        // the inline-end side (for the given writing-mode). We use a
     38        // "row-reverse" flex container as our mockup for that here.
     39        container.style.flexDirection = "row-reverse";
     40      }
     41 
     42      let float = newDivWithClassAndParent("float", container);
     43      let bfc = newDivWithClassAndParent("bfc", container);
     44 
     45      // Set the actual margin value that we're testing here, based on which
     46      // case this group is in. See comment in testcase for explanation of the
     47      // three cases.
     48      let marginValToUse;
     49      if (isMarginSideFloatSide) {
     50        // Case (A): in the testcase, the margin simply overlaps the float.
     51        // In our mockup here, they don't actually overlap; so we subtract
     52        // the portion that overlaps in the testcase, which is the float's
     53        // margin-box width:
     54        marginValToUse = v - FLOAT_MARGIN_BOX_WIDTH;
     55      } else if (isMarginSideLineStartSide) {
     56        // Case (B): we push the BFC down below the float (which we emulate
     57        // here with a wrapped flexbox), and we use the full specified margin:
     58        container.style.flexWrap = "wrap";
     59        marginValToUse = v;
     60      } else {
     61        // Case (C): we let the BFC be smooshed against the float, and the
     62        // margin effectively behaves as if it were clamped to the available
     63        // space (so we just clamp it to that value here).
     64        marginValToUse = AVAIL_WIDTH_NO_WRAPPING;
     65      }
     66      bfc.style[marginPropName] = marginValToUse + "px";
     67    }
     68  }
     69  function go() {
     70    for (let directionVal of DIRECTION_VALS) {
     71      for (let floatVal of HORIZ_SIDES) {
     72        for (let marginPropSuffix of HORIZ_SIDES) {
     73          generateGroup(directionVal, floatVal, marginPropSuffix);
     74        }
     75      }
     76    }
     77    // Note: the "reftest-wait" usage here isn't strictly necessary; it just
     78    // helps ensure that we actually make it through all of the above JS and
     79    // populate this document with the content that we want to render.
     80    // (Specifically: if we e.g. throw a JS exception somewhere early in both
     81    // the testcase and reference case, then the "reftest-wait" class will
     82    // never be removed; and that will cause the test run to be classified
     83    // as a failure, rather than a trivial "pass" with a visual comparison of
     84    // two blank documents.)
     85    document.documentElement.removeAttribute("class");
     86  }
     87 </script>
     88 <style>
     89 .group {
     90  width: 300px;
     91  border: 1px solid black;
     92 }
     93 .container {
     94  display: inline-flex;
     95  align-content: start;
     96  vertical-align: top;
     97  width: 30px;
     98  height: 40px;
     99  /* This border and margin are just cosmetic, to avoid overlap between
    100   * adjacent containers within a row. */
    101  border: 1px solid gray;
    102  margin-left: 30px;
    103 }
    104 
    105 .float {
    106  width: 7px;
    107  height: 8px;
    108  background: fuchsia;
    109  border: 1px solid purple;
    110  margin: 1px 3px 1px 2px;
    111 }
    112 .bfc {
    113  display: flow-root;
    114  background: aqua;
    115  height: 15px;
    116  border: 1px solid blue;
    117  /* We use "flex: 1" (on a flex item) to mock up the fill-available-space
    118   * block-layout behavior in the testcase. */
    119  flex: 1 auto;
    120 }
    121 </style>
    122 <body onload="go()">
    123 </body>
    124 </html>