tor-browser

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

floats-wrap-bfc-with-margin-001-ref.html (4383B)

      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 = [-30, -20, -17,
      8                       // Values -16 through -1 are non-interoperable and are
      9                       // split off to a separate test.
     10                       0, 5, 10, 14
     11                       // Values over 15 are non-interoperable and are
     12                       // split off to a separate test.
     13                      ];
     14  const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'.
     15  const DIRECTION_VALS = ["ltr", "rtl"];
     16 
     17  function newDivWithClassAndParent(className, parent) {
     18    let elem = document.createElement("div");
     19    if (className) {
     20      elem.classList.add(className);
     21    }
     22    parent.appendChild(elem);
     23    return elem;
     24  }
     25  function generateGroup(directionVal, floatVal, marginPropSuffix) {
     26    let group = newDivWithClassAndParent("group", document.body);
     27    group.style.direction = directionVal;
     28    const marginPropName = "margin-" + marginPropSuffix;
     29 
     30    for (let v of MARGIN_VALS) {
     31      // In this test, the negative values are specifically the ones that
     32      // are expected to cause wrapping.
     33      const isExpectingToWrap = (v < 0);
     34      let container = newDivWithClassAndParent("container", group);
     35      if (isExpectingToWrap) {
     36        container.style.flexWrap = "wrap";
     37      }
     38      if ((floatVal == "right") != (directionVal == "rtl")) {
     39        // In the corresponding piece of the testcase, the float is floated to
     40        // the inline-end side (for the given writing-mode). We use a
     41        // "row-reverse" flex container as our mockup for that here.
     42        container.style.flexDirection = "row-reverse";
     43      }
     44 
     45      let float = newDivWithClassAndParent("float", container);
     46      float.style.cssFloat = floatVal;
     47 
     48      let bfc = newDivWithClassAndParent("bfc", container);
     49      if (isExpectingToWrap) {
     50        // If we wrap, then we expect the testcase to resolve the BFC's
     51        // content-box width to be: 30px (container's available space)
     52        // minus 2px (for bfc's border), plus the absolute value of whatever
     53        // (negative) margin value we're testing here.
     54        bfc.style.width = (30 - 2 - v)  + "px";
     55      }
     56 
     57      // Set the actual margin value that we're testing here, EXCEPT if we're
     58      // not-expecting-to-wrap and the bfc's margin is going to "overlap" the
     59      // float in the testcase.  (In this latter case, the margin doesn't
     60      // impact the testcase's rendering, so we take care not to set it here.)
     61      if (isExpectingToWrap || marginPropSuffix != floatVal) {
     62        bfc.style[marginPropName] = v + "px";
     63      }
     64    }
     65  }
     66  function go() {
     67    for (let directionVal of DIRECTION_VALS) {
     68      for (let floatVal of HORIZ_SIDES) {
     69        for (let marginPropSuffix of HORIZ_SIDES) {
     70          generateGroup(directionVal, floatVal, marginPropSuffix);
     71        }
     72      }
     73    }
     74    // Note: the "reftest-wait" usage here isn't strictly necessary; it just
     75    // helps ensure that we actually make it through all of the above JS and
     76    // populate this document with the content that we want to render.
     77    // (Specifically: if we e.g. throw a JS exception somewhere early in both
     78    // the testcase and reference case, then the "reftest-wait" class will
     79    // never be removed; and that will cause the test run to be classified
     80    // as a failure, rather than a trivial "pass" with a visual comparison of
     81    // two blank documents.)
     82    document.documentElement.removeAttribute("class");
     83  }
     84 </script>
     85 <style>
     86 .group {
     87  width: 500px;
     88  border: 1px solid black;
     89 }
     90 .container {
     91  display: inline-flex;
     92  align-content: start;
     93  vertical-align: top;
     94  width: 30px;
     95  height: 40px;
     96  /* This border and margin are just cosmetic, to avoid overlap between
     97   * adjacent containers within a row. */
     98  border: 1px solid gray;
     99  margin-left: 30px;
    100 }
    101 
    102 .float {
    103  width: 7px;
    104  height: 8px;
    105  background: fuchsia;
    106  border: 1px solid purple;
    107  margin: 1px 3px 1px 2px;
    108 }
    109 .bfc {
    110  display: flow-root;
    111  background: aqua;
    112  height: 15px;
    113  border: 1px solid blue;
    114  /* We use "flex: 1" (on a flex item) to mock up the fill-available-space
    115   * block-layout behavior in the testcase. */
    116  flex: 1 auto;
    117 }
    118 </style>
    119 <body onload="go()">
    120 </body>
    121 </html>