Browse Source

Basic support for border-width in CSS API

pull/880/head v0.5.0-build243
Shagen Ogandzhanian 3 years ago
parent
commit
24e7e3dd16
  1. 27
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/border.kt
  2. 45
      web/core/src/jsTest/kotlin/StaticComposableTests.kt
  3. 106
      web/core/src/jsTest/kotlin/css/CSSBorderTests.kt

27
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"
)
}

45
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) 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 @Test
fun stylesTop() { fun stylesTop() {
val root = "div".asHtmlElement() val root = "div".asHtmlElement()

106
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
)
}
}
Loading…
Cancel
Save