From de42b05b995d9efe03d7db7638f2ae433513f9cf Mon Sep 17 00:00:00 2001 From: Shagen Ogandzhanian Date: Fri, 4 Jun 2021 15:44:52 +0200 Subject: [PATCH] Introduce CSSUnitApiTests and slightly modify API according to the results of such testing --- .../kotlin/androidx/compose/web/css/CSS.kt | 8 -- .../androidx/compose/web/css/CSSUnits.kt | 12 +- web/core/src/jsTest/kotlin/CSSUnitApiTests.kt | 124 ++++++++++++++++++ 3 files changed, 125 insertions(+), 19 deletions(-) create mode 100644 web/core/src/jsTest/kotlin/CSSUnitApiTests.kt diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSS.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSS.kt index 8fdafa900d..aca33be2cb 100644 --- a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSS.kt +++ b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSS.kt @@ -368,23 +368,15 @@ external class CSS { fun em(value: Number): CSSemValue fun ex(value: Number): CSSexValue fun ch(value: Number): CSSchValue - fun ic(value: Number): CSSicValue fun rem(value: Number): CSSremValue - fun lh(value: Number): CSSlhValue - fun rlh(value: Number): CSSrlhValue fun vw(value: Number): CSSvwValue fun vh(value: Number): CSSvhValue - fun vi(value: Number): CSSviValue - fun vb(value: Number): CSSvbValue fun vmin(value: Number): CSSvminValue fun vmax(value: Number): CSSvmaxValue fun cm(value: Number): CSScmValue fun mm(value: Number): CSSmmValue fun Q(value: Number): CSSQValue - // function _in(value: Number) : CSSUnitValue -// export -// { _in as in } fun pt(value: Number): CSSptValue fun pc(value: Number): CSSpcValue fun px(value: Number): CSSpxValue diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt index ffb6a50b8b..e6577ff6e8 100644 --- a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt +++ b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt @@ -60,22 +60,12 @@ val Number.ex get(): CSSexValue = CSS.ex(this) val Number.ch get(): CSSchValue = CSS.ch(this) -val Number.ic - get(): CSSicValue = CSS.ic(this) -val Number.rem +val Number.cssRem get(): CSSremValue = CSS.rem(this) -val Number.lh - get(): CSSlhValue = CSS.lh(this) -val Number.rlh - get(): CSSrlhValue = CSS.rlh(this) val Number.vw get(): CSSvwValue = CSS.vw(this) val Number.vh get(): CSSvhValue = CSS.vh(this) -val Number.vi - get(): CSSviValue = CSS.vi(this) -val Number.vb - get(): CSSvbValue = CSS.vb(this) val Number.vmin get(): CSSvminValue = CSS.vmin(this) val Number.vmax diff --git a/web/core/src/jsTest/kotlin/CSSUnitApiTests.kt b/web/core/src/jsTest/kotlin/CSSUnitApiTests.kt new file mode 100644 index 0000000000..4aa5d75fb6 --- /dev/null +++ b/web/core/src/jsTest/kotlin/CSSUnitApiTests.kt @@ -0,0 +1,124 @@ +/* + * 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 + +import org.jetbrains.compose.web.css.CSS +import org.jetbrains.compose.web.css.CSSUnitValue +import org.jetbrains.compose.web.css.ch +import org.jetbrains.compose.web.css.cm +import org.jetbrains.compose.web.css.cssRem +import org.jetbrains.compose.web.css.deg +import org.jetbrains.compose.web.css.dpcm +import org.jetbrains.compose.web.css.dpi +import org.jetbrains.compose.web.css.dppx +import org.jetbrains.compose.web.css.em +import org.jetbrains.compose.web.css.fr +import org.jetbrains.compose.web.css.grad +import org.jetbrains.compose.web.css.mm +import org.jetbrains.compose.web.css.ms +import org.jetbrains.compose.web.css.number +import org.jetbrains.compose.web.css.pc +import org.jetbrains.compose.web.css.percent +import org.jetbrains.compose.web.css.pt +import org.jetbrains.compose.web.css.px +import org.jetbrains.compose.web.css.rad +import org.jetbrains.compose.web.css.s +import org.jetbrains.compose.web.css.turn +import org.jetbrains.compose.web.css.vh +import org.jetbrains.compose.web.css.vmax +import org.jetbrains.compose.web.css.vmin +import org.jetbrains.compose.web.css.vw +import kotlin.test.Test +import kotlin.test.assertEquals + +class CSSUnitApiTests { + // TODO: Cover CSS.Q, CSS.khz and CSS.hz after we'll get rid from polyfill + + private fun CSSUnitValue.assertStructure(value: Number, unit: String, description: String? = null) { + assertEquals(this.value, value, description) + assertEquals(this.unit, unit, description) + } + + // TODO: use regular assertEqual after we'll get rid from polyfill + private fun CSSUnitValue.assertStructure(otherUnit: CSSUnitValue, description: String? = null) { + return assertStructure(otherUnit.value, otherUnit.unit, description) + } + + @Test + fun builderInvocation() { + CSS.number(4).assertStructure(4, "number") + CSS.percent(4).assertStructure(4, "percent") + + CSS.em(4).assertStructure(4, "em") + CSS.ch(4).assertStructure(4, "ch") + + CSS.rem(4).assertStructure(4, "rem") + + CSS.vw(4).assertStructure(4, "vw") + CSS.vh(4).assertStructure(4, "vh") + + CSS.vmin(4).assertStructure(4, "vmin") + CSS.vmax(4).assertStructure(4, "vmax") + CSS.cm(4).assertStructure(4, "cm") + CSS.mm(4).assertStructure(4, "mm") + + CSS.pt(4).assertStructure(4, "pt") + CSS.pc(4).assertStructure(4, "pc") + CSS.px(4).assertStructure(4, "px") + + CSS.deg(4).assertStructure(4, "deg") + CSS.grad(4).assertStructure(4, "grad") + CSS.rad(4).assertStructure(4, "rad") + CSS.turn(4).assertStructure(4, "turn") + + CSS.s(4).assertStructure(4, "s") + CSS.ms(4).assertStructure(4, "ms") + + CSS.dpi(4).assertStructure(4, "dpi") + CSS.dpcm(4).assertStructure(4, "dpcm") + CSS.dppx(4).assertStructure(4, "dppx") + + CSS.fr(4).assertStructure(4, "fr") + } + + @Test + fun postfixInvocation() { + 4.number.assertStructure(CSS.number(4), "number postfix") + 4.percent.assertStructure(CSS.percent(4), "percent posfix") + + 4.em.assertStructure(CSS.em(4), "em postfix") + 4.ch.assertStructure(CSS.ch(4), "ch postfix") + + 4.cssRem.assertStructure(CSS.rem(4)) + + 4.vw.assertStructure(CSS.vw(4),"vw postfix") + 4.vh.assertStructure(CSS.vh(4), "vh postfix") + + 4.vmin.assertStructure(CSS.vmin(4), "vmin postfix") + 4.vmax.assertStructure(CSS.vmax(4), "vmax postfix") + 4.cm.assertStructure(CSS.cm(4), "cm postfix") + 4.mm.assertStructure(CSS.mm(4), "mm postfix") + + 4.pt.assertStructure(CSS.pt(4), "pt postfix") + 4.pc.assertStructure(CSS.pc(4), "pc postfix") + 4.px.assertStructure(CSS.px(4), "px postfix") + + 4.deg.assertStructure(CSS.deg(4), "deg postfix") + 4.grad.assertStructure(CSS.grad(4), "grad postfix") + 4.rad.assertStructure(CSS.rad(4), "rad postfix") + 4.turn.assertStructure(CSS.turn(4), "turn postfix") + + 4.s.assertStructure(CSS.s(4), "s postfix") + 4.ms.assertStructure(CSS.ms(4), "ms postfix") + + 4.dpi.assertStructure(CSS.dpi(4), "dpi postfix") + 4.dpcm.assertStructure(CSS.dpcm(4), "dpcm postfix") + 4.dppx.assertStructure(CSS.dppx(4), "dppx postfix") + + 4.fr.assertStructure(CSS.fr(4), "fr postfix") + } + +} \ No newline at end of file