z-index-interpolation.html (2404B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>z-index interpolation</title> 4 <link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#z-index"> 5 <meta name="assert" content="z-index supports animation"> 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 body { 13 margin-top: 20px; 14 } 15 .layer-reference { 16 position: fixed; 17 top: 0px; 18 height: 100vh; 19 width: 50px; 20 background-color: rgba(255, 255, 255, 0.75); 21 font-family: sans-serif; 22 text-align: center; 23 padding-top: 5px; 24 border: 1px solid; 25 } 26 .parent { 27 z-index: 15; 28 } 29 .target { 30 position: relative; 31 width: 350px; 32 height: 10px; 33 z-index: -2; 34 } 35 .actual { 36 background-color: black; 37 } 38 .expected { 39 background-color: green; 40 } 41 </style> 42 43 <body></body> 44 45 <script> 46 test_interpolation({ 47 property: 'z-index', 48 from: neutralKeyframe, 49 to: '5', 50 }, [ 51 {at: -0.3, expect: '-4'}, 52 {at: 0, expect: '-2'}, 53 {at: 0.3, expect: '0'}, 54 {at: 0.6, expect: '2'}, 55 {at: 1, expect: '5'}, 56 {at: 1.5, expect: '9'}, 57 ]); 58 59 test_no_interpolation({ 60 property: 'z-index', 61 from: 'initial', 62 to: '5', 63 }); 64 65 // We fail to inherit correctly due to style overadjustment: crbug.com/375982 66 test_interpolation({ 67 property: 'z-index', 68 from: 'inherit', 69 to: '5', 70 }, [ 71 {at: -0.3, expect: '18'}, 72 {at: 0, expect: '15'}, 73 {at: 0.3, expect: '12'}, 74 {at: 0.6, expect: '9'}, 75 {at: 1, expect: '5'}, 76 {at: 1.5, expect: '0'}, 77 ]); 78 79 test_no_interpolation({ 80 property: 'z-index', 81 from: 'unset', 82 to: '5', 83 }); 84 85 test_interpolation({ 86 property: 'z-index', 87 from: '-5', 88 to: '5' 89 }, [ 90 {at: -0.3, expect: '-8'}, 91 {at: 0, expect: '-5'}, 92 {at: 0.3, expect: '-2'}, 93 {at: 0.6, expect: '1'}, 94 {at: 1, expect: '5'}, 95 {at: 1.5, expect: '10'}, 96 ]); 97 98 test_interpolation({ 99 property: 'z-index', 100 from: '2', 101 to: '4' 102 }, [ 103 {at: -0.3, expect: '1'}, 104 {at: 0, expect: '2'}, 105 {at: 0.3, expect: '3'}, 106 {at: 0.6, expect: '3'}, 107 {at: 1, expect: '4'}, 108 {at: 1.5, expect: '5'}, 109 ]); 110 111 test_interpolation({ 112 property: 'z-index', 113 from: '-2', 114 to: '-4' 115 }, [ 116 {at: -0.3, expect: '-1'}, 117 {at: 0, expect: '-2'}, 118 {at: 0.1, expect: '-2'}, 119 {at: 0.3, expect: '-3'}, 120 {at: 0.6, expect: '-3'}, 121 {at: 1, expect: '-4'}, 122 {at: 1.5, expect: '-5'}, 123 ]); 124 125 test_no_interpolation({ 126 property: 'z-index', 127 from: 'auto', 128 to: '10', 129 }); 130 </script>