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-ref.html (3128B)

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