tor-browser

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

grid-computed-value-display-floated-items-001.html (2767B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Grid Layout Test: 'float' affects to the computed value of 'display' on grid items</title>
      4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
      5 <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
      6 <link rel="help" href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo" title="9.7 Relationships between 'display', 'position', and 'float'">
      7 <meta name="flags" content="dom">
      8 <script src="/resources/testharness.js"></script>
      9 <script src="/resources/testharnessreport.js"></script>
     10 <style>
     11  #grid {
     12    display: grid;
     13  }
     14 
     15  #inline-grid {
     16    display: inline-grid;
     17  }
     18 
     19  .inline-table {
     20    display: inline-table;
     21  }
     22 
     23  .inline {
     24    display: inline;
     25  }
     26 
     27  .flex {
     28    display: flex;
     29  }
     30 
     31  .float {
     32    float: left;
     33  }
     34 </style>
     35 <div id="log"></div>
     36 
     37 <div id="grid">
     38  <div id="grid-inline-table" class="float inline-table"></div>
     39  <div id="grid-inline" class="float inline"></div>
     40  <div id="grid-flex" class="float flex"></div>
     41 </div>
     42 <div id="inline-grid">
     43  <div id="inline-grid-inline-table" class="float inline-table"></div>
     44  <div id="inline-grid-inline" class="float inline"></div>
     45  <div id="inline-grid-flex" class="float flex"></div>
     46 </div>
     47 
     48 <script>
     49  function testComputedStyleDisplay(element, value) {
     50    assert_equals(getComputedStyle(element).getPropertyValue("display"), value, "getComputedStyle() display should be '" + value + "'");
     51  }
     52 
     53  var gridInlineTable = document.getElementById("grid-inline-table");
     54  test(function() {
     55      testComputedStyleDisplay(gridInlineTable, "table");
     56    }, "Test display floated 'inline-table' grid item");
     57 
     58  var gridInline = document.getElementById("grid-inline");
     59  test(function() {
     60      testComputedStyleDisplay(gridInline, "block");
     61    }, "Test display floated 'inline' grid item");
     62 
     63  var gridFlex = document.getElementById("grid-flex");
     64  test(function() {
     65      testComputedStyleDisplay(gridFlex, "flex");
     66    }, "Test display floated 'flex' grid item");
     67 
     68  var inlineGridInlineTable = document.getElementById("inline-grid-inline-table");
     69  test(function() {
     70      testComputedStyleDisplay(inlineGridInlineTable, "table");
     71    }, "Test display floated 'inline-table' grid item within an inline grid");
     72 
     73  var inlineGridInline = document.getElementById("inline-grid-inline");
     74  test(function() {
     75      testComputedStyleDisplay(inlineGridInline, "block");
     76    }, "Test display floated 'inline' grid item within an inline grid");
     77 
     78  var inlineGridFlex = document.getElementById("inline-grid-flex");
     79  test(function() {
     80      testComputedStyleDisplay(inlineGridFlex, "flex");
     81    }, "Test display floated 'flex' grid item within an inline grid");
     82 </script>