github
/
compose-jb
mirror of https://gitee.com/github-sync-mirror/compose-jb.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Introduce HTMLElement.computedStyle: CSSStyleDeclaration helper function (#1815) 

(cherry picked from commit edac50ae39)
pull/1844/head
Shagen Ogandzhanian 3 years ago committed by Oleksandr Karpovich
parent
86d9ad1ec1
commit
b3deed40c0
9 changed files with 89 additions and 85 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      web/core/src/jsTest/kotlin/CSSStylesheetTests.kt
  2. 35
      web/core/src/jsTest/kotlin/CssSelectorsTests.kt
  3. 59
      web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt
  4. 6
      web/core/src/jsTest/kotlin/css/CSSListStyleTests.kt
  5. 9
      web/core/src/jsTest/kotlin/css/CSSMarginTests.kt
  6. 21
      web/core/src/jsTest/kotlin/css/CSSPaddingTests.kt
  7. 7
      web/core/src/jsTest/kotlin/css/GridTests.kt
  8. 5
      web/core/src/jsTest/kotlin/elements/AttributesTests.kt
  9. 22
      web/test-utils/src/jsMain/kotlin/org/jetbrains/compose/web/testutils/TestUtils.kt

10
web/core/src/jsTest/kotlin/CSSStylesheetTests.kt
Unescape View File

@ -5,7 +5,6 @@
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.jetbrains.compose.web.dom.stringPresentation
@ -156,7 +155,7 @@ class CSSVariableTests {
val el = root.children[1] as HTMLElement
val boundingRect = el.getBoundingClientRect()
assertEquals("4", window.getComputedStyle(el).order)
assertEquals("4", el.computedStyle.order)
assertEquals(150.toDouble(), boundingRect.width)
assertEquals(170.toDouble(), boundingRect.height)
}
@ -184,9 +183,10 @@ class CSSVariableTests {
})
}
root.children[1]?.let { el ->
assertEquals("rgb(0, 255, 0)", window.getComputedStyle(el).color)
assertEquals("rgb(0, 128, 0)", window.getComputedStyle(el).backgroundColor)
(root.children[1] as HTMLElement?)?.let { el ->
assertEquals("rgb(0, 255, 0)", el.computedStyle.color)
assertEquals("rgb(0, 128, 0)", el.computedStyle.backgroundColor)
}
}

35
web/core/src/jsTest/kotlin/CssSelectorsTests.kt
Unescape View File

@ -6,7 +6,9 @@ import org.jetbrains.compose.web.css.selectors.*
import org.jetbrains.compose.web.dom.Div
import org.jetbrains.compose.web.dom.P
import org.jetbrains.compose.web.dom.Span
import org.jetbrains.compose.web.testutils.computedStyle
import org.jetbrains.compose.web.testutils.runTest
import org.w3c.dom.HTMLElement
import org.w3c.dom.HTMLParagraphElement
import org.w3c.dom.HTMLSpanElement
import org.w3c.dom.get
@ -69,12 +71,11 @@ class CssSelectorsTests {
root.children[1]!!.let { el ->
val pEl = el.firstChild as HTMLParagraphElement
assertEquals("rgb(255, 0, 0)", window.getComputedStyle(pEl).color)
assertEquals("rgb(255, 0, 0)", pEl.computedStyle.color)
}
root.children[2]!!.let { el ->
val pEl = el
assertEquals("rgb(0, 0, 0)", window.getComputedStyle(pEl).color)
(root.children[2] as HTMLElement).let { el ->
assertEquals("rgb(0, 0, 0)", el.computedStyle.color)
}
}
@ -115,16 +116,15 @@ class CssSelectorsTests {
val pEl = el.firstChild as HTMLParagraphElement
val spanInPel = pEl.firstChild as HTMLSpanElement
assertEquals("rgb(255, 0, 0)", window.getComputedStyle(pEl).color)
assertEquals("rgb(0, 0, 255)", window.getComputedStyle(spanInPel).color)
assertEquals("rgb(255, 0, 0)", pEl.computedStyle.color)
assertEquals("rgb(0, 0, 255)", spanInPel.computedStyle.color)
}
root.children[2]!!.let { el ->
val pEl = el
val spanEl = pEl.firstChild as HTMLSpanElement
(root.children[2] as HTMLElement).let { el ->
val spanEl = el.firstChild as HTMLSpanElement
assertEquals("rgb(0, 0, 0)", window.getComputedStyle(pEl).color)
assertEquals("rgb(0, 0, 0)", window.getComputedStyle(spanEl).color)
assertEquals("rgb(0, 0, 0)", el.computedStyle.color)
assertEquals("rgb(0, 0, 0)", spanEl.computedStyle.color)
}
}
@ -167,19 +167,18 @@ class CssSelectorsTests {
val pEl = el.firstChild as HTMLParagraphElement
val spanInPel = pEl.firstChild as HTMLSpanElement
assertEquals("rgb(255, 0, 0)", window.getComputedStyle(pEl).color)
assertEquals("rgb(0, 0, 255)", window.getComputedStyle(spanInPel).color)
assertEquals("rgb(255, 0, 0)", pEl.computedStyle.color)
assertEquals("rgb(0, 0, 255)", spanInPel.computedStyle.color)
val spanInClsEl = el.children[1] as HTMLSpanElement
assertEquals("rgb(100, 100, 200)", window.getComputedStyle(spanInClsEl).color)
assertEquals("rgb(100, 100, 200)", spanInClsEl.computedStyle.color)
}
root.children[2]!!.let { el ->
val pEl = el
val spanEl = pEl.firstChild as HTMLSpanElement
(root.children[2] as HTMLParagraphElement).let { el ->
val spanEl = el.firstChild as HTMLSpanElement
assertEquals("rgb(0, 0, 0)", window.getComputedStyle(pEl).color)
assertEquals("rgb(0, 0, 0)", el.computedStyle.color)
assertEquals("rgb(0, 0, 0)", window.getComputedStyle(spanEl).color)
}
}

59
web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt
Unescape View File

@ -5,7 +5,6 @@
package org.jetbrains.compose.web.core.tests.css
import kotlinx.browser.window
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.Div
import kotlin.test.Test
@ -24,8 +23,8 @@ class CSSBackgroundTests {
}})
}
assertEquals("rgb(0, 128, 0)", window.getComputedStyle(nextChild()).backgroundColor)
assertEquals("rgba(0, 129, 0, 0.2)", window.getComputedStyle(nextChild()).backgroundColor)
assertEquals("rgb(0, 128, 0)", nextChild().computedStyle.backgroundColor)
assertEquals("rgba(0, 129, 0, 0.2)", nextChild().computedStyle.backgroundColor)
}
@Test
@ -42,9 +41,9 @@ class CSSBackgroundTests {
}})
}
assertEquals("scroll", window.getComputedStyle(nextChild()).backgroundAttachment)
assertEquals("fixed", window.getComputedStyle(nextChild()).backgroundAttachment)
assertEquals("local", window.getComputedStyle(nextChild()).backgroundAttachment)
assertEquals("scroll", nextChild().computedStyle.backgroundAttachment)
assertEquals("fixed", nextChild().computedStyle.backgroundAttachment)
assertEquals("local", nextChild().computedStyle.backgroundAttachment)
}
@Test
@ -61,9 +60,9 @@ class CSSBackgroundTests {
}})
}
assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\")", window.getComputedStyle(nextChild()).backgroundImage)
assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\"), url(\"https://localhost:3333/media/examples/star.png\")", window.getComputedStyle(nextChild()).backgroundImage)
assertEquals("linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))", window.getComputedStyle(nextChild()).backgroundImage)
assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\")", nextChild().computedStyle.backgroundImage)
assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\"), url(\"https://localhost:3333/media/examples/star.png\")", nextChild().computedStyle.backgroundImage)
assertEquals("linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))", nextChild().computedStyle.backgroundImage)
}
@Test
@ -83,10 +82,10 @@ class CSSBackgroundTests {
}})
}
assertEquals("50% 0%", window.getComputedStyle(nextChild()).backgroundPosition)
assertEquals("0% 50%", window.getComputedStyle(nextChild()).backgroundPosition)
assertEquals("50% 50%", window.getComputedStyle(nextChild()).backgroundPosition)
assertEquals("25% 75%", window.getComputedStyle(nextChild()).backgroundPosition)
assertEquals("50% 0%", nextChild().computedStyle.backgroundPosition)
assertEquals("0% 50%", nextChild().computedStyle.backgroundPosition)
assertEquals("50% 50%", nextChild().computedStyle.backgroundPosition)
assertEquals("25% 75%", nextChild().computedStyle.backgroundPosition)
}
@Test
@ -97,7 +96,7 @@ class CSSBackgroundTests {
}})
}
assertEquals("space repeat", window.getComputedStyle(nextChild()).backgroundRepeat)
assertEquals("space repeat", nextChild().computedStyle.backgroundRepeat)
}
@ -116,9 +115,9 @@ class CSSBackgroundTests {
}
assertEquals("border-box", window.getComputedStyle(nextChild()).backgroundClip)
assertEquals("padding-box", window.getComputedStyle(nextChild()).backgroundClip)
assertEquals("content-box", window.getComputedStyle(nextChild()).backgroundClip)
assertEquals("border-box", nextChild().computedStyle.backgroundClip)
assertEquals("padding-box", nextChild().computedStyle.backgroundClip)
assertEquals("content-box", nextChild().computedStyle.backgroundClip)
}
@Test
@ -136,9 +135,9 @@ class CSSBackgroundTests {
}
assertEquals("border-box", window.getComputedStyle(nextChild()).backgroundOrigin)
assertEquals("padding-box", window.getComputedStyle(nextChild()).backgroundOrigin)
assertEquals("content-box", window.getComputedStyle(nextChild()).backgroundOrigin)
assertEquals("border-box", nextChild().computedStyle.backgroundOrigin)
assertEquals("padding-box", nextChild().computedStyle.backgroundOrigin)
assertEquals("content-box", nextChild().computedStyle.backgroundOrigin)
}
@ -159,10 +158,10 @@ class CSSBackgroundTests {
}})
}
assertEquals("contain", window.getComputedStyle(nextChild()).backgroundSize)
assertEquals("cover", window.getComputedStyle(nextChild()).backgroundSize)
assertEquals("50%", window.getComputedStyle(nextChild()).backgroundSize)
assertEquals("auto 50px", window.getComputedStyle(nextChild()).backgroundSize)
assertEquals("contain", nextChild().computedStyle.backgroundSize)
assertEquals("cover", nextChild().computedStyle.backgroundSize)
assertEquals("50%", nextChild().computedStyle.backgroundSize)
assertEquals("auto 50px", nextChild().computedStyle.backgroundSize)
}
@Test
@ -179,10 +178,14 @@ class CSSBackgroundTests {
}})
}
assertEquals("rgb(0, 128, 0)", window.getComputedStyle(nextChild()).backgroundColor)
assertEquals("content-box", window.getComputedStyle(nextChild()).backgroundOrigin)
assertEquals("radial-gradient(rgb(220, 20, 60), rgb(135, 206, 235))", window.getComputedStyle(currentChild()).backgroundImage)
assertEquals("no-repeat", window.getComputedStyle(nextChild()).backgroundRepeat)
assertEquals("rgb(0, 128, 0)", nextChild().computedStyle.backgroundColor)
with(nextChild().computedStyle) {
assertEquals("content-box", backgroundOrigin)
assertEquals("radial-gradient(rgb(220, 20, 60), rgb(135, 206, 235))", backgroundImage)
}
assertEquals("no-repeat", nextChild().computedStyle.backgroundRepeat)
}
}

6
web/core/src/jsTest/kotlin/css/CSSListStyleTests.kt
Unescape View File

@ -101,8 +101,10 @@ class CSSListStyleTests {
})
}
assertEquals("inside", (nextChild()).style.listStylePosition)
assertEquals("georgian", (currentChild()).style.listStyleType)
nextChild().style.apply {
assertEquals("inside", listStylePosition)
assertEquals("georgian", listStyleType)
}
}
}

9
web/core/src/jsTest/kotlin/css/CSSMarginTests.kt
Unescape View File

@ -5,7 +5,6 @@
package org.jetbrains.compose.web.core.tests.css
import kotlinx.browser.window
import org.jetbrains.compose.web.testutils.*
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.Div
@ -75,7 +74,7 @@ class CSSMarginTests {
})
}
val el = window.getComputedStyle(nextChild())
val el = nextChild().computedStyle
assertEquals("4px", el.marginTop, "marginTop")
assertEquals("4px", el.marginRight, "marginRight")
@ -93,7 +92,7 @@ class CSSMarginTests {
})
}
val el = window.getComputedStyle(nextChild())
val el = nextChild().computedStyle
assertEquals("4px", el.marginTop, "marginTop")
assertEquals("6px", el.marginRight, "marginRight")
@ -111,7 +110,7 @@ class CSSMarginTests {
})
}
val el = window.getComputedStyle(nextChild())
val el = nextChild().computedStyle
assertEquals("4px", el.marginTop, "marginTop")
assertEquals("6px", el.marginRight, "marginRight")
@ -129,7 +128,7 @@ class CSSMarginTests {
})
}
val el = window.getComputedStyle(nextChild())
val el = nextChild().computedStyle
assertEquals("4px", el.marginTop, "marginTop")
assertEquals("6px", el.marginRight, "marginRight")

21
web/core/src/jsTest/kotlin/css/CSSPaddingTests.kt
Unescape View File

@ -5,10 +5,17 @@
package org.jetbrains.compose.web.core.tests.css
import kotlinx.browser.window
import org.jetbrains.compose.web.testutils.*
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.padding
import org.jetbrains.compose.web.css.paddingBottom
import org.jetbrains.compose.web.css.paddingLeft
import org.jetbrains.compose.web.css.paddingRight
import org.jetbrains.compose.web.css.paddingTop
import org.jetbrains.compose.web.css.percent
import org.jetbrains.compose.web.css.px
import org.jetbrains.compose.web.css.vw
import org.jetbrains.compose.web.dom.Div
import org.jetbrains.compose.web.testutils.computedStyle
import org.jetbrains.compose.web.testutils.runTest
import kotlin.test.Test
import kotlin.test.assertEquals
@ -75,7 +82,7 @@ class CSSPaddingTests {
})
}
val el = window.getComputedStyle(nextChild())
val el = nextChild().computedStyle
assertEquals("4px", el.paddingTop, "paddingTop")
assertEquals("4px", el.paddingRight, "paddingRight")
@ -93,7 +100,7 @@ class CSSPaddingTests {
})
}
val el = window.getComputedStyle(nextChild())
val el = nextChild().computedStyle
assertEquals("4px", el.paddingTop, "paddingTop")
assertEquals("6px", el.paddingRight, "paddingRight")
@ -111,7 +118,7 @@ class CSSPaddingTests {
})
}
val el = window.getComputedStyle(nextChild())
val el = nextChild().computedStyle
assertEquals("4px", el.paddingTop, "paddingTop")
assertEquals("6px", el.paddingRight, "paddingRight")
@ -129,7 +136,7 @@ class CSSPaddingTests {
})
}
val el = window.getComputedStyle(nextChild())
val el = nextChild().computedStyle
assertEquals("4px", el.paddingTop, "paddingTop")
assertEquals("6px", el.paddingRight, "paddingRight")

7
web/core/src/jsTest/kotlin/css/GridTests.kt
Unescape View File

@ -42,8 +42,11 @@ class GridColumnTests {
}
assertEquals("main-start", nextChild().style.asDynamic().gridColumnStart)
assertEquals("main-start", nextChild().style.asDynamic().gridColumnStart)
assertEquals("main-end", currentChild().style.asDynamic().gridColumnEnd)
nextChild().style.apply {
assertEquals("main-start", asDynamic().gridColumnStart)
assertEquals("main-end", asDynamic().gridColumnEnd)
}
}

5
web/core/src/jsTest/kotlin/elements/AttributesTests.kt
Unescape View File

@ -491,7 +491,8 @@ class AttributesTests {
}
}
with(nextChild()) {
val child = nextChild()
with(child) {
val attrs = getAttributeNames().toList()
assertEquals(2, attrs.size)
assertTrue(attrs.containsAll(listOf("style", "class",)))
@ -505,7 +506,7 @@ class AttributesTests {
hasValue = true
waitForRecompositionComplete()
with(currentChild()) {
with(child) {
val attrs = getAttributeNames().toList()
assertEquals(3, attrs.size)
assertTrue(attrs.containsAll(listOf("style", "class", "value")))

22
web/test-utils/src/jsMain/kotlin/org/jetbrains/compose/web/testutils/TestUtils.kt
Unescape View File

@ -13,7 +13,7 @@ import org.w3c.dom.HTMLElement
import org.w3c.dom.MutationObserver
import org.w3c.dom.MutationObserverInit
import org.w3c.dom.asList
import org.w3c.dom.get
import org.w3c.dom.css.CSSStyleDeclaration
import kotlin.coroutines.Continuation
import kotlin.coroutines.resume
import kotlin.coroutines.suspendCoroutine
@ -68,24 +68,11 @@ class TestScope : CoroutineScope by MainScope() {
* @return a reference to the next child element of the root.
* Subsequent calls will return next child reference every time.
*/
fun nextChild() = childrenIterator.next() as HTMLElement
fun nextChild() = nextChild<HTMLElement>()
@Suppress("UNCHECKED_CAST")
fun <T> nextChild() = childrenIterator.next() as T
/**
* @return a reference to current child.
* Calling this subsequently returns the same reference every time.
*/
fun currentChild() = root.children[childrenIterator.previousIndex()] as HTMLElement
/**
* Suspends until [root] observes any change to its html.
*/
suspend fun waitForChanges() {
waitForChanges(root)
}
/**
* Suspends until element with [elementId] observes any change to its html.
*/
@ -96,7 +83,7 @@ class TestScope : CoroutineScope by MainScope() {
/**
* Suspends until [element] observes any change to its html.
*/
suspend fun waitForChanges(element: HTMLElement) {
suspend fun waitForChanges(element: HTMLElement = root) {
suspendCoroutine<Unit> { continuation ->
val observer = MutationObserver { _, observer ->
continuation.resume(Unit)
@ -178,3 +165,6 @@ private class TestMonotonicClockImpl(
}
}
}
val HTMLElement.computedStyle: CSSStyleDeclaration
get() = window.getComputedStyle(this)

Write Preview
Loading…
Cancel
Save