tor-browser

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

flex-column-style-change-triggers-layout-block-start.html (1081B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <link rel="author" href="mailto:sammy.gill@apple.com">
      5 <link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
      6 <link rel="match" href="flex-column-style-change-triggers-layout-block-start-ref.html">
      7 <meta name="assert" content="Flex items react to change in their flexbox's margin-trim value">
      8 <style>
      9 flexbox {
     10    display: flex;
     11    flex-direction: column;
     12    width: min-content;
     13    flex-wrap: wrap;
     14    border: 1px solid black;
     15 }
     16 .initial-margin-trim {
     17    margin-trim: block-start;
     18 }
     19 item {
     20    display: block;
     21    background-color: green;
     22    width: 50px;
     23    height: 50px;
     24    margin-block-start: 10px;
     25 }
     26 </style>
     27 </head>
     28 <body>
     29    <flexbox class="initial-margin-trim" id="to-no-margin-trim">
     30        <item></item>
     31    </flexbox>
     32    <flexbox id="to-margin-trim">
     33        <item></item>
     34    </flexbox>
     35 </body>
     36 <script>
     37 document.body.offsetHeight;
     38 document.getElementById("to-no-margin-trim").style["margin-trim"] = "none";
     39 document.getElementById("to-margin-trim").style["margin-trim"] = "block-start";
     40 </script>
     41 </html>