tor-browser

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

grid-alignment-style-changes-001.html (2191B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
      4 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
      5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
      6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
      7 <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
      8 <link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
      9 <meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
     10 <style>
     11 #container {
     12  position: relative;
     13  display: inline-grid;
     14  grid: 100px / 50px 50px 50px;
     15  background: grey;
     16  align-items: baseline;
     17 }
     18 #item1 {
     19  height: 20px;
     20  background: blue;
     21 }
     22 #item2 {
     23  height: 50px;
     24  background: green;
     25 }
     26 #item3 {
     27  height: 30px;
     28  background: red;
     29 }
     30 </style>
     31 <script src="/resources/testharness.js"></script>
     32 <script src="/resources/testharnessreport.js"></script>
     33 <script src="/resources/check-layout-th.js"></script>
     34 <script src="support/style-change.js"></script>
     35 <script>
     36 function runTest() {
     37    let before = {
     38        item1: {"data-offset-y": 30 },
     39        item2: {"data-offset-y": 0  },
     40        item3: {"data-offset-y": 20 }
     41    };
     42 
     43    let after = {
     44        item1: {"data-offset-y": 10 },
     45        item2: {"data-offset-y": 50 },
     46        item3: {"data-offset-y": 0  }
     47    };
     48 
     49    evaluateStyleChangeMultiple("before", before);
     50    item2.style.alignSelf = "end";
     51    evaluateStyleChangeMultiple("after", after);
     52    done();
     53 }
     54 </script>
     55 <body onload="runTest()">
     56    <div id="container">
     57        <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0"></div>
     58        <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-x="50"></div>
     59        <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100"></div>
     60    </div>
     61    <div id="log"></div>
     62 </body>