tor-browser

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

test_computed_style_min_size_auto.html (4774B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <!--
      4 https://bugzilla.mozilla.org/show_bug.cgi?id=763689
      5 -->
      6 <head>
      7  <meta charset="utf-8">
      8  <title>Test behavior of 'min-height:auto' and 'min-width:auto' (Bug 763689 and Bug 1304636)</title>
      9  <script src="/tests/SimpleTest/SimpleTest.js"></script>
     10  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
     11 </head>
     12 <body>
     13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=763689">Mozilla Bug 763689</a>
     14 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1304636">Mozilla Bug 1304636</a>
     15 <body>
     16 <div id="display">
     17  <div id="block-item">abc</div>
     18 
     19  <div style="display: flex">
     20    <div id="horizontal-flex-item">abc</div>
     21    <div id="horizontal-flex-item-OH" style="overflow: hidden">def</div>
     22  </div>
     23 
     24  <div style="display: flex; flex-direction: column">
     25    <div id="vertical-flex-item">abc</div>
     26    <div id="vertical-flex-item-OH" style="overflow: hidden">def</div>
     27  </div>
     28 
     29  <div style="display: grid">
     30    <div id="grid-item"></div>
     31    <div id="grid-item-OH" style="overflow: hidden"></div>
     32  </div>
     33 </div>
     34 <pre id="test">
     35 <script type="application/javascript">
     36 "use strict";
     37 
     38 /**
     39 * Test 'min-height:auto' and 'min-width:auto' (Bug 763689 and Bug 1304636)
     40 * ========================================================
     41 * This test checks the computed-style value of the "auto" keyword introduced
     42 * for the "min-height" and "min-width" properties in CSS3 Flexbox Section 4.5
     43 * and CSS3 Grid Section 6.2.
     44 *   https://www.w3.org/TR/css-flexbox-1/#min-size-auto
     45 *   https://www.w3.org/TR/css-grid-1/#grid-item-sizing
     46 *
     47 * Quoting that chunk of spec:
     48 *     # auto
     49 *     #   On a flex item whose overflow is visible in the main axis,
     50 *     #   when specified on the flex item’s main-axis min-size property,
     51 *     #   specifies an automatic minimum size. It otherwise computes to 0
     52 *     #   (unless otherwise defined by a future specification).
     53 *
     54 */
     55 
     56 // Given an element ID, this function sets the corresponding
     57 // element's inline-style min-width and min-height explicitly to "auto".
     58 function setElemMinSizesToAuto(aElemId) {
     59  var elem = document.getElementById(aElemId);
     60 
     61  is(elem.style.minWidth, "", "min-width should be initially unset");
     62  elem.style.minWidth = "auto";
     63  is(elem.style.minWidth, "auto", "min-width should accept 'auto' value");
     64 
     65  is(elem.style.minHeight, "", "min-height should be initially unset");
     66  elem.style.minHeight = "auto";
     67  is(elem.style.minHeight, "auto", "min-height should accept 'auto' value");
     68 }
     69 
     70 // Given an element ID, this function compares the corresponding element's
     71 // computed min-width and min-height against expected values.
     72 function checkElemMinSizes(aElemId,
     73                           aExpectedMinWidth,
     74                           aExpectedMinHeight)
     75 {
     76  var elem = document.getElementById(aElemId);
     77  is(window.getComputedStyle(elem).minWidth,  aExpectedMinWidth,
     78     "checking min-width of " + aElemId);
     79 
     80  is(window.getComputedStyle(elem).minHeight, aExpectedMinHeight,
     81     "checking min-height of " + aElemId);
     82 }
     83 
     84 // This function goes through all the elements we're interested in
     85 // and checks their computed min-sizes against expected values,
     86 // farming out each per-element job to checkElemMinSizes.
     87 function checkAllTheMinSizes() {
     88  // This is the normal part -- generally, the default value of "min-width"
     89  // and "min-height" (auto) computes to "0px".
     90  checkElemMinSizes("block-item", "0px", "0px");
     91 
     92  // ...but for a flex item or grid item, "min-width: auto" and
     93  // "min-height: auto" both compute to "auto" (even in cases where
     94  // we know it'll actually resolve to 0 in layout, like for example
     95  // when the item has "overflow:hidden").
     96  checkElemMinSizes("horizontal-flex-item",    "auto", "auto");
     97  checkElemMinSizes("horizontal-flex-item-OH", "auto", "auto");
     98  checkElemMinSizes("vertical-flex-item",      "auto", "auto");
     99  checkElemMinSizes("vertical-flex-item-OH",   "auto", "auto");
    100  checkElemMinSizes("grid-item",               "auto", "auto");
    101  checkElemMinSizes("grid-item-OH",            "auto", "auto");
    102 }
    103 
    104 // Main test function
    105 function main() {
    106  // First: check that min-sizes are what we expect, with min-size properties
    107  // at their initial value.
    108  checkAllTheMinSizes();
    109 
    110  // Now, we *explicitly* set min-size properties to "auto"...
    111  var elemIds = [ "block-item",
    112                  "horizontal-flex-item",
    113                  "horizontal-flex-item-OH",
    114                  "vertical-flex-item",
    115                  "vertical-flex-item-OH",
    116                  "grid-item",
    117                  "grid-item-OH"];
    118  elemIds.forEach(setElemMinSizesToAuto);
    119 
    120  // ...and try again (should have the same result):
    121  checkAllTheMinSizes();
    122 }
    123 
    124 main();
    125 
    126 </script>
    127 </pre>
    128 </body>
    129 </html>