tor-browser

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

height-interpolation.html (2555B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <title>height interpolation</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-height">
      5 <meta name="assert" content="height 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 <style>
     12 .parent {
     13  height: 200px;
     14 }
     15 .target {
     16  width: 100px;
     17  height: 100px;
     18  background-color: black;
     19  display: inline-block;
     20  margin-right: 5px;
     21  height: 10px;
     22 }
     23 .expected {
     24  background-color: green;
     25 }
     26 </style>
     27 
     28 <body></body>
     29 
     30 <script>
     31 test_interpolation({
     32  property: 'height',
     33  from: neutralKeyframe,
     34  to: '20px',
     35 }, [
     36  {at: -0.3, expect: '7px'},
     37  {at: 0, expect: '10px'},
     38  {at: 0.3, expect: '13px'},
     39  {at: 0.6, expect: '16px'},
     40  {at: 1, expect: '20px'},
     41  {at: 1.5, expect: '25px'},
     42 ]);
     43 
     44 test_no_interpolation({
     45  property: 'height',
     46  from: 'initial',
     47  to: '20px',
     48 });
     49 
     50 test_interpolation({
     51  property: 'height',
     52  from: 'inherit',
     53  to: '20px',
     54 }, [
     55  {at: -0.3, expect: '254px'},
     56  {at: 0, expect: '200px'},
     57  {at: 0.3, expect: '146px'},
     58  {at: 0.6, expect: '92px'},
     59  {at: 1, expect: '20px'},
     60  {at: 1.5, expect: '0px'},
     61 ]);
     62 
     63 test_no_interpolation({
     64  property: 'height',
     65  from: 'unset',
     66  to: '20px',
     67 });
     68 
     69 test_no_interpolation({
     70  property: 'height',
     71  from: 'auto',
     72  to: '20px',
     73 });
     74 
     75 test_interpolation({
     76  property: 'height',
     77  from: '0px',
     78  to: '100px',
     79 }, [
     80  {at: -0.3, expect: '0px'}, // CSS height can't be negative.
     81  {at: 0, expect: '0px'},
     82  {at: 0.3, expect: '30px'},
     83  {at: 0.6, expect: '60px'},
     84  {at: 1, expect: '100px'},
     85  {at: 1.5, expect: '150px'}
     86 ]);
     87 
     88 test_no_interpolation({
     89  property: 'height',
     90  from: 'auto',
     91  to: 'min-content',
     92 });
     93 
     94 test_no_interpolation({
     95  property: 'height',
     96  from: 'fit-content',
     97  to: '20px',
     98 });
     99 
    100 test_no_interpolation({
    101  property: 'height',
    102  from: 'max-content',
    103  to: 'fit-content',
    104 });
    105 
    106 test_no_interpolation({
    107  property: 'height',
    108  from: 'max-content',
    109  to: 'stretch',
    110 });
    111 
    112 test_no_interpolation({
    113  property: 'height',
    114  from: 'max-content',
    115  to: neutralKeyframe,
    116 });
    117 
    118 test_no_interpolation({
    119  property: 'height',
    120  from: neutralKeyframe,
    121  to: 'fit-content',
    122 });
    123 
    124 let new_style_text = `
    125  .target {
    126    height: auto;
    127  }
    128 `;
    129 let new_style = document.createElement("style");
    130 new_style.append(new_style_text);
    131 document.head.append(new_style);
    132 test_no_interpolation({
    133  property: 'height',
    134  from: neutralKeyframe,
    135  to: '100px',
    136 });
    137 new_style.remove();
    138 
    139 </script>