tor-browser

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

flex-row-style-change-triggers-layout-inline-end.html (1046B)

      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 <meta name="assert" content="Flex items react to change in their flexbox's margin-trim value">
      7 <link rel="match" href="flex-row-style-change-triggers-layout-inline-end-ref.html">
      8 <style>
      9 flexbox {
     10    display: flex;
     11    width: min-content;
     12    flex-wrap: wrap;
     13    border: 1px solid black;
     14 }
     15 .initial-margin-trim {
     16    margin-trim: inline-end;
     17 }
     18 item {
     19    display: block;
     20    background-color: green;
     21    width: 50px;
     22    height: 50px;
     23    margin-inline-end: 10px;
     24 }
     25 </style>
     26 </head>
     27 <body>
     28    <flexbox id="to-no-margin-trim" class="initial-margin-trim">
     29        <item></item>
     30    </flexbox>
     31    <flexbox id="to-margin-trim">
     32        <item></item>
     33    </flexbox>
     34 </body>
     35 <script>
     36 document.body.offsetHeight;
     37 document.getElementById("to-no-margin-trim").style["margin-trim"] = "none";
     38 document.getElementById("to-margin-trim").style["margin-trim"] = "inline-end";
     39 </script>
     40 </html>