From d0a2664e627b10beef8cc84667b5bc63f668a485 Mon Sep 17 00:00:00 2001
From: Shagen Ogandzhanian <shagen.ogandzhanian@jetbrains.com>
Date: Thu, 8 Jul 2021 22:59:21 +0200
Subject: [PATCH] Basic support for overflow and its constituents in CSS API

---
 .../compose/web/css/properties/overflow.kt    |  23 ++++
 .../src/jsTest/kotlin/css/CSSOverflowTests.kt | 107 ++++++++++++++++++
 2 files changed, 130 insertions(+)
 create mode 100644 web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/overflow.kt
 create mode 100644 web/core/src/jsTest/kotlin/css/CSSOverflowTests.kt

diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/overflow.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/overflow.kt
new file mode 100644
index 0000000000..9785d00f2e
--- /dev/null
+++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/overflow.kt
@@ -0,0 +1,23 @@
+/*
+ * 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.css
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
+fun StyleBuilder.overflowX(value: String) {
+    property("overflow-x", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
+fun StyleBuilder.overflowY(value: String) {
+    property("overflow-y", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
+fun StyleBuilder.overflow(value: String) {
+    property("overflow", value)
+}
+
+
diff --git a/web/core/src/jsTest/kotlin/css/CSSOverflowTests.kt b/web/core/src/jsTest/kotlin/css/CSSOverflowTests.kt
new file mode 100644
index 0000000000..2fdc7d7328
--- /dev/null
+++ b/web/core/src/jsTest/kotlin/css/CSSOverflowTests.kt
@@ -0,0 +1,107 @@
+/*
+ * 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.*
+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 CSSOverflowTests {
+    @Test
+    fun overflowX() = runTest {
+        composition {
+            Div({
+                style {
+                    overflowX("visible")
+                }
+            })
+            Div({
+                style {
+                    overflowX("hidden")
+                }
+            })
+            Div({
+                style {
+                    overflowX("clip")
+                }
+            })
+            Div({
+                style {
+                    overflowX("scroll")
+                }
+            })
+            Div({
+                style {
+                    overflowX("auto")
+                }
+            })
+        }
+
+        assertEquals("visible", (root.children[0] as HTMLElement).style.overflowX)
+        assertEquals("hidden", (root.children[1] as HTMLElement).style.overflowX)
+        assertEquals("clip", (root.children[2] as HTMLElement).style.overflowX)
+        assertEquals("scroll", (root.children[3] as HTMLElement).style.overflowX)
+        assertEquals("auto", (root.children[4] as HTMLElement).style.overflowX)
+    }
+
+    @Test
+    fun overflowY() = runTest {
+        composition {
+            Div({
+                style {
+                    overflowY("visible")
+                }
+            })
+            Div({
+                style {
+                    overflowY("hidden")
+                }
+            })
+            Div({
+                style {
+                    overflowY("clip")
+                }
+            })
+            Div({
+                style {
+                    overflowY("scroll")
+                }
+            })
+            Div({
+                style {
+                    overflowY("auto")
+                }
+            })
+        }
+
+        assertEquals("visible", (root.children[0] as HTMLElement).style.overflowY)
+        assertEquals("hidden", (root.children[1] as HTMLElement).style.overflowY)
+        assertEquals("clip", (root.children[2] as HTMLElement).style.overflowY)
+        assertEquals("scroll", (root.children[3] as HTMLElement).style.overflowY)
+        assertEquals("auto", (root.children[4] as HTMLElement).style.overflowY)
+    }
+
+    @Test
+    fun overflow() = runTest {
+        composition {
+            Div({
+                style {
+                    overflow("clip")
+                }
+            })
+        }
+
+        val style = (root.children[0] as HTMLElement).style
+        assertEquals("clip", style.overflowX)
+        assertEquals("clip", style.overflowY)
+    }
+
+
+}
\ No newline at end of file