#1293 fix ui.query with CSS variables

zauberzeug · Aug 1, 2023 · 8df7d25 · 8df7d25
1 parent fe85efe
commit 8df7d25
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/nicegui/elements/query.js b/nicegui/elements/query.js
@@ -13,7 +13,7 @@ export default {
  },
  add_style(style) {
  Object.entries(style).forEach(([key, val]) =>
- document.querySelectorAll(this.selector).forEach((e) => (e.style[key] = val))
+ document.querySelectorAll(this.selector).forEach((e) => e.style.setProperty(key, val))
  );
  },
  remove_style(keys) {

diff --git a/tests/conftest.py b/tests/conftest.py
@@ -6,7 +6,6 @@
 import pytest
 from selenium import webdriver
 from selenium.webdriver.chrome.service import Service
-from webdriver_manager.chrome import ChromeDriverManager
 
 from nicegui import Client, globals
 from nicegui.elements import plotly, pyplot

diff --git a/tests/test_query.py b/tests/test_query.py
@@ -52,3 +52,11 @@ def test_query_multiple_divs(screen: Screen):
  screen.wait(0.5)
  assert screen.find('A').value_of_css_property('border') == '1px solid rgb(0, 0, 0)'
  assert screen.find('B').value_of_css_property('border') == '1px solid rgb(0, 0, 0)'
+
+
+def test_query_with_css_variables(screen: Screen):
+ ui.add_body_html('<div id="element">Test</div>')
+ ui.query('#element').style('--color: red; color: var(--color)')
+
+ screen.open('/')
+ assert screen.find('Test').value_of_css_property('color') == 'rgba(255, 0, 0, 1)'