From a5c55de3bf2349143d3b01c1820bf63e6e794464 Mon Sep 17 00:00:00 2001 From: Shagen Ogandzhanian Date: Tue, 8 Jun 2021 16:02:05 +0200 Subject: [PATCH] Introduce markers for CSS Length and CSS percentage --- .../androidx/compose/web/css/CSSProperties.kt | 10 +-- .../androidx/compose/web/css/CSSUnits.kt | 19 +++-- .../jsTest/kotlin/StaticComposableTests.kt | 81 +++++++++++++------ 3 files changed, 74 insertions(+), 36 deletions(-) diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSProperties.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSProperties.kt index f56b81e62b2..0547dc226a3 100644 --- a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSProperties.kt +++ b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSProperties.kt @@ -227,7 +227,7 @@ inline fun StyleBuilder.border(crossinline borderBuild: CSSBorder.() -> Unit) { } fun StyleBuilder.border( - width: CSSUnitValue? = null, + width: CSSLengthValue? = null, style: LineStyle? = null, color: Color? = null ) { @@ -335,7 +335,7 @@ fun StyleBuilder.height(value: CSSAutoValue) { property("height", value) } -fun StyleBuilder.top(value: CSSUnitValue) { +fun StyleBuilder.top(value: CSSLengthOrPercentageValue) { property("top", value.asStylePropertyValue()) } @@ -343,7 +343,7 @@ fun StyleBuilder.top(value: CSSAutoValue) { property("top", value) } -fun StyleBuilder.bottom(value: CSSUnitValue) { +fun StyleBuilder.bottom(value: CSSLengthOrPercentageValue) { property("bottom", value.asStylePropertyValue()) } @@ -351,7 +351,7 @@ fun StyleBuilder.bottom(value: CSSAutoValue) { property("bottom", value) } -fun StyleBuilder.left(value: CSSUnitValue) { +fun StyleBuilder.left(value: CSSLengthOrPercentageValue) { property("left", value.asStylePropertyValue()) } @@ -359,7 +359,7 @@ fun StyleBuilder.left(value: CSSAutoValue) { property("left", value) } -fun StyleBuilder.right(value: CSSUnitValue) { +fun StyleBuilder.right(value: CSSLengthOrPercentageValue) { property("right", value.asStylePropertyValue()) } 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 cdb3d2a6051..bddd0444351 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 @@ -22,12 +22,11 @@ operator fun CSSSizeValue.div(num: Number): CSSSizeValue = n operator fun CSSSizeValue.plus(b: CSSSizeValue): CSSSizeValue = newUnit(value + b.value) operator fun CSSSizeValue.minus(b: CSSSizeValue): CSSSizeValue = newUnit(value - b.value) - -typealias CSSUnitValue = CSSSizeValue -typealias CSSpxValue = CSSSizeValue - -interface CSSUnitRel : CSSUnit -interface CSSUnitAbs: CSSUnit +interface CSSUnitLengthOrPercentage: CSSUnit +interface CSSUnitPercentage: CSSUnitLengthOrPercentage +interface CSSUnitLength: CSSUnitLengthOrPercentage +interface CSSUnitRel : CSSUnitLength +interface CSSUnitAbs: CSSUnitLength interface CSSUnitAngle: CSSUnit interface CSSUnitTime: CSSUnit interface CSSUnitFrequency: CSSUnit @@ -35,11 +34,17 @@ interface CSSUnitResolution: CSSUnit interface CSSUnitFlex: CSSUnit typealias CSSAngleValue = CSSSizeValue +typealias CSSLengthOrPercentageValue = CSSSizeValue +typealias CSSLengthValue = CSSSizeValue +typealias CSSPercentageValue = CSSSizeValue +typealias CSSUnitValue = CSSSizeValue +typealias CSSpxValue = CSSSizeValue + sealed interface CSSUnit { val value: String - object percent: CSSUnitRel { + object percent: CSSUnitPercentage { override val value: String = "%" } diff --git a/web/core/src/jsTest/kotlin/StaticComposableTests.kt b/web/core/src/jsTest/kotlin/StaticComposableTests.kt index 7e44c05df8d..53153396e90 100644 --- a/web/core/src/jsTest/kotlin/StaticComposableTests.kt +++ b/web/core/src/jsTest/kotlin/StaticComposableTests.kt @@ -27,6 +27,7 @@ import org.jetbrains.compose.web.css.justifyContent import org.jetbrains.compose.web.css.left import org.jetbrains.compose.web.css.opacity import org.jetbrains.compose.web.css.order +import org.jetbrains.compose.web.css.percent import org.jetbrains.compose.web.css.position import org.jetbrains.compose.web.css.px import org.jetbrains.compose.web.css.right @@ -78,7 +79,7 @@ class StaticComposableTests { attr("data-val", "some other data") id("verySpecial") } - ) {} + ) } val el = root.firstChild @@ -104,7 +105,7 @@ class StaticComposableTests { color("green") } } - ) {} + ) } assertEquals("opacity: 0.2; color: green;", (root.children[0] as HTMLElement).style.cssText) @@ -122,14 +123,14 @@ class StaticComposableTests { property("border", value("1px solid red")) } } - ) {} + ) Div( { style { border(3.px, color = Color("green")) } } - ) {} + ) } assertEquals("border: 1px solid red;", (root.children[0] as HTMLElement).style.cssText) @@ -157,14 +158,14 @@ class StaticComposableTests { order(-4) } } - ) {} + ) Div( { style { order(3) } } - ) {} + ) } assertEquals("order: -4;", (root.children[0] as HTMLElement).style.cssText) @@ -183,28 +184,28 @@ class StaticComposableTests { flexGrow(3) } } - ) {} + ) Div( { style { flexGrow(2.5) } } - ) {} + ) Div( { style { flexGrow(1e2) } } - ) {} + ) Div( { style { flexGrow(.6) } } - ) {} + ) } assertEquals("flex-grow: 3;", (root.children[0] as HTMLElement).style.cssText) @@ -225,28 +226,28 @@ class StaticComposableTests { flexShrink(3) } } - ) {} + ) Div( { style { flexShrink(2.5) } } - ) {} + ) Div( { style { flexShrink(1e2) } } - ) {} + ) Div( { style { flexShrink(.6) } } - ) {} + ) } assertEquals("flex-shrink: 3;", (root.children[0] as HTMLElement).style.cssText) @@ -267,7 +268,7 @@ class StaticComposableTests { width(100.px) } } - ) {} + ) } assertEquals("width: 100px;", (root.children[0] as HTMLElement).style.cssText) @@ -285,28 +286,28 @@ class StaticComposableTests { borderRadius(3.px) } } - ) {} + ) Div( { style { borderRadius(3.px, 5.px) } } - ) {} + ) Div( { style { borderRadius(3.px, 5.px, 4.px) } } - ) {} + ) Div( { style { borderRadius(3.px, 5.px, 4.px, 1.px) } } - ) {} + ) } assertEquals("border-radius: 3px;", (root.children[0] as HTMLElement).style.cssText) @@ -330,10 +331,18 @@ class StaticComposableTests { top(100.px) } } - ) {} + ) + Div( + { + style { + top(100.percent) + } + } + ) } assertEquals("top: 100px;", (root.children[0] as HTMLElement).style.cssText) + assertEquals("top: 100%;", (root.children[1] as HTMLElement).style.cssText) } @Test @@ -348,10 +357,18 @@ class StaticComposableTests { bottom(100.px) } } - ) {} + ) + Div( + { + style { + bottom(100.percent) + } + } + ) } assertEquals("bottom: 100px;", (root.children[0] as HTMLElement).style.cssText) + assertEquals("bottom: 100%;", (root.children[1] as HTMLElement).style.cssText) } @Test @@ -366,10 +383,18 @@ class StaticComposableTests { left(100.px) } } - ) {} + ) + Div( + { + style { + left(100.percent) + } + } + ) } assertEquals("left: 100px;", (root.children[0] as HTMLElement).style.cssText) + assertEquals("left: 100%;", (root.children[1] as HTMLElement).style.cssText) } @Test @@ -384,10 +409,18 @@ class StaticComposableTests { right(100.px) } } - ) {} + ) + Div( + { + style { + right(100.percent) + } + } + ) } assertEquals("right: 100px;", (root.children[0] as HTMLElement).style.cssText) + assertEquals("right: 100%;", (root.children[1] as HTMLElement).style.cssText) } @Test @@ -402,7 +435,7 @@ class StaticComposableTests { height(100.px) } } - ) {} + ) } assertEquals("height: 100px;", (root.children[0] as HTMLElement).style.cssText)