Merge branch 'master' into CSS_GRID_EXAMPLE

ci/compose-uber-jar/gradle.properties

@@ -1,3 +1,3 @@
 # __LATEST_COMPOSE_RELEASE_VERSION__
-compose.version=0.4.0
+compose.version=0.5.0-build262
 kotlin.code.style=official

components/build.gradle.kts

@@ -10,7 +10,7 @@ buildscript {
     dependencies {
         classpath("org.jetbrains.compose:compose-gradle-plugin:$composeVersion")
         // __KOTLIN_COMPOSE_VERSION__
-        classpath(kotlin("gradle-plugin", version = "1.5.10"))
+        classpath(kotlin("gradle-plugin", version = "1.5.21"))
     }
 }
 

components/gradle.properties

@@ -4,4 +4,4 @@ android.enableJetifier=true
 kotlin.code.style=official
 
 # __LATEST_COMPOSE_RELEASE_VERSION__
-compose.version=0.4.0
+compose.version=0.5.0-build262

compose/frameworks/support

@@ -1 +1 @@
-Subproject commit 9b5ede8dc435293ac09419421528921b8fed27fb
+Subproject commit 3de47bade63fae3a9ee0b7b5a5d9028ccaf0e3ef

examples/notepad/src/main/kotlin/NotepadApplication.kt

@@ -1,4 +1,5 @@
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.key
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.window.MenuScope
@@ -14,8 +15,10 @@ fun NotepadApplication(state: NotepadApplicationState) {
     }
 
     for (window in state.windows) {
+        key(window) {
             NotepadWindow(window)
         }
+    }
 }
 
 @OptIn(ExperimentalComposeUiApi::class)

gradle-plugins/compose/src/test/kotlin/org/jetbrains/compose/test/TestKotlinVersion.kt

@@ -8,6 +8,6 @@ package org.jetbrains.compose.test
 @Suppress("EnumEntryName")
 enum class TestKotlinVersion(val versionString: String) {
     // __KOTLIN_COMPOSE_VERSION__
-    Default("1.5.10"),
+    Default("1.5.21"),
     V1_5_20("1.5.20")
 }

gradle-plugins/gradle.properties

@@ -6,7 +6,7 @@ kotlin.code.style=official
 # unless overridden by COMPOSE_GRADLE_PLUGIN_COMPOSE_VERSION env var.
 #
 # __LATEST_COMPOSE_RELEASE_VERSION__
-compose.version=0.4.0
+compose.version=0.5.0-build262
 compose.with.web=false
 
 # A version of Gradle plugin, that will be published,

templates/desktop-template/build.gradle.kts

@@ -3,9 +3,9 @@ import org.jetbrains.compose.desktop.application.dsl.TargetFormat
 
 plugins {
     // __KOTLIN_COMPOSE_VERSION__
-    kotlin("jvm") version "1.5.10"
+    kotlin("jvm") version "1.5.21"
     // __LATEST_COMPOSE_RELEASE_VERSION__
-    id("org.jetbrains.compose") version (System.getenv("COMPOSE_TEMPLATE_COMPOSE_VERSION") ?: "0.5.0-build226")
+    id("org.jetbrains.compose") version (System.getenv("COMPOSE_TEMPLATE_COMPOSE_VERSION") ?: "0.5.0-build262")
 }
 
 repositories {

templates/multiplatform-template/build.gradle.kts

@@ -1,6 +1,6 @@
 buildscript {
     // __LATEST_COMPOSE_RELEASE_VERSION__
-    val composeVersion = System.getenv("COMPOSE_TEMPLATE_COMPOSE_VERSION") ?: "0.5.0-build226"
+    val composeVersion = System.getenv("COMPOSE_TEMPLATE_COMPOSE_VERSION") ?: "0.5.0-build262"
 
     repositories {
         google()
@@ -12,7 +12,7 @@ buildscript {
         classpath("org.jetbrains.compose:compose-gradle-plugin:$composeVersion")
         classpath("com.android.tools.build:gradle:4.0.1")
         // __KOTLIN_COMPOSE_VERSION__
-        classpath(kotlin("gradle-plugin", version = "1.5.10"))
+        classpath(kotlin("gradle-plugin", version = "1.5.21"))
     }
 }
 

tutorials/Desktop_Components/README.md

@@ -256,6 +256,7 @@ The main arguments of the `BoxWithTooltip` function:
 ```kotlin
 import androidx.compose.desktop.Window
 import androidx.compose.foundation.BoxWithTooltip
+import androidx.compose.foundation.TooltipPlacement
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
@@ -293,7 +294,11 @@ fun main() = Window(title = "Tooltip Example", size = IntSize(300, 300)) {
                     }
                 },
                 delay = 600, // in milliseconds
+                tooltipPlacement = TooltipPlacement(
+                    anchor = TooltipPlacement.Anchor.Pointer,
+                    alignment = Alignment.BottomEnd,
                     offset = if (index % 2 == 0) DpOffset(-16.dp, 0.dp) else DpOffset.Zero // tooltip offset
+                )
             ) {
                 Button(onClick = {}) { Text(text = name) }
             }

tutorials/Getting_Started/README.md

@@ -32,11 +32,11 @@ packaging JDK 15 or later must be used.
 
 ### Update the wizard plugin
 
-The Сompose plugin version used in the wizard above may be not the last. Update the version of the plugin to the latest available by editing the `build.gradle.kts` file, finding and updating the version information as shown below. In this example the latest version of the plugin was 0.5.0-build235 and a compatible version of kotlin was 1.5.10. For the latest versions, see the [latest versions](https://github.com/JetBrains/compose-jb/releases) site and the [Kotlin](https://kotlinlang.org/) site.
+The Сompose plugin version used in the wizard above may be not the last. Update the version of the plugin to the latest available by editing the `build.gradle.kts` file, finding and updating the version information as shown below. In this example the latest version of the plugin was 0.5.0-build262 and a compatible version of kotlin was 1.5.21. For the latest versions, see the [latest versions](https://github.com/JetBrains/compose-jb/releases) site and the [Kotlin](https://kotlinlang.org/) site.
 ```
 plugins {
-    kotlin("jvm") version "1.5.10"
-    id("org.jetbrains.compose") version "0.5.0-build235"
+    kotlin("jvm") version "1.5.21"
+    id("org.jetbrains.compose") version "0.5.0-build262"
 }
 ```
 
@@ -71,8 +71,8 @@ Then create `build.gradle.kts` with the following content:
 import org.jetbrains.compose.compose
 
 plugins {
-    kotlin("jvm") version "1.5.10"
-    id("org.jetbrains.compose") version "0.5.0-build235"
+    kotlin("jvm") version "1.5.21"
+    id("org.jetbrains.compose") version "0.5.0-build262"
 }
 
 repositories {

tutorials/Window_API_new/README.md

@@ -191,6 +191,7 @@ fun getTrayIcon(): BufferedImage {
 If an application has multiple windows, then it is better to put its state into a separate class and open/close window in response to `mutableStateListOf` changes (see [notepad example](https://github.com/JetBrains/compose-jb/tree/master/examples/notepad) for more complex use cases):
 ```kotlin
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.key
 import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.ExperimentalComposeUiApi
@@ -203,8 +204,10 @@ fun main() = application {
     val applicationState = remember { MyApplicationState() }
 
     for (window in applicationState.windows) {
+        key(window) {
             MyWindow(window)
         }
+    }
 }
 
 @OptIn(ExperimentalComposeUiApi::class)

web/build.gradle.kts

@@ -42,6 +42,7 @@ subprojects {
 
     repositories {
         gradlePluginPortal()
+        mavenLocal()
         mavenCentral()
         maven {
             url = uri("https://maven.pkg.jetbrains.space/public/p/compose/dev")

web/compose-compiler-integration/main-template/build.gradle.kts

@@ -1,9 +1,10 @@
 plugins {
-    kotlin("multiplatform") version "1.5.10"
+    kotlin("multiplatform") version "1.5.21"
     id("org.jetbrains.compose")
 }
 
 repositories {
+    mavenLocal()
     mavenCentral()
     maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
 }

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/PredefinedAttrValues.kt

@@ -167,8 +167,8 @@ enum class Scope(val str: String) {
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
  */
 @Suppress("Unused", "NOTHING_TO_INLINE", "NESTED_CLASS_IN_EXTERNAL_INTERFACE", "INLINE_EXTERNAL_DECLARATION", "WRONG_BODY_OF_EXTERNAL_DECLARATION", "NESTED_EXTERNAL_DECLARATION", "ClassName")
-external interface AutoComplete {
-    external companion object {
+interface AutoComplete {
+     companion object {
         /**
          * The browser is not permitted to automatically enter or select a value for this field. It is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically entered.
          * Note: In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See the autocomplete attribute and login fields.

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSEnums.kt

@@ -2,12 +2,12 @@
 
 package org.jetbrains.compose.web.css
 
-external interface StylePropertyEnum: StylePropertyString
+interface StylePropertyEnum: StylePropertyString
 inline val StylePropertyEnum.name get() = this.unsafeCast<String>()
 inline val StylePropertyEnum.value get() = this.unsafeCast<String>()
 
-external interface LineStyle: StylePropertyEnum {
-    external companion object {
+interface LineStyle: StylePropertyEnum {
+    companion object {
         inline val None get() = LineStyle("none")
         inline val Hidden get() = LineStyle("hidden")
         inline val Dotted get() = LineStyle("dotted")
@@ -22,8 +22,8 @@ external interface LineStyle: StylePropertyEnum {
 }
 inline fun LineStyle(value: String) = value.unsafeCast<LineStyle>()
 
-external interface DisplayStyle: StylePropertyEnum {
-    external companion object {
+interface DisplayStyle: StylePropertyEnum {
+    companion object {
         inline val Block get() = DisplayStyle("block")
         inline val Inline get() = DisplayStyle("inline")
         inline val InlineBlock get() = DisplayStyle("inline-block")
@@ -57,7 +57,7 @@ external interface DisplayStyle: StylePropertyEnum {
 }
 inline fun DisplayStyle(value: String) = value.unsafeCast<DisplayStyle>()
 
-external interface FlexDirection: StylePropertyEnum {
+interface FlexDirection: StylePropertyEnum {
     companion object {
         inline val Row get() = FlexDirection("row")
         inline val RowReverse get() = FlexDirection("row-reverse")
@@ -67,7 +67,7 @@ external interface FlexDirection: StylePropertyEnum {
 }
 inline fun FlexDirection(value: String) = value.unsafeCast<FlexDirection>()
 
-external interface FlexWrap: StylePropertyEnum {
+interface FlexWrap: StylePropertyEnum {
     companion object {
         inline val Wrap get() = FlexWrap("wrap")
         inline val Nowrap get() = FlexWrap("nowrap")
@@ -76,7 +76,7 @@ external interface FlexWrap: StylePropertyEnum {
 }
 inline fun FlexWrap(value: String) = value.unsafeCast<FlexWrap>()
 
-external interface JustifyContent: StylePropertyEnum {
+interface JustifyContent: StylePropertyEnum {
     companion object {
         inline val Center get() = JustifyContent("center")
         inline val Start get() = JustifyContent("start")
@@ -99,7 +99,7 @@ external interface JustifyContent: StylePropertyEnum {
 }
 inline fun JustifyContent(value: String) = value.unsafeCast<JustifyContent>()
 
-external interface AlignSelf: StylePropertyEnum {
+interface AlignSelf: StylePropertyEnum {
     companion object {
         inline val Auto get() = AlignSelf("auto")
         inline val Normal get() = AlignSelf("normal")
@@ -123,7 +123,7 @@ external interface AlignSelf: StylePropertyEnum {
 }
 inline fun AlignSelf(value: String) = value.unsafeCast<AlignSelf>()
 
-external interface AlignItems: StylePropertyEnum {
+interface AlignItems: StylePropertyEnum {
     companion object {
         inline val Normal get() = AlignItems("normal")
         inline val Stretch get() = AlignItems("stretch")
@@ -145,7 +145,7 @@ external interface AlignItems: StylePropertyEnum {
 }
 inline fun AlignItems(value: String) = value.unsafeCast<AlignItems>()
 
-external interface AlignContent: StylePropertyEnum {
+interface AlignContent: StylePropertyEnum {
     companion object {
         inline val Center get() = AlignContent("center")
         inline val Start get() = AlignContent("start")
@@ -169,7 +169,7 @@ external interface AlignContent: StylePropertyEnum {
 }
 inline fun AlignContent(value: String) = value.unsafeCast<AlignContent>()
 
-external interface Position: StylePropertyEnum {
+interface Position: StylePropertyEnum {
     companion object {
         inline val Static get() = Position("static")
         inline val Relative get() = Position("relative")
@@ -182,7 +182,7 @@ inline fun Position(value: String) = value.unsafeCast<Position>()
 
 typealias LanguageCode = String
 
-external interface StepPosition: StylePropertyEnum {
+interface StepPosition: StylePropertyEnum {
     companion object {
         inline val JumpStart get() = StepPosition("jump-start")
         inline val JumpEnd get() = StepPosition("jump-end")
@@ -194,7 +194,7 @@ external interface StepPosition: StylePropertyEnum {
 }
 inline fun StepPosition(value: String) = value.unsafeCast<StepPosition>()
 
-external interface AnimationTimingFunction: StylePropertyEnum {
+interface AnimationTimingFunction: StylePropertyEnum {
     companion object {
         inline val Ease get() = AnimationTimingFunction("ease")
         inline val EaseIn get() = AnimationTimingFunction("ease-in")
@@ -215,7 +215,7 @@ external interface AnimationTimingFunction: StylePropertyEnum {
 }
 inline fun AnimationTimingFunction(value: String) = value.unsafeCast<AnimationTimingFunction>()
 
-external interface AnimationDirection: StylePropertyEnum {
+interface AnimationDirection: StylePropertyEnum {
     companion object {
         inline val Normal get() = AnimationDirection("normal")
         inline val Reverse get() = AnimationDirection("reverse")
@@ -229,7 +229,7 @@ external interface AnimationDirection: StylePropertyEnum {
 }
 inline fun AnimationDirection(value: String) = value.unsafeCast<AnimationDirection>()
 
-external interface AnimationFillMode: StylePropertyEnum {
+interface AnimationFillMode: StylePropertyEnum {
     companion object {
         inline val None get() = AnimationFillMode("none")
         inline val Forwards get() = AnimationFillMode("forwards")
@@ -239,7 +239,7 @@ external interface AnimationFillMode: StylePropertyEnum {
 }
 inline fun AnimationFillMode(value: String) = value.unsafeCast<AnimationFillMode>()
 
-external interface AnimationPlayState: StylePropertyEnum {
+interface AnimationPlayState: StylePropertyEnum {
     companion object {
         inline val Running get() = AnimationPlayState("running")
         inline val Paused get() = AnimationPlayState("Paused")

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSUnits.kt

@@ -16,16 +16,16 @@ data class CSSUnitValueTyped<T : CSSUnit>(
     override fun toString(): String = "$value$unit"
 }
 
-external interface CSSUnitLengthOrPercentage: CSSUnit
-external interface CSSUnitPercentage: CSSUnitLengthOrPercentage
-external interface CSSUnitLength: CSSUnitLengthOrPercentage
-external interface CSSUnitRel : CSSUnitLength
-external interface CSSUnitAbs: CSSUnitLength
-external interface CSSUnitAngle: CSSUnit
-external interface CSSUnitTime: CSSUnit
-external interface CSSUnitFrequency: CSSUnit
-external interface CSSUnitResolution: CSSUnit
-external interface CSSUnitFlex: CSSUnit
+interface CSSUnitLengthOrPercentage: CSSUnit
+interface CSSUnitPercentage: CSSUnitLengthOrPercentage
+interface CSSUnitLength: CSSUnitLengthOrPercentage
+interface CSSUnitRel : CSSUnitLength
+interface CSSUnitAbs: CSSUnitLength
+interface CSSUnitAngle: CSSUnit
+interface CSSUnitTime: CSSUnit
+interface CSSUnitFrequency: CSSUnit
+interface CSSUnitResolution: CSSUnit
+interface CSSUnitFlex: CSSUnit
 
 typealias CSSAngleValue = CSSSizeValue<out CSSUnitAngle>
 typealias CSSLengthOrPercentageValue = CSSSizeValue<out CSSUnitLengthOrPercentage>
@@ -36,74 +36,74 @@ typealias CSSNumeric = CSSNumericValue<out CSSUnit>
 typealias CSSpxValue = CSSSizeValue<CSSUnit.px>
 
 // fake interfaces to distinguish units
-external interface CSSUnit {
-    external interface percent: CSSUnitPercentage
+interface CSSUnit {
+    interface percent: CSSUnitPercentage
 
-    external interface em: CSSUnitRel
+    interface em: CSSUnitRel
 
-    external interface ex: CSSUnitRel
+    interface ex: CSSUnitRel
 
-    external interface ch: CSSUnitRel
+    interface ch: CSSUnitRel
 
-    external interface ic: CSSUnitRel
+    interface ic: CSSUnitRel
 
-    external interface rem: CSSUnitRel
+    interface rem: CSSUnitRel
 
-    external interface lh: CSSUnitRel
+    interface lh: CSSUnitRel
 
-    external interface rlh: CSSUnitRel
+    interface rlh: CSSUnitRel
 
-    external interface vw: CSSUnitRel
+    interface vw: CSSUnitRel
 
-    external interface vh: CSSUnitRel
+    interface vh: CSSUnitRel
 
-    external interface vi: CSSUnitRel
+    interface vi: CSSUnitRel
 
-    external interface vb: CSSUnitRel
+    interface vb: CSSUnitRel
 
-    external interface vmin: CSSUnitRel
+    interface vmin: CSSUnitRel
 
-    external interface vmax: CSSUnitRel
+    interface vmax: CSSUnitRel
 
-    external interface cm: CSSUnitRel
+    interface cm: CSSUnitRel
 
-    external interface mm: CSSUnitRel
+    interface mm: CSSUnitRel
 
-    external interface Q: CSSUnitRel
+    interface Q: CSSUnitRel
 
-    external interface pt: CSSUnitAbs
+    interface pt: CSSUnitAbs
 
-    external interface pc: CSSUnitAbs
+    interface pc: CSSUnitAbs
 
-    external interface px: CSSUnitAbs
+    interface px: CSSUnitAbs
 
-    external interface deg: CSSUnitAngle
+    interface deg: CSSUnitAngle
 
-    external interface grad: CSSUnitAngle
+    interface grad: CSSUnitAngle
 
-    external interface rad: CSSUnitAngle
+    interface rad: CSSUnitAngle
 
-    external interface turn: CSSUnitAngle
+    interface turn: CSSUnitAngle
 
-    external interface s: CSSUnitTime
+    interface s: CSSUnitTime
 
-    external interface ms: CSSUnitTime
+    interface ms: CSSUnitTime
 
-    external interface Hz: CSSUnitFrequency
+    interface Hz: CSSUnitFrequency
 
-    external interface kHz: CSSUnitFrequency
+    interface kHz: CSSUnitFrequency
 
-    external interface dpi: CSSUnitResolution
+    interface dpi: CSSUnitResolution
 
-    external interface dpcm: CSSUnitResolution
+    interface dpcm: CSSUnitResolution
 
-    external interface dppx: CSSUnitResolution
+    interface dppx: CSSUnitResolution
 
-    external interface fr: CSSUnitFlex
+    interface fr: CSSUnitFlex
 
-    external interface number: CSSUnit
+    interface number: CSSUnit
 
-    external companion object {
+    companion object {
         inline val percent get() = "%".unsafeCast<percent>()
 
         inline val em get() = "em".unsafeCast<em>()

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

@@ -27,6 +27,24 @@ fun StyleBuilder.gridColumn(start: Int, end: Int) {
 }
 
 
+// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start
+fun StyleBuilder.gridColumnStart(value: String) {
+    property("grid-column-start", value)
+}
+
+fun StyleBuilder.gridColumnStart(value: Int) {
+    property("grid-column-start", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end
+fun StyleBuilder.gridColumnEnd(value: String) {
+    property("grid-column-end", value)
+}
+
+fun StyleBuilder.gridColumnEnd(value: Int) {
+    property("grid-column-end", value)
+}
+
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
 fun StyleBuilder.gridRow(value: String) {
     property("grid-row", value)
@@ -48,6 +66,24 @@ fun StyleBuilder.gridRow(start: Int, end: Int) {
     property("grid-row", "$start / $end")
 }
 
+// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start
+fun StyleBuilder.gridRowStart(value: String) {
+    property("grid-row-start", value)
+}
+
+fun StyleBuilder.gridRowStart(value: Int) {
+    property("grid-row-start", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end
+fun StyleBuilder.gridRowEnd(value: String) {
+    property("grid-row-end", value)
+}
+
+fun StyleBuilder.gridRowEnd(value: Int) {
+    property("grid-row-end", value)
+}
+
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
 fun StyleBuilder.gridTemplateColumns(value: String) {
     property("grid-template-columns", value)

web/core/src/jsTest/kotlin/FailingTestCases.kt

@@ -0,0 +1,40 @@
+/*
+ * 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
+
+import kotlin.test.Test
+import kotlin.test.assertTrue
+
+class FailingTestCases {
+
+    @Test
+    fun externalInterfaceSimulatingEnum() {
+        var expectedErrorThrown = false
+        try {
+            // Doesn't throw in kotlin 1.5.10.
+            // Since kotlin 1.5.20 (and 1.5.21) throws `ReferenceError: MyI is not defined`
+            useMyI(MyI.Value1)
+        } catch (e: Throwable) {
+            expectedErrorThrown = true
+        }
+        assertTrue(expectedErrorThrown)
+    }
+}
+
+@Suppress("Unused", "NOTHING_TO_INLINE", "NESTED_CLASS_IN_EXTERNAL_INTERFACE", "INLINE_EXTERNAL_DECLARATION", "WRONG_BODY_OF_EXTERNAL_DECLARATION", "NESTED_EXTERNAL_DECLARATION", "ClassName")
+private external interface MyI {
+    companion object {
+        inline val Value1 get() = MyI("value1")
+        inline val Value2 get() = MyI("value2")
+    }
+}
+
+@Suppress("NOTHING_TO_INLINE")
+private inline fun MyI(value: String) = value.unsafeCast<MyI>()
+
+private fun useMyI(myI: MyI) {
+    println("Using MyI = " + myI.unsafeCast<String>())
+}

web/core/src/jsTest/kotlin/css/GridTests.kt

@@ -63,6 +63,159 @@ class GridColumnTests {
     }
 }
 
+class GridColumnEndTests {
+    @Test
+    fun gridColumnEndOneValue() = runTest {
+        composition {
+            Div({ style { gridColumnEnd("1") } })
+            Div({ style { gridColumnEnd("somegridarea") } })
+        }
+
+        assertEquals("1", nextChild().style.asDynamic().gridColumnEnd)
+        assertEquals("somegridarea", nextChild().style.asDynamic().gridColumnEnd)
+    }
+
+    @Test
+    fun gridColumnEndIntValue() = runTest {
+        composition {
+            Div({ style { gridColumnEnd(-4) } })
+        }
+
+        val el = nextChild().style.asDynamic()
+        assertEquals("-4", el.gridColumnEnd)
+    }
+
+    @Test
+    fun gridColumnEndGlobalValues() = runTest {
+        composition {
+            Div({ style { gridColumn("inherit") } })
+            Div({ style { gridColumn("initial") } })
+            Div({ style { gridColumn("revert") } })
+            Div({ style { gridColumn("unset") } })
+        }
+
+        assertEquals("inherit", nextChild().style.asDynamic().gridColumnEnd)
+        assertEquals("initial", nextChild().style.asDynamic().gridColumnEnd)
+        assertEquals("revert", nextChild().style.asDynamic().gridColumnEnd)
+        assertEquals("unset", nextChild().style.asDynamic().gridColumnEnd)
+    }
+}
+
+class GridColumnStartTests {
+    @Test
+    fun gridColumnStartOneValue() = runTest {
+        composition {
+            Div({ style { gridColumnStart("1") } })
+            Div({ style { gridColumnStart("somegridarea") } })
+        }
+
+        assertEquals("1", nextChild().style.asDynamic().gridColumnStart)
+        assertEquals("somegridarea", nextChild().style.asDynamic().gridColumnStart)
+    }
+
+    @Test
+    fun gridColumnStartIntValue() = runTest {
+        composition {
+            Div({ style { gridColumnStart(-4) } })
+        }
+
+        val el = nextChild().style.asDynamic()
+        assertEquals("-4", el.gridColumnStart)
+    }
+
+    @Test
+    fun gridColumnStartGlobalValues() = runTest {
+        composition {
+            Div({ style { gridColumn("inherit") } })
+            Div({ style { gridColumn("initial") } })
+            Div({ style { gridColumn("revert") } })
+            Div({ style { gridColumn("unset") } })
+        }
+
+        assertEquals("inherit", nextChild().style.asDynamic().gridColumnStart)
+        assertEquals("initial", nextChild().style.asDynamic().gridColumnStart)
+        assertEquals("revert", nextChild().style.asDynamic().gridColumnStart)
+        assertEquals("unset", nextChild().style.asDynamic().gridColumnStart)
+    }
+}
+
+class GridRowStartTests {
+    @Test
+    fun gridRowStartOneValue() = runTest {
+        composition {
+            Div({ style { gridRowStart("1") } })
+            Div({ style { gridRowStart("somegridarea") } })
+        }
+
+        assertEquals("1", nextChild().style.asDynamic().gridRowStart)
+        assertEquals("somegridarea", nextChild().style.asDynamic().gridRowStart)
+    }
+
+    @Test
+    fun gridRowStartIntValue() = runTest {
+        composition {
+            Div({ style { gridRowStart(-4) } })
+        }
+
+        val el = nextChild().style.asDynamic()
+        assertEquals("-4", el.gridRowStart)
+    }
+
+    @Test
+    fun gridRowStartGlobalValues() = runTest {
+        composition {
+            Div({ style { gridRow("inherit") } })
+            Div({ style { gridRow("initial") } })
+            Div({ style { gridRow("revert") } })
+            Div({ style { gridRow("unset") } })
+        }
+
+        assertEquals("inherit", nextChild().style.asDynamic().gridRowStart)
+        assertEquals("initial", nextChild().style.asDynamic().gridRowStart)
+        assertEquals("revert", nextChild().style.asDynamic().gridRowStart)
+        assertEquals("unset", nextChild().style.asDynamic().gridRowStart)
+    }
+}
+
+class GridRowEndTests {
+    @Test
+    fun gridRowEndOneValue() = runTest {
+        composition {
+            Div({ style { gridRowEnd("1") } })
+            Div({ style { gridRowEnd("somegridarea") } })
+        }
+
+        assertEquals("1", nextChild().style.asDynamic().gridRowEnd)
+        assertEquals("somegridarea", nextChild().style.asDynamic().gridRowEnd)
+    }
+
+    @Test
+    fun gridRowEndIntValue() = runTest {
+        composition {
+            Div({ style { gridRowEnd(-4) } })
+        }
+
+        val el = nextChild().style.asDynamic()
+        assertEquals("-4", el.gridRowEnd)
+    }
+
+    @Test
+    fun gridRowEndGlobalValues() = runTest {
+        composition {
+            Div({ style { gridRow("inherit") } })
+            Div({ style { gridRow("initial") } })
+            Div({ style { gridRow("revert") } })
+            Div({ style { gridRow("unset") } })
+        }
+
+        assertEquals("inherit", nextChild().style.asDynamic().gridRowEnd)
+        assertEquals("initial", nextChild().style.asDynamic().gridRowEnd)
+        assertEquals("revert", nextChild().style.asDynamic().gridRowEnd)
+        assertEquals("unset", nextChild().style.asDynamic().gridRowEnd)
+    }
+}
+
+
 class GridRawTests {
 
     @Test

web/gradle.properties

@@ -1,4 +1,5 @@
-COMPOSE_CORE_VERSION=0.5.0-build235
-COMPOSE_WEB_VERSION=0.0.16-SNAPSHOT
+# __LATEST_COMPOSE_RELEASE_VERSION__
+COMPOSE_CORE_VERSION=0.5.0-build262
+COMPOSE_WEB_VERSION=0.5.0-build262
 COMPOSE_WEB_BUILD_WITH_EXAMPLES=false
 compose.web.tests.integration.withFirefox

web/settings.gradle.kts

@@ -2,6 +2,7 @@ pluginManagement {
     repositories {
         gradlePluginPortal()
         mavenCentral()
+        mavenLocal()
         maven {
             url = uri("https://maven.pkg.jetbrains.space/public/p/compose/dev")
         }
@@ -16,7 +17,7 @@ pluginManagement {
                 println("[build] compose core version: ${extra["COMPOSE_CORE_VERSION"]}")
                 useModule("org.jetbrains.compose:org.jetbrains.compose.gradle.plugin:${extra["COMPOSE_CORE_VERSION"]}")
             } else if (requested.id.id == "org.jetbrains.kotlin.multiplatform") {
-                useModule("org.jetbrains.kotlin.multiplatform:org.jetbrains.kotlin.multiplatform.gradle.plugin:1.5.10")
+                useModule("org.jetbrains.kotlin.multiplatform:org.jetbrains.kotlin.multiplatform.gradle.plugin:1.5.21")
             }
         }
     }