Browse Source

Basic support for flex-basic in CSS API

pull/893/head
Shagen Ogandzhanian 3 years ago
parent
commit
f1081c67ba
  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

@ -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

@ -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

@ -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)
}
}
Loading…
Cancel
Save