mirror of
https://github.com/pyscript/pyscript.git
synced 2025-12-19 18:27:29 -05:00
Don't hide undefined elements in the CSS (#837)
* Hide py-config element * display:none for all web components * docs * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Add style tests for raw html and pyscript enabled html * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * test naming Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
This commit is contained in:
Ted Patrick
@@ -1,8 +1,33 @@
|
||||
:not(:defined) {
|
||||
/* py-config - not a component */
|
||||
py-config {
|
||||
display: none
|
||||
}
|
||||
/* py-{el} - components not defined */
|
||||
py-script:not(:defined) {
|
||||
display: none
|
||||
}
|
||||
|
||||
html{
|
||||
py-repl:not(:defined) {
|
||||
display: none
|
||||
}
|
||||
|
||||
py-title:not(:defined) {
|
||||
display: none
|
||||
}
|
||||
|
||||
py-inputbox:not(:defined) {
|
||||
display: none
|
||||
}
|
||||
|
||||
py-button:not(:defined) {
|
||||
display: none
|
||||
}
|
||||
|
||||
py-box:not(:defined) {
|
||||
display: none
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -24,6 +49,7 @@ html{
|
||||
border-right: 4px solid rgba(255, 255, 255, 0);
|
||||
animation: spinner 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spinner {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
@@ -81,27 +107,29 @@ html{
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.py-box{
|
||||
.py-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.py-box div.py-box-child *
|
||||
{
|
||||
.py-box div.py-box-child * {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.py-repl-box{
|
||||
.py-repl-box {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.editor-box{
|
||||
.editor-box {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(209, 213, 219, var(--tw-border-opacity));
|
||||
border-width: 1px;
|
||||
position: relative;
|
||||
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
|
||||
--tw-ring-inset: var(--tw-empty,
|
||||
/*!*/
|
||||
/*!*/
|
||||
);
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgba(59, 130, 246, 0.5);
|
||||
@@ -116,11 +144,11 @@ html{
|
||||
border-color: rgb(209, 213, 219)
|
||||
}
|
||||
|
||||
.editor-box:hover button{
|
||||
.editor-box:hover button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.repl-play-button{
|
||||
.repl-play-button {
|
||||
opacity: 0;
|
||||
bottom: 0.25rem;
|
||||
right: 0.25rem;
|
||||
@@ -154,65 +182,65 @@ html{
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.repl-play-button:hover{
|
||||
.repl-play-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.py-title{
|
||||
.py-title {
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.py-title h1{
|
||||
.py-title h1 {
|
||||
font-weight: 700;
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.py-input{
|
||||
.py-input {
|
||||
padding: 0.5rem;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(209, 213, 219, var(--tw-border-opacity));
|
||||
border-width: 1px;
|
||||
border-radius: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
margin-right: 0.75rem;
|
||||
border-style: solid;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.py-box input.py-input{
|
||||
.py-box input.py-input {
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.central-content{
|
||||
.central-content {
|
||||
max-width: 20rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
input {
|
||||
text-rendering: auto;
|
||||
color: -internal-light-dark(black, white);
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
line-height: normal;
|
||||
text-transform: none;
|
||||
text-indent: 0px;
|
||||
text-shadow: none;
|
||||
display: inline-block;
|
||||
text-align: start;
|
||||
appearance: auto;
|
||||
-webkit-rtl-ordering: logical;
|
||||
cursor: text;
|
||||
background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
|
||||
margin: 0em;
|
||||
padding: 1px 2px;
|
||||
border-width: 2px;
|
||||
border-style: inset;
|
||||
border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
|
||||
border-image: initial;
|
||||
text-rendering: auto;
|
||||
color: -internal-light-dark(black, white);
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
line-height: normal;
|
||||
text-transform: none;
|
||||
text-indent: 0px;
|
||||
text-shadow: none;
|
||||
display: inline-block;
|
||||
text-align: start;
|
||||
appearance: auto;
|
||||
-webkit-rtl-ordering: logical;
|
||||
cursor: text;
|
||||
background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
|
||||
margin: 0em;
|
||||
padding: 1px 2px;
|
||||
border-width: 2px;
|
||||
border-style: inset;
|
||||
border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
|
||||
border-image: initial;
|
||||
}
|
||||
|
||||
.py-button{
|
||||
.py-button {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(255, 255, 255, var(--tw-text-opacity));
|
||||
padding: 0.5rem;
|
||||
@@ -224,15 +252,19 @@ input {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.py-li-element p{
|
||||
.py-li-element p {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.py-li-element p{
|
||||
.py-li-element p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
button, input, optgroup, select, textarea {
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
|
||||
68
pyscriptjs/tests/integration/test_03_style.py
Normal file
68
pyscriptjs/tests/integration/test_03_style.py
Normal file
@@ -0,0 +1,68 @@
|
||||
import re
|
||||
|
||||
from playwright.sync_api import expect
|
||||
|
||||
from .support import PyScriptTest
|
||||
|
||||
|
||||
class TestStyle(PyScriptTest):
|
||||
def test_pyscript_not_defined(self):
|
||||
"""Test raw elements that are not defined for display:none"""
|
||||
doc = """
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="build/pyscript.css" />
|
||||
</head>
|
||||
<body>
|
||||
<py-config>hello</py-config>
|
||||
<py-script>hello</py-script>
|
||||
<py-repl>hello</py-repl>
|
||||
<py-title>hello</py-title>
|
||||
<py-inputbox>hello</py-inputbox>
|
||||
<py-button>hello</py-button>
|
||||
<py-box>hello</py-box>
|
||||
</body>
|
||||
</html>
|
||||
"""
|
||||
self.writefile("test-not-defined-css.html", doc)
|
||||
self.goto("test-not-defined-css.html")
|
||||
expect(self.page.locator("py-config")).to_be_hidden()
|
||||
expect(self.page.locator("py-script")).to_be_hidden()
|
||||
expect(self.page.locator("py-repl")).to_be_hidden()
|
||||
expect(self.page.locator("py-title")).to_be_hidden()
|
||||
expect(self.page.locator("py-inputbox")).to_be_hidden()
|
||||
expect(self.page.locator("py-button")).to_be_hidden()
|
||||
expect(self.page.locator("py-box")).to_be_hidden()
|
||||
|
||||
def test_pyscript_defined(self):
|
||||
"""Test elements have visibility that should"""
|
||||
self.pyscript_run(
|
||||
"""
|
||||
<py-config>
|
||||
name = "foo"
|
||||
</py-config>
|
||||
<py-script>print("hello")</py-script>
|
||||
<py-repl>print("hello")</py-repl>
|
||||
<py-title>hello</py-title>
|
||||
<py-inputbox label="my input">
|
||||
import js
|
||||
def on_keypress(evt):
|
||||
if evt.key == "Enter":
|
||||
js.console.log(evt.target.value)
|
||||
</py-inputbox>
|
||||
<py-box>
|
||||
<py-button label="my button">
|
||||
import js
|
||||
def on_click(evt):
|
||||
js.console.log('clicked!')
|
||||
</py-button>
|
||||
</py-box>
|
||||
"""
|
||||
)
|
||||
expect(self.page.locator("py-config")).to_be_hidden()
|
||||
expect(self.page.locator("py-script")).to_be_visible()
|
||||
expect(self.page.locator("py-repl")).to_be_visible()
|
||||
expect(self.page.locator("py-title")).to_be_visible()
|
||||
expect(self.page.locator("py-inputbox")).to_be_visible()
|
||||
expect(self.page.locator("py-button")).to_be_visible()
|
||||
expect(self.page.locator("py-box")).to_be_visible()
|
||||
Reference in New Issue
Block a user