From 453cc89bca54be527a49e192c787d0b8325a77cc Mon Sep 17 00:00:00 2001
From: Shagen Ogandzhanian <shagen.ogandzhanian@jetbrains.com>
Date: Tue, 22 Jun 2021 00:36:25 +0200
Subject: [PATCH] Add minimal test for testing media query in stylesheet

---
 .../src/jsTest/kotlin/CSSStylesheetTests.kt   | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt b/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt
index 9eb00024a7..59c7af1e62 100644
--- a/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt
+++ b/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt
@@ -5,6 +5,7 @@
 
 package org.jetbrains.compose.web.core.tests
 
+import kotlinx.browser.window
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Div
 import org.w3c.dom.HTMLElement
@@ -44,6 +45,24 @@ object AppStylesheet : StyleSheet() {
         property("width", AppCSSVariables.width.value())
         property("height", AppCSSVariables.height.value())
     }
+
+    val withMedia by style {
+        color("lime")
+        backgroundColor("lime")
+
+        media(minWidth(20000.px)) {
+            self style {
+                color("red")
+            }
+        }
+
+        media(minWidth(20.px)) {
+            self style {
+                backgroundColor("green")
+            }
+        }
+
+    }
 }
 
 
@@ -103,4 +122,19 @@ class CSSVariableTests {
         assertEquals(100.toDouble(), boundingRect.width)
         assertEquals(200.toDouble(), boundingRect.height)
     }
+
+    @Test
+    fun withMediaQuery() = runTest {
+        composition {
+            Style(AppStylesheet)
+            Div({
+                classes(AppStylesheet.withMedia)
+            })
+        }
+
+        root.children[1]?.let { el ->
+            assertEquals("rgb(0, 255, 0)", window.getComputedStyle(el).color)
+            assertEquals("rgb(0, 128, 0)", window.getComputedStyle(el).backgroundColor)
+        }
+    }
 }
\ No newline at end of file