tor-browser

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

max-width-composition.html (2104B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <title>max-width composition</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-width">
      5 <meta name="assert" content="max-width supports animation by computed value">
      6 
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 <script src="/css/support/interpolation-testcommon.js"></script>
     10 
     11 <body>
     12 <script>
     13 test_composition({
     14  property: 'max-width',
     15  underlying: '50px',
     16  addFrom: '100px',
     17  addTo: '200px',
     18 }, [
     19  {at: -0.3, expect: '120px'},
     20  {at: 0, expect: '150px'},
     21  {at: 0.5, expect: '200px'},
     22  {at: 1, expect: '250px'},
     23  {at: 1.5, expect: '300px'},
     24 ]);
     25 
     26 test_composition({
     27  property: 'max-width',
     28  underlying: '100px',
     29  addFrom: '10px',
     30  addTo: '2px',
     31 }, [
     32  {at: -0.5, expect: '114px'},
     33  {at: 0, expect: '110px'},
     34  {at: 0.5, expect: '106px'},
     35  {at: 1, expect: '102px'},
     36  {at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
     37 ]);
     38 
     39 test_composition({
     40  property: 'max-width',
     41  underlying: '10%',
     42  addFrom: '100px',
     43  addTo: '20%',
     44 }, [
     45  {at: -0.3, expect: 'calc(130px + 4%)'},
     46  {at: 0, expect: 'calc(100px + 10%)'},
     47  {at: 0.5, expect: 'calc(50px + 20%)'},
     48  {at: 1, expect: '30%'},
     49  {at: 1.5, expect: 'calc(-50px + 40%)'},
     50 ]);
     51 
     52 test_composition({
     53  property: 'max-width',
     54  underlying: '50px',
     55  addFrom: '100px',
     56  replaceTo: '200px',
     57 }, [
     58  {at: -0.3, expect: '135px'},
     59  {at: 0, expect: '150px'},
     60  {at: 0.5, expect: '175px'},
     61  {at: 1, expect: '200px'},
     62  {at: 1.5, expect: '225px'},
     63 ]);
     64 
     65 test_composition({
     66  property: 'max-width',
     67  underlying: '100px',
     68  addFrom: '100px',
     69  addTo: 'none',
     70 }, [
     71  {at: -0.3, expect: '200px'},
     72  {at: 0, expect: '200px'},
     73  {at: 0.5, expect: 'none'},
     74  {at: 1, expect: 'none'},
     75  {at: 1.5, expect: 'none'},
     76 ]);
     77 
     78 test_composition({
     79  property: 'max-width',
     80  underlying: 'fit-content',
     81  addFrom: '100px',
     82  addTo: '200px',
     83 }, [
     84  {at: -0.3, expect: '70px'},
     85  {at: 0, expect: '100px'},
     86  {at: 0.5, expect: '150px'},
     87  {at: 1, expect: '200px'},
     88  {at: 1.5, expect: '250px'},
     89 ]);
     90 </script>
     91 </body>