Quelle grid-column-gap-001-ref.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/layout/reftests/css-grid/grid-column-gap-001-ref.html

<!DOCTYPE HTML>

<html><head>
  <meta charset="utf-8">
  <title>Reference: 'grid-column-gap'</title>
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176792">
  <style type="text/css">
html,body {
  color:black; background-color:white; font-size:16px; padding:0; margin:0;
}

.grid {
  display: grid;
  grid-auto-columns: minmax(1px,auto);
  grid-template-rows: 0px 7px;
  border: 2px solid black;
  float: left;
  margin-right: 20px;
}

.grid :last-child { background:grey; }
.grid :nth-child(2) { background:pink; }
.grid .gap { background:transparent; }

x { background: lime; height:7px; }
  </style>
</head>
<body>

<script>
document.body.style.display = "none";
var justify = [
   "start",
   // "end",
   // "center",
   // "start",
   // "end",
   "start",
   "start",
   "start",
   "start",
   "end",
   "center",
   "safe start",
   // "end",
   // "start",
   // "end safe",
   // "end",
   "safe center",
   // "center",
   // "end",
   // "end safe",
   // "start",
   "safe center",
   // "end",
   // "end safe",
   // "left",
   // "end",
];
var cols = [ "0", "1", "2", "3", "8", "9" ];
var widths = [ "0", "1", "5", "6" ];
var gaps = [ "1", "2" ];
for (var j = 0; j < justify.length; ++j) {
  // document.body.appendChild(document.createTextNode(justify[j])); // for debugging
  var chunk = document.createElement('div');
  chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden");
  for (var c = 0; c < cols.length; ++c) {
    for (var w = 0; w < widths.length; ++w) {
      // set this to true if you want to see all tests
      var run_test = widths[w] < cols[c] || cols[c] == 0 || cols[c] == 1;
      if (run_test) {
        for (var g = 0; g < gaps.length; ++g) {
          var grid = document.createElement('div');
          grid.style.width = widths[w]+"px";
          grid.className = "grid";
          grid.style.justifyContent = justify[j];
          var span = document.createElement('span');
          grid.appendChild(span);
          var numCols = parseInt(cols[c]);
          var gapCols = numCols==0 ? 0 : (numCols-1);
          numCols += gapCols*parseInt(gaps[g]);
          span.style.gridColumn = "1 / span " + numCols;
          for (var x = 0; x < numCols; ++x) {
            var item = document.createElement('x');
            if (x % (1+(parseInt(gaps[g]))) != 0)
              item.className = "gap";
            grid.appendChild(item);
          }
          // if (j < 5) { // The stretch tests.
          if (j < 1) { // The stretch test.
            if (c == 1)
              grid.style.background = 'pink'
          }
          // if (j == 6 && cols[c] == 1) { // The 'safe end' tests.
          if (j == 2 && cols[c] == 1) { // The 'safe end' tests.
            if (widths[w] != 0) grid.style.justifyContent = 'end';
          }
          // if (j == 7 && cols[c] == 1) { // The 'safe center' tests.
          if (j == 3 && cols[c] == 1) { // The 'safe center' tests.
            if (widths[w] != 0) grid.style.justifyContent = 'center';
          }
          // if (j > 15) { // The space-around and space-evenly tests.
          if (j > 7) { // The space-around and space-evenly tests.
            if (cols[c] == 1) {
              if (widths[w] == 0) {
                if (grid.style.justifyContent != 'end') {
                  grid.style.justifyContent = 'start';
                }
              } else {
                grid.style.justifyContent = 'center';
              }
            }
          }
          chunk.appendChild(grid);
        }
      }
    }
  }
  document.body.appendChild(chunk);
}
document.body.style.display = "";
</script>

</body>
</html>

Messung V0.5

¤ Dauer der Verarbeitung: 0.4 Sekunden ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.