This is an automated email from the ASF dual-hosted git repository.
Harbs pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new e55b6721b3 media and container queries
e55b6721b3 is described below
commit e55b6721b3ad4def7ca9322765119ea372a7ba1f
Author: Harbs <[email protected]>
AuthorDate: Thu Jun 18 22:36:37 2026 +0300
media and container queries
---
.../Style/src/main/resources/style-manifest.xml | 3 +
.../projects/Style/src/main/royale/StyleClasses.as | 3 +
.../style/stylebeads/states/QueryBaseStyle.as | 20 +++++
.../stylebeads/states/media/ContainerBreakpoint.as | 8 +-
.../style/stylebeads/states/media/MediaBetween.as | 12 ++-
.../stylebeads/states/media/MediaBreakpoint.as | 6 +-
...gerTest.as => ContainerBreakpointTestHelper.as} | 36 ++------
.../test/royale/flexUnitTests/StyleManagerTest.as | 95 ++++++++++++++++++++++
8 files changed, 137 insertions(+), 46 deletions(-)
diff --git a/frameworks/projects/Style/src/main/resources/style-manifest.xml
b/frameworks/projects/Style/src/main/resources/style-manifest.xml
index 0c0882cc7d..407135f4da 100644
--- a/frameworks/projects/Style/src/main/resources/style-manifest.xml
+++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml
@@ -120,6 +120,9 @@
<component id="GroupPseudo"
class="org.apache.royale.style.stylebeads.states.GroupPseudo"/>
<component id="ClassState"
class="org.apache.royale.style.stylebeads.states.ClassState"/>
<component id="SiblingPseudo"
class="org.apache.royale.style.stylebeads.states.SiblingPseudo"/>
+ <component id="MediaBreakpoint"
class="org.apache.royale.style.stylebeads.states.media.MediaBreakpoint"/>
+ <component id="MediaBetween"
class="org.apache.royale.style.stylebeads.states.media.MediaBetween"/>
+ <component id="ContainerBreakpoint"
class="org.apache.royale.style.stylebeads.states.media.ContainerBreakpoint"/>
<component id="BackgroundStyle"
class="org.apache.royale.style.stylebeads.BackgroundStyle"/>
<component id="ContainerPosition"
class="org.apache.royale.style.stylebeads.ContainerPosition"/>
diff --git a/frameworks/projects/Style/src/main/royale/StyleClasses.as
b/frameworks/projects/Style/src/main/royale/StyleClasses.as
index c325fca91c..1200cc2588 100644
--- a/frameworks/projects/Style/src/main/royale/StyleClasses.as
+++ b/frameworks/projects/Style/src/main/royale/StyleClasses.as
@@ -42,6 +42,9 @@ package
import org.apache.royale.style.util.Min;Min;
import org.apache.royale.style.util.Max;Max;
import
org.apache.royale.style.beads.TreeItemRendererInitializer;TreeItemRendererInitializer;
+ import
org.apache.royale.style.stylebeads.states.media.MediaBreakpoint;
MediaBreakpoint;
+ import
org.apache.royale.style.stylebeads.states.media.MediaBetween; MediaBetween;
+ import
org.apache.royale.style.stylebeads.states.media.ContainerBreakpoint;
ContainerBreakpoint;
}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/QueryBaseStyle.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/QueryBaseStyle.as
index 4441c7cfe2..d79021f1df 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/QueryBaseStyle.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/QueryBaseStyle.as
@@ -99,6 +99,26 @@ package org.apache.royale.style.stylebeads.states
return "" + value;
}
+ protected function computeBreakpoint(value:*):String
+ {
+ if(value == null) return "";
+ var breakpoint:String = "" + value;
+ switch(breakpoint.toLowerCase())
+ {
+ case "sm":
+ return
ThemeManager.instance.activeTheme.breakpointSM;
+ case "md":
+ return
ThemeManager.instance.activeTheme.breakpointMD;
+ case "lg":
+ return
ThemeManager.instance.activeTheme.breakpointLG;
+ case "xl":
+ return
ThemeManager.instance.activeTheme.breakpointXL;
+ case "2xl":
+ return
ThemeManager.instance.activeTheme.breakpoint2XL;
+ }
+ return computeSize(value);
+ }
+
protected function sanitizeIdentifier(value:String):String
{
return value.replace(/[\s\.\(\)\+\*\/\[\]]/g,
"-").replace(/-+/g, "-");
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/ContainerBreakpoint.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/ContainerBreakpoint.as
index 702ca4f38c..8c7105553c 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/ContainerBreakpoint.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/ContainerBreakpoint.as
@@ -20,8 +20,6 @@ package org.apache.royale.style.stylebeads.states.media
{
import org.apache.royale.style.IStyleUIBase;
import org.apache.royale.style.stylebeads.states.QueryBaseStyle;
- import org.apache.royale.style.util.ThemeManager;
- import org.apache.royale.style.util.CSSUnit;
public class ContainerBreakpoint extends QueryBaseStyle
{
@@ -78,9 +76,9 @@ package org.apache.royale.style.stylebeads.states.media
querySelector = "";
return;
}
- var sizeValue:String = computeSize(value);
- queryBody = "(min-width: " + sizeValue + ")";
- querySelector = "container-min-width-" +
sanitizeIdentifier(sizeValue);
+ var sizeValue:String = computeBreakpoint(value);
+ queryBody = "(width >= " + sizeValue + ")";
+ querySelector = "container-min-width-" +
sanitizeIdentifier("" + value);
}
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/MediaBetween.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/MediaBetween.as
index d724e352c3..b9ba4b4e49 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/MediaBetween.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/MediaBetween.as
@@ -20,8 +20,6 @@ package org.apache.royale.style.stylebeads.states.media
{
import org.apache.royale.style.stylebeads.states.QueryBaseStyle;
- import org.apache.royale.style.util.ThemeManager;
- import org.apache.royale.style.util.CSSUnit;
public class MediaBetween extends QueryBaseStyle
{
@@ -70,8 +68,8 @@ package org.apache.royale.style.stylebeads.states.media
return;
}
- var minVal:String = _min != null ? computeSize(_min) :
null;
- var maxVal:String = _max != null ? computeSize(_max) :
null;
+ var minVal:String = _min != null ?
computeBreakpoint(_min) : null;
+ var maxVal:String = _max != null ?
computeBreakpoint(_max) : null;
var body:String = "";
var id:String = "media-between";
@@ -79,14 +77,14 @@ package org.apache.royale.style.stylebeads.states.media
if(minVal)
{
body += "(min-width: " + minVal + ")";
- id += "-min-" + sanitizeIdentifier(minVal);
+ id += "-min-" + sanitizeIdentifier("" + _min);
}
if(maxVal)
{
if(body) body += " and ";
- body += "(max-width: " + maxVal + ")";
- id += "-max-" + sanitizeIdentifier(maxVal);
+ body += "(width < " + maxVal + ")";
+ id += "-max-" + sanitizeIdentifier("" + _max);
}
queryBody = body;
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/MediaBreakpoint.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/MediaBreakpoint.as
index abc8989fbf..054d4d5004 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/MediaBreakpoint.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/MediaBreakpoint.as
@@ -20,8 +20,6 @@ package org.apache.royale.style.stylebeads.states.media
{
import org.apache.royale.style.stylebeads.states.QueryBaseStyle;
- import org.apache.royale.style.util.ThemeManager;
- import org.apache.royale.style.util.CSSUnit;
public class MediaBreakpoint extends QueryBaseStyle
{
@@ -49,9 +47,9 @@ package org.apache.royale.style.stylebeads.states.media
querySelector = "";
return;
}
- var sizeValue:String = computeSize(value);
+ var sizeValue:String = computeBreakpoint(value);
queryBody = "(min-width: " + sizeValue + ")";
- querySelector = "media-min-width-" +
sanitizeIdentifier(sizeValue);
+ querySelector = "media-min-width-" +
sanitizeIdentifier("" + value);
}
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/test/royale/flexUnitTests/StyleManagerTest.as
b/frameworks/projects/Style/src/test/royale/flexUnitTests/ContainerBreakpointTestHelper.as
similarity index 63%
copy from
frameworks/projects/Style/src/test/royale/flexUnitTests/StyleManagerTest.as
copy to
frameworks/projects/Style/src/test/royale/flexUnitTests/ContainerBreakpointTestHelper.as
index 8d33bf0c96..797718fe30 100644
---
a/frameworks/projects/Style/src/test/royale/flexUnitTests/StyleManagerTest.as
+++
b/frameworks/projects/Style/src/test/royale/flexUnitTests/ContainerBreakpointTestHelper.as
@@ -18,42 +18,18 @@
////////////////////////////////////////////////////////////////////////////////
package flexUnitTests
{
+ import
org.apache.royale.style.stylebeads.states.media.ContainerBreakpoint;
- import org.apache.royale.test.asserts.*;
- import org.apache.royale.style.util.StyleManager;
-
- public class StyleManagerTest
+ public class ContainerBreakpointTestHelper extends ContainerBreakpoint
{
- [Before]
- public function setUp():void
- {
- }
-
- [After]
- public function tearDown():void
+ public function ContainerBreakpointTestHelper(size:* = null)
{
+ super(size);
}
- [BeforeClass]
- public static function setUpBeforeClass():void
+ public function get queryRule():String
{
+ return "@" + queryType + queryPrefix + " " + queryBody
+ " { }";
}
-
- [AfterClass]
- public static function tearDownAfterClass():void
- {
- }
-
- [Test]
- public function testInsert():void
- {
- COMPILE::JS
- {
- assertFalse(StyleManager.hasStyle(".foo"));
- StyleManager.addStyle(".foo", ".foo",
"display:flex;");
- assertTrue(StyleManager.hasStyle(".foo"));
- }
- }
-
}
}
diff --git
a/frameworks/projects/Style/src/test/royale/flexUnitTests/StyleManagerTest.as
b/frameworks/projects/Style/src/test/royale/flexUnitTests/StyleManagerTest.as
index 8d33bf0c96..4ea350da78 100644
---
a/frameworks/projects/Style/src/test/royale/flexUnitTests/StyleManagerTest.as
+++
b/frameworks/projects/Style/src/test/royale/flexUnitTests/StyleManagerTest.as
@@ -20,7 +20,14 @@ package flexUnitTests
{
import org.apache.royale.test.asserts.*;
+ import org.apache.royale.style.stylebeads.ILeafStyleBead;
+ import org.apache.royale.style.stylebeads.layout.Display;
+ import
org.apache.royale.style.stylebeads.states.media.ContainerBreakpoint;
+ import org.apache.royale.style.stylebeads.states.media.MediaBetween;
+ import org.apache.royale.style.stylebeads.states.media.MediaBreakpoint;
import org.apache.royale.style.util.StyleManager;
+ import org.apache.royale.style.util.StyleTheme;
+ import org.apache.royale.style.util.ThemeManager;
public class StyleManagerTest
{
@@ -37,6 +44,10 @@ package flexUnitTests
[BeforeClass]
public static function setUpBeforeClass():void
{
+ COMPILE::JS
+ {
+ ThemeManager.instance.registerTheme(new
StyleTheme());
+ }
}
[AfterClass]
@@ -55,5 +66,89 @@ package flexUnitTests
}
}
+ [Test]
+ public function testMediaBreakpointUsesThemeBreakpoint():void
+ {
+ COMPILE::JS
+ {
+ var display:Display = new Display("flex");
+ var media:MediaBreakpoint = new
MediaBreakpoint("md", [display]);
+ var leaves:Array = media.getLeaves();
+ (leaves[0] as ILeafStyleBead).getSelector();
+
+ var rule:CSSRule =
StyleManager.getQuery("media-min-width-md");
+ assertNotNull(rule);
+ assertTrue(rule.cssText.indexOf("@media
(min-width: 48rem)") != -1);
+ assertTrue(rule.cssText.indexOf(".flex") != -1);
+ assertTrue(rule.cssText.indexOf("display:
flex") != -1 || rule.cssText.indexOf("display:flex") != -1);
+ }
+ }
+
+ [Test]
+ public function testMediaBetweenUsesThemeBreakpoints():void
+ {
+ COMPILE::JS
+ {
+ var display:Display = new Display("grid");
+ var media:MediaBetween = new MediaBetween("md",
"xl", [display]);
+ var leaves:Array = media.getLeaves();
+ (leaves[0] as ILeafStyleBead).getSelector();
+
+ var rule:CSSRule =
StyleManager.getQuery("media-between-min-md-max-xl");
+ assertNotNull(rule);
+ assertTrue(rule.cssText.indexOf("@media
(min-width: 48rem) and (width < 80rem)") != -1);
+ assertTrue(rule.cssText.indexOf(".grid") != -1);
+ assertTrue(rule.cssText.indexOf("display:
grid") != -1 || rule.cssText.indexOf("display:grid") != -1);
+ }
+ }
+
+ [Test]
+ public function
testContainerBreakpointUsesThemeBreakpoint():void
+ {
+ COMPILE::JS
+ {
+ if(canInsertContainerRule())
+ {
+ var display:Display = new
Display("block");
+ var container:ContainerBreakpoint = new
ContainerBreakpoint("lg", [display]);
+ var leaves:Array =
container.getLeaves();
+ (leaves[0] as
ILeafStyleBead).getSelector();
+
+ var rule:CSSRule =
StyleManager.getQuery("container-min-width-lg");
+ assertNotNull(rule);
+
assertTrue(rule.cssText.indexOf("@container (width >= 64rem)") != -1);
+
assertTrue(rule.cssText.indexOf(".block") != -1);
+
assertTrue(rule.cssText.indexOf("display: block") != -1 ||
rule.cssText.indexOf("display:block") != -1);
+ }
+ else
+ {
+ var
helper:ContainerBreakpointTestHelper = new ContainerBreakpointTestHelper("lg");
+
+ assertEquals("container-min-width-lg",
helper.styleType);
+ assertEquals("@container (width >=
64rem) { }", helper.queryRule);
+ }
+ }
+ }
+
+ COMPILE::JS
+ private function canInsertContainerRule():Boolean
+ {
+ var styleElement:HTMLStyleElement =
document.createElement('style') as HTMLStyleElement;
+ document.head.appendChild(styleElement);
+ var sheet:CSSStyleSheet = styleElement.sheet as
CSSStyleSheet;
+ var supported:Boolean = true;
+ try
+ {
+ sheet.insertRule("@container (width >= 1rem) {
}", 0);
+ }
+ catch(error:Error)
+ {
+ supported = false;
+ }
+ document.head.removeChild(styleElement);
+ return supported;
+ }
+
}
+
}
