RFR: 8358450: Viewport characteristics media features [v13]

[Andy Goryachev]

On Tue, 16 Dec 2025 02:43:44 GMT, Michael Strauß <mstrauss at openjdk.org> wrote:

>> Implementation of [viewport characteristics media features](https://www.w3.org/TR/mediaqueries-5/#mf-viewport-characteristics):
>> * `width`
>> * `height`
>> * `aspect-ratio`: width / height
>> * `orientation`: `portrait`, `landscape`
>> * `display-mode`: `fullscreen`, `standalone` (note: `browser` and `minimal-ui` are not supported in JavaFX)
>> 
>> Here's a small example how the new media features can be used:
>> 
>>     @Override
>>     public void start(Stage stage) {
>>         var button = new Button("Toggle full-screen");
>>         button.setOnAction(_ -> stage.setFullScreen(!stage.isFullScreen()));
>>         var label = new Label();
>>         var root = new BorderPane(button, null, null, label, null);
>>         var scene = new Scene(root, 650, 200);
>>         BorderPane.setAlignment(label, Pos.CENTER);
>>         label.textProperty().bind(scene.widthProperty().map(v -> String.format("Width: %.2f", v.doubleValue())));
>>         scene.getStylesheets().add("data:text/css;base64," + Base64.getEncoder().encodeToString("""
>>             @media (max-width: 500) {
>>                 .button {
>>                     -fx-background-color: red;
>>                 }
>>             }
>> 
>>             @media (600 < width <= 700) {
>>                 .button {
>>                     -fx-background-color: green;
>>                 }
>>             }
>> 
>>             @media (min-width: 800) {
>>                 .button {
>>                     -fx-background-color: yellow;
>>                 }
>>             }
>> 
>>             @media (display-mode: fullscreen) {
>>                 .button {
>>                     -fx-background-color: black !important;
>>                 }
>>             }
>>             """.getBytes(StandardCharsets.UTF_8)));
>> 
>>         stage.initStyle(StageStyle.DECORATED);
>>         stage.setScene(scene);
>>         stage.show();
>>     }
>
> Michael Strauß has updated the pull request incrementally with one additional commit since the last revision:
> 
>   use CssParser.size() to parse sizes

Thank you for making the changes!

However, `display-mode` does not seem to work on macOS 26.1.  To reproduce:

- run the standalone monkey tester https://github.com/andy-goryachev-oracle/MonkeyTest
- open Tools -> CSS Playground, copy and paste the following stylesheet:


    @media (display-mode: fullscreen) {
        .button {
            -fx-background-color: red;
        }
    }
``` 
- click Update
- select the Button page
- use Window -> Fullscreen to enter the fullscreen
I expect the buttons to turn red, but this does not happen (the earlier test used the Stage page, same result).

Alternatively, if I use `display-mode: standalone ` query, the buttons immediately turn red, but remain unchanged in fullscreen.

modules/javafx.graphics/src/main/java/com/sun/javafx/css/media/MediaFeatures.java line 56:

> 54:         return switch (lowerCaseFeatureName) {
> 55:             // Discrete min-/max-features are just features in a range context in disguise.
> 56:             case "min-width" -> rangeQueryExpression(SizeQueryType.WIDTH, featureValue,

very minor suggestion:

case "min-width" ->
    rangeQueryExpression(SizeQueryType.WIDTH, featureValue, ComparisonOp.GREATER_OR_EQUAL.getExpressionSupplier());

modules/javafx.graphics/src/main/java/com/sun/javafx/css/media/expression/RangeExpression.java line 118:

> 116: 
> 117:     public interface Supplier {
> 118:         RangeExpression getSizeExpression(SizeQueryType featureType, Size sizeValue);

minor: could we use a name other than Supplier to avoid clashing with java.util.function one (it is confusing).

-------------

PR Review: https://git.openjdk.org/jfx/pull/1844#pullrequestreview-3584024894
PR Review Comment: https://git.openjdk.org/jfx/pull/1844#discussion_r2624011066
PR Review Comment: https://git.openjdk.org/jfx/pull/1844#discussion_r2624005715