web: test for media query (#766)

* web: Add a test for media query in style sheet

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>

web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt

@@ -12,7 +12,7 @@ private data class CSSUnitValueTyped<out T : CSSUnit>(
     override val unit: T
 ) : CSSSizeValue<T> {
     override fun newUnit(value: Float): CSSSizeValue<T> = copy(value = value)
-    override fun toString() = asString()
+    override fun toString(): String = asString()
 }
 
 operator fun <T : CSSUnit> CSSSizeValue<T>.times(num: Number): CSSSizeValue<T> = newUnit(value * num.toFloat())

web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/TestCases1.kt

@@ -4,13 +4,8 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import org.jetbrains.compose.web.css.backgroundColor
-import org.jetbrains.compose.web.css.height
-import org.jetbrains.compose.web.css.px
-import org.jetbrains.compose.web.css.width
-import org.jetbrains.compose.web.dom.Button
-import org.jetbrains.compose.web.dom.Div
-import org.jetbrains.compose.web.dom.Text
+import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.dom.*
 
 class TestCases1 {
     val helloWorldText by testCase {
@@ -59,4 +54,25 @@ class TestCases1 {
             }
         ) {}
     }
+
+    val smallWidthChangesTheTextColor by testCase {
+        Style(AppStyleSheet)
+        Span(attrs = {
+            id("span1")
+            classes(AppStyleSheet.textClass)
+        }) {
+            Text("This a colored text")
+        }
+    }
+}
+
+private object AppStyleSheet : StyleSheet() {
+    val textClass by style {
+        color("black")
+        media(maxWidth(400.px)) {
+            self style {
+                color("red")
+            }
+        }
+    }
 }

web/integration-core/src/jvmTest/kotlin/org/jetbrains/compose/web/tests/integration/IntegrationTests.kt

@@ -6,6 +6,7 @@ import org.jetbrains.compose.web.tests.integration.common.waitTextToBe
 import org.junit.jupiter.api.Assertions.assertEquals
 import org.junit.jupiter.api.Test
 import org.openqa.selenium.By
+import org.openqa.selenium.Dimension
 import org.openqa.selenium.interactions.Actions
 
 class IntegrationTests : BaseIntegrationTests() {
@@ -47,4 +48,25 @@ class IntegrationTests : BaseIntegrationTests() {
         actions.moveByOffset(300, 0).perform()
         waitTextToBe(textId = "txt", value = "not hovered")
     }
+
+    @Test
+    fun `making screen width less than 400px changes the text color`() {
+        openTestPage("smallWidthChangesTheTextColor")
+
+        val initialWindowSize = driver.manage().window().size
+        try {
+            val span = driver.findElement(By.id("span1"))
+            waitTextToBe(textId = "span1", "This a colored text")
+            driver.manage().window().size = Dimension(1000, 1000)
+
+            assertEquals("rgba(0, 0, 0, 1)", span.getCssValue("color"))
+
+            driver.manage().window().size = Dimension(300, 300)
+            waitTextToBe(textId = "span1", "This a colored text")
+
+            assertEquals("rgba(255, 0, 0, 1)", span.getCssValue("color"))
+        } finally {
+            driver.manage().window().size = initialWindowSize
+        }
+    }
 }