| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <meta charset="UTF-8"> | 2 <meta charset="UTF-8"> |
| 3 <style> | 3 <style> |
| 4 body { | 4 body { |
| 5 margin-top: 20px; | 5 margin-top: 20px; |
| 6 } | 6 } |
| 7 .layer-reference { | 7 .layer-reference { |
| 8 position: fixed; | 8 position: fixed; |
| 9 top: 0px; | 9 top: 0px; |
| 10 height: 100vh; | 10 height: 100vh; |
| 11 width: 50px; | 11 width: 50px; |
| 12 background-color: rgba(255, 255, 255, 0.75); | 12 background-color: rgba(255, 255, 255, 0.75); |
| 13 font-family: sans-serif; | 13 font-family: sans-serif; |
| 14 text-align: center; | 14 text-align: center; |
| 15 padding-top: 5px; | 15 padding-top: 5px; |
| 16 border: 1px solid; | 16 border: 1px solid; |
| 17 } | 17 } |
| 18 .parent { |
| 19 z-index: 15; |
| 20 } |
| 18 .target { | 21 .target { |
| 19 position: relative; | 22 position: relative; |
| 20 width: 350px; | 23 width: 350px; |
| 21 height: 10px; | 24 height: 10px; |
| 25 z-index: -2; |
| 22 } | 26 } |
| 23 .actual { | 27 .actual { |
| 24 background-color: black; | 28 background-color: black; |
| 25 } | 29 } |
| 26 .expected { | 30 .expected { |
| 27 background-color: green; | 31 background-color: green; |
| 28 } | 32 } |
| 29 </style> | 33 </style> |
| 30 <script src="resources/interpolation-test.js"></script> | 34 <script src="resources/interpolation-test.js"></script> |
| 31 <body></body> | 35 <body></body> |
| 32 <script> | 36 <script> |
| 33 [-8, -5, -2, 1, 5, 10, 12].forEach(function(zIndex, i) { | 37 [-8, -5, -2, 1, 5, 10, 12].forEach(function(zIndex, i) { |
| 34 var layerReference = document.createElement('div'); | 38 var layerReference = document.createElement('div'); |
| 35 layerReference.classList.add('layer-reference'); | 39 layerReference.classList.add('layer-reference'); |
| 36 layerReference.style.zIndex = zIndex; | 40 layerReference.style.zIndex = zIndex; |
| 37 layerReference.style.left = 7 + (i * 50) + 'px'; | 41 layerReference.style.left = 7 + (i * 50) + 'px'; |
| 38 layerReference.textContent = 'Z=' + zIndex; | 42 layerReference.textContent = 'Z=' + zIndex; |
| 39 document.body.appendChild(layerReference); | 43 document.body.appendChild(layerReference); |
| 40 }); | 44 }); |
| 41 | 45 |
| 42 assertInterpolation({ | 46 assertInterpolation({ |
| 43 property: 'z-index', | 47 property: 'z-index', |
| 48 from: '', |
| 49 to: '5', |
| 50 }, [ |
| 51 {at: -0.3, is: '-4'}, |
| 52 {at: 0, is: '-2'}, |
| 53 {at: 0.3, is: '0'}, |
| 54 {at: 0.6, is: '2'}, |
| 55 {at: 1, is: '5'}, |
| 56 {at: 1.5, is: '9'}, |
| 57 ]); |
| 58 |
| 59 assertNoInterpolation({ |
| 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 assertInterpolation({ |
| 67 property: 'z-index', |
| 68 from: 'inherit', |
| 69 to: '5', |
| 70 }, [ |
| 71 {at: -0.3, is: '18'}, |
| 72 {at: 0, is: '15'}, |
| 73 {at: 0.3, is: '12'}, |
| 74 {at: 0.6, is: '9'}, |
| 75 {at: 1, is: '5'}, |
| 76 {at: 1.5, is: '0'}, |
| 77 ]); |
| 78 |
| 79 assertNoInterpolation({ |
| 80 property: 'z-index', |
| 81 from: 'unset', |
| 82 to: '5', |
| 83 }); |
| 84 |
| 85 assertInterpolation({ |
| 86 property: 'z-index', |
| 44 from: '-5', | 87 from: '-5', |
| 45 to: '5' | 88 to: '5' |
| 46 }, [ | 89 }, [ |
| 47 {at: -0.3, is: '-8'}, | 90 {at: -0.3, is: '-8'}, |
| 48 {at: 0, is: '-5'}, | 91 {at: 0, is: '-5'}, |
| 49 {at: 0.3, is: '-2'}, | 92 {at: 0.3, is: '-2'}, |
| 50 {at: 0.6, is: '1'}, | 93 {at: 0.6, is: '1'}, |
| 51 {at: 1, is: '5'}, | 94 {at: 1, is: '5'}, |
| 52 {at: 1.5, is: '10'}, | 95 {at: 1.5, is: '10'}, |
| 53 ]); | 96 ]); |
| (...skipping 29 matching lines...) Expand all Loading... |
| 83 }); | 126 }); |
| 84 | 127 |
| 85 afterTest(function() { | 128 afterTest(function() { |
| 86 if (window.testRunner) { | 129 if (window.testRunner) { |
| 87 [].forEach.call(document.querySelectorAll('.layer-reference'), function(elem
ent) { | 130 [].forEach.call(document.querySelectorAll('.layer-reference'), function(elem
ent) { |
| 88 element.remove(); | 131 element.remove(); |
| 89 }); | 132 }); |
| 90 } | 133 } |
| 91 }); | 134 }); |
| 92 </script> | 135 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1265873002:
Add test coverage for interpolations using CSS wide keywords and neutral keyframes (Closed)
Base URL: svn://svn.chromium.org/blink/trunk