tor-browser

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

grid-change-fit-content-argument-001.html (2670B)

      1 <!DOCTYPE html>
      2 <html lang=en>
      3 <meta charset="utf-8">
      4 <title>CSS Grid Layout Test: Change fit-content() argument</title>
      5 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
      6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
      7 <meta name="assert" content="This test checks that grid-template-{rows|columns} with fit-content() tracks recomputes the tracks when the fit-content() argument is modified.">
      8 <meta name="flags" content="ahem">
      9 <link rel="stylesheet" href="/css/support/grid.css">
     10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     11 <style>
     12 .grid {
     13  width: fit-content;
     14  position: relative;
     15  justify-content: start;
     16  align-content: start;
     17  font: 25px/1 Ahem;
     18 }
     19 
     20 .verticalLR {
     21  writing-mode: vertical-lr;
     22 }
     23 </style>
     24 <script src="/resources/testharness.js"></script>
     25 <script src="/resources/testharnessreport.js"></script>
     26 <script src="/resources/check-layout-th.js"></script>
     27 <script>
     28 setup({ explicit_done: true });
     29 function setGridTemplate(id, gridTemplateRows, gridTemplateColumns)
     30 {
     31  var gridElement = document.getElementById(id);
     32  gridElement.style.gridTemplateRows = gridTemplateRows;
     33  gridElement.style.gridTemplateColumns = gridTemplateColumns;
     34 }
     35 
     36 function testGridItemDefinitions(gridItemData)
     37 {
     38  var item = document.getElementById(gridItemData.id);
     39  item.setAttribute("data-expected-width", gridItemData.width);
     40  item.setAttribute("data-expected-height", gridItemData.height);
     41  item.setAttribute("data-offset-x", gridItemData.x);
     42  item.setAttribute("data-offset-y", gridItemData.y);
     43 
     44  checkLayout(".grid", false);
     45 }
     46 
     47 function testChangingGridDefinitions()
     48 {
     49  // Test changing the argument of fit-content() tracks.
     50  setGridTemplate("grid1", "none", "fit-content(100px)");
     51  testGridItemDefinitions({"id": "item1", "width": "100", "height": "100", "x": "0", "y": "0" });
     52 
     53  setGridTemplate("grid1", "none", "fit-content(150px)");
     54  testGridItemDefinitions({"id": "item1", "width": "150", "height": "75", "x": "0", "y": "0" });
     55 
     56  setGridTemplate("grid2", "fit-content(100px)", "none");
     57  testGridItemDefinitions({"id": "item2", "width": "100", "height": "100", "x": "0", "y": "0" });
     58 
     59  setGridTemplate("grid2", "fit-content(150px)", "none");
     60  testGridItemDefinitions({"id": "item2", "width": "75", "height": "150", "x": "0", "y": "0" });
     61 
     62  done();
     63 }
     64 </script>
     65 
     66 <body onload="document.fonts.ready.then(() => { testChangingGridDefinitions(); })">
     67 <div id="grid1" class="grid">
     68  <div id="item1" class="autoRowAutoColumn">XXXX XXX XX X X</div>
     69 </div>
     70 
     71 <div id="grid2" class="grid">
     72  <div id="item2" class="autoRowAutoColumn verticalLR">XXXX XXX XX X X</div>
     73 </div>
     74 </body>