tor-browser

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

logical-values-float-clear-reftest-ref.html (2194B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8" />
      3 <title>CSS Reftest Reference</title>
      4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
      5 <style>
      6 .test {
      7  display: block;
      8  overflow: hidden;
      9  width: 300px;
     10 }
     11 .inline {
     12  display: inline;
     13 }
     14 .float, .clear {
     15  display: block;
     16  overflow: hidden;
     17  height: 3px;
     18  width: 100px;
     19  background: #f0f;
     20 }
     21 .clear {
     22  background: #0ff;
     23 }
     24 </style>
     25 <body>
     26 <script>
     27 function physicalValue(value, containerDirection) {
     28  return ((value === "inline-start") === (containerDirection === "ltr")) ? "left" : "right";
     29 }
     30 const sides = ["inline-start", "inline-end"];
     31 const directions = ["ltr", "rtl"];
     32 for (const floatSide of sides) {
     33  for (const clearSide of sides) {
     34    for (const containerDirection of directions) {
     35      for (const inlineParentDirection of [null, ...directions]) {
     36        for (const floatDirection of directions) {
     37          for (const clearDirection of directions) {
     38            const containerEl = document.createElement("div");
     39            containerEl.className = "test";
     40            containerEl.style.direction = containerDirection;
     41            const floatEl = document.createElement("div");
     42            floatEl.className = "float";
     43            floatEl.style.direction = floatDirection;
     44            floatEl.style.float = physicalValue(floatSide, containerDirection);
     45            const clearEl = document.createElement("div");
     46            clearEl.className = "clear";
     47            clearEl.style.direction = floatDirection;
     48            clearEl.style.clear = physicalValue(clearSide, containerDirection);
     49            if (inlineParentDirection) {
     50              const inlineParent = document.createElement("div");
     51              inlineParent.className = "inline";
     52              inlineParent.style.direction = inlineParentDirection;
     53              inlineParent.appendChild(floatEl);
     54              inlineParent.appendChild(clearEl);
     55              containerEl.appendChild(inlineParent);
     56            } else {
     57              containerEl.appendChild(floatEl);
     58              containerEl.appendChild(clearEl);
     59            }
     60            document.body.appendChild(containerEl);
     61          }
     62        }
     63      }
     64    }
     65  }
     66 }
     67 </script>
     68 </body>