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

Basic support for flex-basic in CSS API

pull/893/head
Shagen Ogandzhanian 3 years ago
parent
5164e0669b
commit
f1081c67ba
3 changed files with 315 additions and 314 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. 9
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/flex.kt
  2. 314
      web/core/src/jsTest/kotlin/StaticComposableTests.kt
  3. 306
      web/core/src/jsTest/kotlin/css/CSSFlexTests.kt

9
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/flex.kt
Unescape View File

@ -5,6 +5,8 @@
package org.jetbrains.compose.web.css
import org.w3c.dom.css.CSS
fun StyleBuilder.flexDirection(flexDirection: FlexDirection) {
property("flex-direction", flexDirection.value)
}
@ -59,4 +61,11 @@ fun StyleBuilder.flexShrink(value: Number) {
property("flex-shrink", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
fun StyleBuilder.flexBasis(value: String) {
property("flex-basis", value)
}
fun StyleBuilder.flexBasis(value: CSSNumeric) {
property("flex-basis", value)
}

314
web/core/src/jsTest/kotlin/StaticComposableTests.kt
Unescape View File

@ -1,29 +1,12 @@
package org.jetbrains.compose.web.core.tests
import org.jetbrains.compose.web.css.AlignContent
import org.jetbrains.compose.web.css.AlignItems
import org.jetbrains.compose.web.css.AlignSelf
import org.jetbrains.compose.web.css.Color
import org.jetbrains.compose.web.css.FlexDirection
import org.jetbrains.compose.web.css.FlexWrap
import org.jetbrains.compose.web.css.JustifyContent
import org.jetbrains.compose.web.css.Position
import org.jetbrains.compose.web.css.alignContent
import org.jetbrains.compose.web.css.alignItems
import org.jetbrains.compose.web.css.alignSelf
import org.jetbrains.compose.web.css.border
import org.jetbrains.compose.web.css.borderRadius
import org.jetbrains.compose.web.css.bottom
import org.jetbrains.compose.web.css.color
import org.jetbrains.compose.web.css.flexDirection
import org.jetbrains.compose.web.css.flexFlow
import org.jetbrains.compose.web.css.flexGrow
import org.jetbrains.compose.web.css.flexShrink
import org.jetbrains.compose.web.css.flexWrap
import org.jetbrains.compose.web.css.justifyContent
import org.jetbrains.compose.web.css.left
import org.jetbrains.compose.web.css.opacity
import org.jetbrains.compose.web.css.order
import org.jetbrains.compose.web.css.percent
import org.jetbrains.compose.web.css.position
import org.jetbrains.compose.web.css.px
@ -143,116 +126,6 @@ class StaticComposableTests {
}
}
@Test
fun stylesOrder() {
val root = "div".asHtmlElement()
renderComposable(
root = root
) {
Div(
{
style {
order(-4)
}
}
)
Div(
{
style {
order(3)
}
}
)
}
assertEquals("order: -4;", (root.children[0] as HTMLElement).style.cssText)
assertEquals("order: 3;", (root.children[1] as HTMLElement).style.cssText)
}
@Test
fun stylesFlexGrow() {
val root = "div".asHtmlElement()
renderComposable(
root = root
) {
Div(
{
style {
flexGrow(3)
}
}
)
Div(
{
style {
flexGrow(2.5)
}
}
)
Div(
{
style {
flexGrow(1e2)
}
}
)
Div(
{
style {
flexGrow(.6)
}
}
)
}
assertEquals("flex-grow: 3;", (root.children[0] as HTMLElement).style.cssText)
assertEquals("flex-grow: 2.5;", (root.children[1] as HTMLElement).style.cssText)
assertEquals("flex-grow: 100;", (root.children[2] as HTMLElement).style.cssText)
assertEquals("flex-grow: 0.6;", (root.children[3] as HTMLElement).style.cssText)
}
@Test
fun stylesFlexShrink() {
val root = "div".asHtmlElement()
renderComposable(
root = root
) {
Div(
{
style {
flexShrink(3)
}
}
)
Div(
{
style {
flexShrink(2.5)
}
}
)
Div(
{
style {
flexShrink(1e2)
}
}
)
Div(
{
style {
flexShrink(.6)
}
}
)
}
assertEquals("flex-shrink: 3;", (root.children[0] as HTMLElement).style.cssText)
assertEquals("flex-shrink: 2.5;", (root.children[1] as HTMLElement).style.cssText)
assertEquals("flex-shrink: 100;", (root.children[2] as HTMLElement).style.cssText)
assertEquals("flex-shrink: 0.6;", (root.children[3] as HTMLElement).style.cssText)
}
@Test
fun stylesTop() {
val root = "div".asHtmlElement()
@ -357,193 +230,6 @@ class StaticComposableTests {
assertEquals("right: 100%;", (root.children[1] as HTMLElement).style.cssText)
}
@Test
fun stylesFlexDirection() {
val root = "div".asHtmlElement()
val enumValues = FlexDirection.values()
renderComposable(
root = root
) {
enumValues.forEach { flexDirection ->
Span(
{
style {
flexDirection(flexDirection)
}
}
) { }
}
}
enumValues.forEachIndexed { index, displayStyle ->
assertEquals(
"flex-direction: ${displayStyle.value};",
(root.children[index] as HTMLElement).style.cssText
)
}
}
@Test
fun stylesFlexWrap() {
val root = "div".asHtmlElement()
val enumValues = FlexWrap.values()
renderComposable(
root = root
) {
enumValues.forEach { flexWrap ->
Span(
{
style {
flexWrap(flexWrap)
}
}
) { }
}
}
enumValues.forEachIndexed { index, displayStyle ->
assertEquals(
"flex-wrap: ${displayStyle.value};",
(root.children[index] as HTMLElement).style.cssText
)
}
}
@Test
fun stylesFlexFlow() {
val root = "div".asHtmlElement()
val flexWraps = FlexWrap.values()
val flexDirections = FlexDirection.values()
renderComposable(
root = root
) {
flexDirections.forEach { flexDirection ->
flexWraps.forEach { flexWrap ->
Span(
{
style {
flexFlow(flexDirection, flexWrap)
}
}
) { }
}
}
}
flexDirections.forEachIndexed { i, flexDirection ->
flexWraps.forEachIndexed { j, flexWrap ->
assertEquals(
"flex-flow: ${flexDirection.value} ${flexWrap.value};",
(root.children[3 * i + j % 3] as HTMLElement).style.cssText
)
}
}
}
@Test
fun stylesJustifyContent() {
val root = "div".asHtmlElement()
val enumValues = JustifyContent.values()
renderComposable(
root = root
) {
enumValues.forEach { justifyContent ->
Span(
{
style {
justifyContent(justifyContent)
}
}
) { }
}
}
enumValues.forEachIndexed { index, justifyContent ->
assertEquals(
"justify-content: ${justifyContent.value};",
(root.children[index] as HTMLElement).style.cssText
)
}
}
@Test
fun stylesAlignSelf() {
val root = "div".asHtmlElement()
val enumValues = AlignSelf.values()
renderComposable(
root = root
) {
enumValues.forEach { alignSelf ->
Span(
{
style {
alignSelf(alignSelf)
}
}
) { }
}
}
enumValues.forEachIndexed { index, alignSelf ->
assertEquals(
"align-self: ${alignSelf.value};",
(root.children[index] as HTMLElement).style.cssText
)
}
}
@Test
fun stylesAlignItems() {
val root = "div".asHtmlElement()
val enumValues = AlignItems.values()
renderComposable(
root = root
) {
enumValues.forEach { alignItems ->
Span(
{
style {
alignItems(alignItems)
}
}
) { }
}
}
enumValues.forEachIndexed { index, alignItems ->
assertEquals(
"align-items: ${alignItems.value};",
(root.children[index] as HTMLElement).style.cssText
)
}
}
@Test
fun stylesAlignContent() {
val root = "div".asHtmlElement()
val enumValues = AlignContent.values()
renderComposable(
root = root
) {
enumValues.forEach { alignContent ->
Span(
{
style {
alignContent(alignContent)
}
}
) { }
}
}
enumValues.forEachIndexed { index, alignContent ->
assertEquals(
"align-content: ${alignContent.value};",
(root.children[index] as HTMLElement).style.cssText
)
}
}
@Test
fun stylesPosition() {
val root = "div".asHtmlElement()

306
web/core/src/jsTest/kotlin/css/CSSFlexTests.kt
Unescape View File

@ -0,0 +1,306 @@
/*
* 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.core.tests.values
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.Div
import org.jetbrains.compose.web.dom.Span
import org.w3c.dom.HTMLElement
import org.w3c.dom.get
import kotlin.test.Test
import kotlin.test.assertEquals
class CSSFlexTests {
@Test
fun stylesOrder() = runTest {
composition {
Div(
{
style {
order(-4)
}
}
)
Div(
{
style {
order(3)
}
}
)
}
assertEquals("-4", (root.children[0] as HTMLElement).style.order)
assertEquals("3", (root.children[1] as HTMLElement).style.order)
}
@Test
fun stylesFlexGrow() = runTest {
composition {
Div(
{
style {
flexGrow(3)
}
}
)
Div(
{
style {
flexGrow(2.5)
}
}
)
Div(
{
style {
flexGrow(1e2)
}
}
)
Div(
{
style {
flexGrow(.6)
}
}
)
}
assertEquals("3", (root.children[0] as HTMLElement).style.flexGrow)
assertEquals("2.5", (root.children[1] as HTMLElement).style.flexGrow)
assertEquals("100", (root.children[2] as HTMLElement).style.flexGrow)
assertEquals("0.6", (root.children[3] as HTMLElement).style.flexGrow)
}
@Test
fun stylesFlexShrink() = runTest {
composition {
Div(
{
style {
flexShrink(3)
}
}
)
Div(
{
style {
flexShrink(2.5)
}
}
)
Div(
{
style {
flexShrink(1e2)
}
}
)
Div(
{
style {
flexShrink(.6)
}
}
)
}
assertEquals("3", (root.children[0] as HTMLElement).style.flexShrink)
assertEquals("2.5", (root.children[1] as HTMLElement).style.flexShrink)
assertEquals("100", (root.children[2] as HTMLElement).style.flexShrink)
assertEquals("0.6", (root.children[3] as HTMLElement).style.flexShrink)
}
@Test
fun stylesFlexFlow() = runTest {
val flexWraps = FlexWrap.values()
val flexDirections = FlexDirection.values()
composition {
flexDirections.forEach { flexDirection ->
flexWraps.forEach { flexWrap ->
Span(
{
style {
flexFlow(flexDirection, flexWrap)
}
}
)
}
}
}
flexDirections.forEachIndexed { i, flexDirection ->
flexWraps.forEachIndexed { j, flexWrap ->
assertEquals(
"${flexDirection.value} ${flexWrap.value}",
(root.children[3 * i + j % 3] as HTMLElement).style.flexFlow
)
}
}
}
@Test
fun stylesJustifyContent() = runTest {
val enumValues = JustifyContent.values()
composition {
enumValues.forEach { justifyContent ->
Span(
{
style {
justifyContent(justifyContent)
}
}
)
}
}
enumValues.forEachIndexed { index, justifyContent ->
assertEquals(
"${justifyContent.value}",
(root.children[index] as HTMLElement).style.justifyContent
)
}
}
@Test
fun stylesAlignSelf() = runTest {
val enumValues = AlignSelf.values()
composition {
enumValues.forEach { alignSelf ->
Span(
{
style {
alignSelf(alignSelf)
}
}
)
}
}
enumValues.forEachIndexed { index, alignSelf ->
assertEquals(
"${alignSelf.value}",
(root.children[index] as HTMLElement).style.alignSelf
)
}
}
@Test
fun stylesAlignItems() = runTest {
val enumValues = AlignItems.values()
composition {
enumValues.forEach { alignItems ->
Span(
{
style {
alignItems(alignItems)
}
}
)
}
}
enumValues.forEachIndexed { index, alignItems ->
assertEquals(
"${alignItems.value}",
(root.children[index] as HTMLElement).style.alignItems
)
}
}
@Test
fun stylesAlignContent() = runTest {
val enumValues = AlignContent.values()
composition {
enumValues.forEach { alignContent ->
Span(
{
style {
alignContent(alignContent)
}
}
)
}
}
enumValues.forEachIndexed { index, alignContent ->
assertEquals(
"${alignContent.value}",
(root.children[index] as HTMLElement).style.alignContent
)
}
}
@Test
fun stylesFlexDirection() = runTest {
val enumValues = FlexDirection.values()
composition {
enumValues.forEach { flexDirection ->
Span(
{
style {
flexDirection(flexDirection)
}
}
)
}
}
enumValues.forEachIndexed { index, displayStyle ->
assertEquals(
"${displayStyle.value}",
(root.children[index] as HTMLElement).style.flexDirection
)
}
}
@Test
fun stylesFlexWrap() = runTest {
val enumValues = FlexWrap.values()
composition {
enumValues.forEach { flexWrap ->
Span(
{
style {
flexWrap(flexWrap)
}
}
)
}
}
enumValues.forEachIndexed { index, displayStyle ->
assertEquals(
"${displayStyle.value}",
(root.children[index] as HTMLElement).style.flexWrap
)
}
}
@Test
fun stylesFlexBasis() = runTest {
composition {
Span({
style {
flexBasis(10.em)
}
})
Span({
style {
flexBasis("auto")
}
})
}
assertEquals("10em", (root.children[0] as HTMLElement).style.flexBasis)
assertEquals("auto", (root.children[1] as HTMLElement).style.flexBasis)
}
}
Write Preview
Loading…
Cancel
Save