From 381a95bb62cbf72734ec7c1b9763b6e19026d9cb Mon Sep 17 00:00:00 2001 From: Abasov Akif Date: Wed, 6 Oct 2021 17:36:34 +0300 Subject: [PATCH] Basic animations test (#1233) Basic animations test --- .../jetbrains/compose/web/elements/Style.kt | 32 ++++++ .../src/jsTest/kotlin/css/AnimationTests.kt | 99 +++++++++++++++++++ 2 files changed, 131 insertions(+) create mode 100644 web/core/src/jsTest/kotlin/css/AnimationTests.kt diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Style.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Style.kt index 017debfac2..5e82a54d4b 100644 --- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Style.kt +++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Style.kt @@ -81,6 +81,38 @@ private fun fillRule( } } +fun CSSRuleDeclaration.stringPresentation( + baseIndent: String = "", + indent: String = " ", + delimiter: String = "\n" +): String { + val cssRuleDeclaration = this + val strings = mutableListOf() + strings.add("$baseIndent${cssRuleDeclaration.header} {") + when (cssRuleDeclaration) { + is CSSStyledRuleDeclaration -> { + cssRuleDeclaration.style.properties.forEach { (name, value) -> + strings.add("$baseIndent$indent$name: $value;") + } + cssRuleDeclaration.style.variables.forEach { (name, value) -> + strings.add("$baseIndent$indent--$name: $value;") + } + } + is CSSGroupingRuleDeclaration -> { + cssRuleDeclaration.rules.forEach { childRuleDeclaration -> + strings.add(childRuleDeclaration.stringPresentation(baseIndent + indent, indent, delimiter)) + } + } + is CSSKeyframesRuleDeclaration -> { + cssRuleDeclaration.keys.forEach { childRuleDeclaration -> + strings.add(childRuleDeclaration.stringPresentation(baseIndent + indent, indent, delimiter)) + } + } + } + strings.add("$baseIndent}") + return strings.joinToString(delimiter) +} + internal fun setProperty( style: CSSStyleDeclaration, name: String, diff --git a/web/core/src/jsTest/kotlin/css/AnimationTests.kt b/web/core/src/jsTest/kotlin/css/AnimationTests.kt new file mode 100644 index 0000000000..bb93e992e8 --- /dev/null +++ b/web/core/src/jsTest/kotlin/css/AnimationTests.kt @@ -0,0 +1,99 @@ +/* + * Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers. + * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file. + */ +package org.jetbrains.compose.web.core.tests.css + +import org.jetbrains.compose.web.ExperimentalComposeWebApi +import org.jetbrains.compose.web.testutils.* +import org.jetbrains.compose.web.css.* +import org.jetbrains.compose.web.dom.stringPresentation +import org.w3c.dom.HTMLElement +import org.w3c.dom.HTMLStyleElement +import org.w3c.dom.css.CSSStyleSheet +import org.w3c.dom.get +import kotlin.test.Test +import kotlin.test.assertContains + +object AnimationsStyleSheet : StyleSheet() { + val bounce by keyframes { + from { + property("transform", "translateX(50%)") + } + + to { + property("transform", "translateX(-50%)") + } + } + + val animationClass by style { + animation(bounce) { + duration(2.s) + timingFunction(AnimationTimingFunction.EaseIn) + direction(AnimationDirection.Alternate) + } + } +} + +@ExperimentalComposeWebApi +class AnimationTests { + @Test + fun animationClassGenerated() = runTest { + val generatedRules = AnimationsStyleSheet.cssRules.map { it.stringPresentation() } + + assertContains( + generatedRules, + """ + @keyframes AnimationsStyleSheet-bounce { + from { + transform: translateX(50%); + } + to { + transform: translateX(-50%); + } + } + """.trimIndent(), + "Animation keyframes wasn't generated correctly" + ) + assertContains( + generatedRules, + """ + .AnimationsStyleSheet-animationClass { + animation: AnimationsStyleSheet-bounce 2s ease-in alternate; + } + """.trimIndent(), + "Animation class wasn't generated correctly" + ) + } + + @Test + fun animationClassInjected() = runTest { + composition { + Style(AnimationsStyleSheet) + } + + val el = root.children[0] as HTMLStyleElement + val cssRules = (el.sheet as? CSSStyleSheet)?.cssRules + val rules = (0 until (cssRules?.length ?: 0)).map { + cssRules?.item(it)?.cssText ?: "" + } + + assertContains( + rules, + """ + @keyframes AnimationsStyleSheet-bounce { + 0% { transform: translateX(50%); } + 100% { transform: translateX(-50%); } + } + """.trimIndent(), + "Animation keyframes wasn't injected correctly" + ) + assertContains( + rules, + """ + .AnimationsStyleSheet-animationClass { animation: 2s ease-in 0s 1 alternate none running AnimationsStyleSheet-bounce; } + """.trimIndent(), + "Animation class wasn't injected correctly" + ) + } +}