From 99b1751f2e1267034ddb4951f215953e713dbb96 Mon Sep 17 00:00:00 2001
From: Shagen Ogandzhanian <shagen.ogandzhanian@jetbrains.com>
Date: Mon, 12 Jul 2021 19:20:48 +0200
Subject: [PATCH] Basic support for boxSizing in CSS API

---
 .../compose/web/css/properties/box.kt         |  5 ++++
 web/core/src/jsTest/kotlin/css/CSSBoxTests.kt | 25 +++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/box.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/box.kt
index c235e101f6..a6ad921e14 100644
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/box.kt
+++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/box.kt
@@ -21,4 +21,9 @@ fun StyleBuilder.height(value: CSSNumeric) {
 
 fun StyleBuilder.height(value: CSSAutoKeyword) {
     property("height", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
+fun StyleBuilder.boxSizing(value: String) {
+    property("box-sizing", value)
 }
\ No newline at end of file
diff --git a/web/core/src/jsTest/kotlin/css/CSSBoxTests.kt b/web/core/src/jsTest/kotlin/css/CSSBoxTests.kt
index 19b53299d6..85f16ae464 100644
--- a/web/core/src/jsTest/kotlin/css/CSSBoxTests.kt
+++ b/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.runTest
+import org.jetbrains.compose.web.css.boxSizing
 import org.jetbrains.compose.web.css.height
 import org.jetbrains.compose.web.css.px
 import org.jetbrains.compose.web.css.width
@@ -49,4 +50,28 @@ class CSSBoxTests {
         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)
+    }
+
+
 }
\ No newline at end of file