Browse Source

Basic support for boxSizing in CSS API

pull/880/head
Shagen Ogandzhanian 3 years ago
parent
commit
99b1751f2e
  1. 5
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/box.kt
  2. 25
      web/core/src/jsTest/kotlin/css/CSSBoxTests.kt

5
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/box.kt

@ -22,3 +22,8 @@ fun StyleBuilder.height(value: CSSNumeric) {
fun StyleBuilder.height(value: CSSAutoKeyword) { fun StyleBuilder.height(value: CSSAutoKeyword) {
property("height", value) property("height", value)
} }
// https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
fun StyleBuilder.boxSizing(value: String) {
property("box-sizing", value)
}

25
web/core/src/jsTest/kotlin/css/CSSBoxTests.kt

@ -7,6 +7,7 @@ package org.jetbrains.compose.web.core.tests.css
import org.jetbrains.compose.web.core.tests.asHtmlElement import org.jetbrains.compose.web.core.tests.asHtmlElement
import org.jetbrains.compose.web.core.tests.runTest import org.jetbrains.compose.web.core.tests.runTest
import org.jetbrains.compose.web.css.boxSizing
import org.jetbrains.compose.web.css.height import org.jetbrains.compose.web.css.height
import org.jetbrains.compose.web.css.px import org.jetbrains.compose.web.css.px
import org.jetbrains.compose.web.css.width import org.jetbrains.compose.web.css.width
@ -49,4 +50,28 @@ class CSSBoxTests {
assertEquals("90px", (root.children[0] as HTMLElement).style.height) assertEquals("90px", (root.children[0] as HTMLElement).style.height)
} }
@Test
fun boxSizing() = runTest {
composition {
Div(
{
style {
boxSizing("border-box")
}
}
)
Div(
{
style {
boxSizing("content-box")
}
}
)
}
assertEquals("border-box", (root.children[0] as HTMLElement).style.boxSizing)
assertEquals("content-box", (root.children[1] as HTMLElement).style.boxSizing)
}
} }
Loading…
Cancel
Save