Shagen Ogandzhanian
3 years ago
3 changed files with 177 additions and 13 deletions
@ -0,0 +1,35 @@ |
|||||||
|
/* |
||||||
|
* 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.css |
||||||
|
|
||||||
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom |
||||||
|
fun StyleBuilder.margin(vararg value: CSSNumeric) { |
||||||
|
// margin hasn't Typed OM yet |
||||||
|
property("margin", value.joinToString(" ")) |
||||||
|
} |
||||||
|
|
||||||
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom |
||||||
|
fun StyleBuilder.marginBottom(value: CSSNumeric) { |
||||||
|
property("margin-bottom", value) |
||||||
|
} |
||||||
|
|
||||||
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left |
||||||
|
fun StyleBuilder.marginLeft(value: CSSNumeric) { |
||||||
|
property("margin-left", value) |
||||||
|
} |
||||||
|
|
||||||
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right |
||||||
|
fun StyleBuilder.marginRight(value: CSSNumeric) { |
||||||
|
property("margin-right", value) |
||||||
|
} |
||||||
|
|
||||||
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top |
||||||
|
fun StyleBuilder.marginTop(value: CSSNumeric) { |
||||||
|
property("margin-top", value) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,142 @@ |
|||||||
|
/* |
||||||
|
* 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 kotlinx.browser.window |
||||||
|
import org.jetbrains.compose.web.core.tests.runTest |
||||||
|
import org.jetbrains.compose.web.css.* |
||||||
|
import org.jetbrains.compose.web.dom.Div |
||||||
|
import org.w3c.dom.HTMLElement |
||||||
|
import org.w3c.dom.get |
||||||
|
import kotlin.test.Test |
||||||
|
import kotlin.test.assertEquals |
||||||
|
|
||||||
|
class CSSMarginTests { |
||||||
|
@Test |
||||||
|
fun marginLeft() = runTest { |
||||||
|
composition { |
||||||
|
Div({ |
||||||
|
style { |
||||||
|
marginLeft(5.px) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
assertEquals("5px", (root.children[0] as HTMLElement).style.marginLeft) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun marginTop() = runTest { |
||||||
|
composition { |
||||||
|
Div({ |
||||||
|
style { |
||||||
|
marginTop(15.px) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
assertEquals("15px", (root.children[0] as HTMLElement).style.marginTop) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun marginRight() = runTest { |
||||||
|
composition { |
||||||
|
Div({ |
||||||
|
style { |
||||||
|
marginRight(12.vw) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
assertEquals("12vw", (root.children[0] as HTMLElement).style.marginRight) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun marginBottom() = runTest { |
||||||
|
composition { |
||||||
|
Div({ |
||||||
|
style { |
||||||
|
marginBottom(12.percent) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
assertEquals("12%", (root.children[0] as HTMLElement).style.marginBottom) |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun marginWithOneValue() = runTest { |
||||||
|
composition { |
||||||
|
Div({ |
||||||
|
style { |
||||||
|
margin(4.px) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
val el = window.getComputedStyle(root.children[0] as HTMLElement) |
||||||
|
|
||||||
|
assertEquals("4px", el.marginTop, "marginTop") |
||||||
|
assertEquals("4px", el.marginRight, "marginRight") |
||||||
|
assertEquals("4px", el.marginBottom, "marginBottom") |
||||||
|
assertEquals("4px", el.marginLeft, "marginLeft") |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun marginWithTwoValues() = runTest { |
||||||
|
composition { |
||||||
|
Div({ |
||||||
|
style { |
||||||
|
margin(4.px, 6.px) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
val el = window.getComputedStyle(root.children[0] as HTMLElement) |
||||||
|
|
||||||
|
assertEquals("4px", el.marginTop, "marginTop") |
||||||
|
assertEquals("6px", el.marginRight, "marginRight") |
||||||
|
assertEquals("4px", el.marginBottom, "marginBottom") |
||||||
|
assertEquals("6px", el.marginLeft, "marginLeft") |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun marginWithThreeValues() = runTest { |
||||||
|
composition { |
||||||
|
Div({ |
||||||
|
style { |
||||||
|
margin(4.px, 6.px, 3.px) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
val el = window.getComputedStyle(root.children[0] as HTMLElement) |
||||||
|
|
||||||
|
assertEquals("4px", el.marginTop, "marginTop") |
||||||
|
assertEquals("6px", el.marginRight, "marginRight") |
||||||
|
assertEquals("3px", el.marginBottom, "marginBottom") |
||||||
|
assertEquals("6px", el.marginLeft, "marginLeft") |
||||||
|
} |
||||||
|
|
||||||
|
@Test |
||||||
|
fun marginWithFourValues() = runTest { |
||||||
|
composition { |
||||||
|
Div({ |
||||||
|
style { |
||||||
|
margin(4.px, 6.px, 3.px, 1.px) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
val el = window.getComputedStyle(root.children[0] as HTMLElement) |
||||||
|
|
||||||
|
assertEquals("4px", el.marginTop, "marginTop") |
||||||
|
assertEquals("6px", el.marginRight, "marginRight") |
||||||
|
assertEquals("3px", el.marginBottom, "marginBottom") |
||||||
|
assertEquals("1px", el.marginLeft, "marginLeft") |
||||||
|
} |
||||||
|
|
||||||
|
} |
Loading…
Reference in new issue