| <!DOCTYPE html> |
| <link rel=author href="mailto:jarhar@chromium.org"> |
| <link rel=help href="https://github.com/w3c/csswg-drafts/issues/6429"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/support/interpolation-testcommon.js"></script> |
| |
| <body> |
| <script> |
| const alwaysBlock = [ |
| {at: -1, expect: 'block'}, |
| {at: 0, expect: 'block'}, |
| {at: 0.1, expect: 'block'}, |
| {at: 0.9, expect: 'block'}, |
| {at: 1, expect: 'block'}, |
| {at: 1.5, expect: 'block'}, |
| ]; |
| const alwaysNone = [ |
| {at: -1, expect: 'none'}, |
| {at: 0, expect: 'none'}, |
| {at: 0.1, expect: 'none'}, |
| {at: 0.9, expect: 'none'}, |
| {at: 1, expect: 'none'}, |
| {at: 1.5, expect: 'none'}, |
| ]; |
| |
| test_interpolation({ |
| property: 'display', |
| behavior: 'allow-discrete', |
| from: 'block', |
| to: 'none', |
| }, [ |
| {at: -1, expect: 'block'}, |
| {at: 0, expect: 'block'}, |
| {at: 0.1, expect: 'block'}, |
| {at: 0.9, expect: 'block'}, |
| {at: 1, expect: 'none'}, |
| {at: 1.5, expect: 'none'}, |
| ]); |
| |
| // This transitions test expect 'block' at every point because transitioning |
| // from display:none does not provide an initial style. This is expected and |
| // can be worked around by using @initial. |
| test_interpolation({ |
| property: 'display', |
| behavior: 'allow-discrete', |
| from: 'none', |
| to: 'block', |
| 'CSS Transitions with transition: all': alwaysBlock, |
| 'CSS Transitions': alwaysBlock |
| }, [ |
| {at: -1, expect: 'none'}, |
| {at: 0, expect: 'none'}, |
| {at: 0.1, expect: 'block'}, |
| {at: 0.9, expect: 'block'}, |
| {at: 1, expect: 'block'}, |
| {at: 1.5, expect: 'block'}, |
| ]); |
| |
| test_no_interpolation({ |
| property: 'display', |
| from: 'inline', |
| to: 'block' |
| }); |
| |
| test_interpolation({ |
| property: 'display', |
| behavior: 'allow-discrete', |
| from: 'block', |
| to: 'block' |
| }, alwaysBlock); |
| |
| test_interpolation({ |
| property: 'display', |
| behavior: 'allow-discrete', |
| from: 'none', |
| to: 'none' |
| }, alwaysNone); |
| </script> |
