diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/border.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/border.kt index dfde9d8155..c8d74432e8 100644 --- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/border.kt +++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/border.kt @@ -79,3 +79,30 @@ fun StyleBuilder.borderRadius( ) } +fun StyleBuilder.borderWidth(width: CSSNumeric) { + property("border-width", width) +} + +fun StyleBuilder.borderWidth(topLeft: CSSNumeric, bottomRight: CSSNumeric) { + property("border-width", "$topLeft $bottomRight") +} + +fun StyleBuilder.borderWidth( + topLeft: CSSNumeric, + topRightAndBottomLeft: CSSNumeric, + bottomRight: CSSNumeric +) { + property("border-width", "$topLeft $topRightAndBottomLeft $bottomRight") +} + +fun StyleBuilder.borderWidth( + topLeft: CSSNumeric, + topRight: CSSNumeric, + bottomRight: CSSNumeric, + bottomLeft: CSSNumeric +) { + property( + "border-width", + "$topLeft $topRight $bottomRight $bottomLeft" + ) +} diff --git a/web/core/src/jsTest/kotlin/StaticComposableTests.kt b/web/core/src/jsTest/kotlin/StaticComposableTests.kt index 1639243be2..9cf3681bfd 100644 --- a/web/core/src/jsTest/kotlin/StaticComposableTests.kt +++ b/web/core/src/jsTest/kotlin/StaticComposableTests.kt @@ -253,51 +253,6 @@ class StaticComposableTests { assertEquals("flex-shrink: 0.6;", (root.children[3] as HTMLElement).style.cssText) } - @Test - fun stylesBorderRadius() { - val root = "div".asHtmlElement() - renderComposable( - root = root - ) { - Div( - { - style { - 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) - assertEquals("border-radius: 3px 5px;", (root.children[1] as HTMLElement).style.cssText) - assertEquals("border-radius: 3px 5px 4px;", (root.children[2] as HTMLElement).style.cssText) - assertEquals( - "border-radius: 3px 5px 4px 1px;", - (root.children[3] as HTMLElement).style.cssText - ) - } - @Test fun stylesTop() { val root = "div".asHtmlElement() diff --git a/web/core/src/jsTest/kotlin/css/CSSBorderTests.kt b/web/core/src/jsTest/kotlin/css/CSSBorderTests.kt new file mode 100644 index 0000000000..1bffe06777 --- /dev/null +++ b/web/core/src/jsTest/kotlin/css/CSSBorderTests.kt @@ -0,0 +1,106 @@ +/* + * 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.core.tests.runTest +import org.jetbrains.compose.web.css.borderRadius +import org.jetbrains.compose.web.css.borderWidth +import org.jetbrains.compose.web.css.px +import org.jetbrains.compose.web.dom.Div +import org.w3c.dom.HTMLElement +import org.w3c.dom.get +import kotlin.test.Test +import kotlin.test.assertEquals + +class CSSBorderTests { + + @Test + fun borderRadius() = runTest { + composition { + Div( + { + style { + 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("3px", (root.children[0] as HTMLElement).style.borderRadius) + assertEquals("3px 5px", (root.children[1] as HTMLElement).style.borderRadius) + assertEquals("3px 5px 4px", (root.children[2] as HTMLElement).style.borderRadius) + assertEquals( + "3px 5px 4px 1px", + (root.children[3] as HTMLElement).style.borderRadius + ) + } + + + @Test + fun borderWidth() = runTest { + composition { + Div( + { + style { + borderWidth(2.px) + } + } + ) + Div( + { + style { + borderWidth(3.px, 7.px) + } + } + ) + Div( + { + style { + borderWidth(3.px, 5.px, 4.px) + } + } + ) + Div( + { + style { + borderWidth(3.px, 5.px, 4.px, 2.px) + } + } + ) + } + + assertEquals("2px", (root.children[0] as HTMLElement).style.borderWidth) + assertEquals("3px 7px", (root.children[1] as HTMLElement).style.borderWidth) + assertEquals("3px 5px 4px", (root.children[2] as HTMLElement).style.borderWidth) + assertEquals( + "3px 5px 4px 2px", + (root.children[3] as HTMLElement).style.borderWidth + ) + } + + +} \ No newline at end of file