Skip to content

Commit

Permalink
Introduce markers for CSS Length and CSS percentage
Browse files Browse the repository at this point in the history
  • Loading branch information
@Schahen
Schahen committed Jun 8, 2021
1 parent 6048760 commit a5c55de
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 36 deletions.
10 changes: 5 additions & 5 deletions web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSProperties.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
) {
Expand Down Expand Up @@ -335,31 +335,31 @@ fun StyleBuilder.height(value: CSSAutoValue) {
property("height", value)
}

fun StyleBuilder.top(value: CSSUnitValue) {
fun StyleBuilder.top(value: CSSLengthOrPercentageValue) {
property("top", value.asStylePropertyValue())
}

fun StyleBuilder.top(value: CSSAutoValue) {
property("top", value)
}

fun StyleBuilder.bottom(value: CSSUnitValue) {
fun StyleBuilder.bottom(value: CSSLengthOrPercentageValue) {
property("bottom", value.asStylePropertyValue())
}

fun StyleBuilder.bottom(value: CSSAutoValue) {
property("bottom", value)
}

fun StyleBuilder.left(value: CSSUnitValue) {
fun StyleBuilder.left(value: CSSLengthOrPercentageValue) {
property("left", value.asStylePropertyValue())
}

fun StyleBuilder.left(value: CSSAutoValue) {
property("left", value)
}

fun StyleBuilder.right(value: CSSUnitValue) {
fun StyleBuilder.right(value: CSSLengthOrPercentageValue) {
property("right", value.asStylePropertyValue())
}

Expand Down
19 changes: 12 additions & 7 deletions web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,24 +22,29 @@ operator fun <T : CSSUnit> CSSSizeValue<T>.div(num: Number): CSSSizeValue<T> = n
operator fun <T: CSSUnit> CSSSizeValue<T>.plus(b: CSSSizeValue<T>): CSSSizeValue<T> = newUnit(value + b.value)
operator fun <T: CSSUnit> CSSSizeValue<T>.minus(b: CSSSizeValue<T>): CSSSizeValue<T> = newUnit(value - b.value)


typealias CSSUnitValue = CSSSizeValue<CSSUnit>
typealias CSSpxValue = CSSSizeValue<CSSUnit.px>

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
interface CSSUnitResolution: CSSUnit
interface CSSUnitFlex: CSSUnit

typealias CSSAngleValue = CSSSizeValue<CSSUnitAngle>
typealias CSSLengthOrPercentageValue = CSSSizeValue<CSSUnitLengthOrPercentage>
typealias CSSLengthValue = CSSSizeValue<CSSUnitLength>
typealias CSSPercentageValue = CSSSizeValue<CSSUnitPercentage>
typealias CSSUnitValue = CSSSizeValue<CSSUnit>
typealias CSSpxValue = CSSSizeValue<CSSUnit.px>


sealed interface CSSUnit {
val value: String

object percent: CSSUnitRel {
object percent: CSSUnitPercentage {
override val value: String = "%"
}

Expand Down
81 changes: 57 additions & 24 deletions web/core/src/jsTest/kotlin/StaticComposableTests.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -78,7 +79,7 @@ class StaticComposableTests {
attr("data-val", "some other data")
id("verySpecial")
}
) {}
)
}

val el = root.firstChild
Expand All @@ -104,7 +105,7 @@ class StaticComposableTests {
color("green")
}
}
) {}
)
}

assertEquals("opacity: 0.2; color: green;", (root.children[0] as HTMLElement).style.cssText)
Expand All @@ -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)
Expand Down Expand Up @@ -157,14 +158,14 @@ class StaticComposableTests {
order(-4)
}
}
) {}
)
Div(
{
style {
order(3)
}
}
) {}
)
}

assertEquals("order: -4;", (root.children[0] as HTMLElement).style.cssText)
Expand All @@ -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)
Expand All @@ -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)
Expand All @@ -267,7 +268,7 @@ class StaticComposableTests {
width(100.px)
}
}
) {}
)
}

assertEquals("width: 100px;", (root.children[0] as HTMLElement).style.cssText)
Expand All @@ -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)
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -402,7 +435,7 @@ class StaticComposableTests {
height(100.px)
}
}
) {}
)
}

assertEquals("height: 100px;", (root.children[0] as HTMLElement).style.cssText)
Expand Down

0 comments on commit a5c55de

Please sign in to comment.