RFR: 8358450: Viewport characteristics media features [v16]

[Andy Goryachev]

On Tue, 16 Dec 2025 20:13:49 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:
> 
>   documentation

modules/javafx.graphics/src/main/docs/javafx/scene/doc-files/cssref.html line 971:

> 969:                 <td class="value">fullscreen | standalone</td>
> 970:                 <td>discrete</td>
> 971:                 <td><code>fullscreen</code> if <code>Stage.isFullScreen()</code>, <code>standalone</code> otherwise</code></td>

This description is perfectly clear now, thanks!

One question though: at the beginning of the chapter, you say "A media query is a method of testing certain aspects of the [Scene](https://github.com/openjdk/jfx/javafx/scene/Scene.html)" but this is not strictly true, since the Stage is also involved.

Do you think we should mention "and/or Stage" or something like that?

Moreover, what if other media queries are added that depend on some other aspects?  Maybe we should specify whose properties we are looking at in the comments, like "width" -> "Scene width" ?  What do you think?

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

PR Review Comment: https://git.openjdk.org/jfx/pull/1844#discussion_r2624758212