css resize in fullscreen mode

[mjf-g]

The following test case has the same behavior In Chrome and Firefox, the resizable DOM element shows a resizer in fullscreen mode, but it can't be resized.

<style type="text/css">
  #container {
    width: 200px;
    height: 200px;
    background-color: green;
    overflow: hidden;
    resize: both;
  }
</style>

<script type="text/javascript">
    var in_fullscreen = false;
    function click_func() {
        var target = document.getElementById('container');
        if (in_fullscreen)
            document.exitFullscreen();
        else
            target.requestFullscreen();
        in_fullscreen = !in_fullscreen;
    }
</script>

<div id="container">
  <input type="button" value="Enter/Exit Fullscreen" onclick="click_func();" />
</div>

Here are some discussions in Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1642598. Does resize: none !important need to be considered in the "User-agent level style sheet defaults"?

[annevk]

Can you describe the motivation a bit better? From that bug it sounds like this might allow for some simplification of layout/paint code?

cc @emilio

[annevk]

Also, this would only apply to the element being shown fullscreen? Other elements can still be resized?

[mjf-g]

Can you describe the motivation a bit better? From that bug it sounds like this might allow for some simplification of layout/paint code?

cc @emilio

The spec doesn't define the behavior for the resizer which should be displayed or not when the resizable element is in fullscreen mode. So a clearer definition may be needed here.

My original idea was to modify directly in layout and paint code, which will be unnecessary if resize: none !important is added to the "User-agent level style sheet defaults", :).

Also, this would only apply to the element being shown fullscreen? Other elements can still be resized?

Yes, only the element being shown fullscreen.

[annevk]

I guess the underlying question is whether a resize widget should be shown for an element that has a fixed (in the user agent !important sense) width and height. Does CSS say anything about that?

[emilio]

Can you describe the motivation a bit better? From that bug it sounds like this might allow for some simplification of layout/paint code?

It doesn't really simplify anything. Iff we wanted to fix this and UA stylesheets were not an option then we'd complicate layout a bit, which would be a bit unfortunate for this odd edge case :)

[annevk]

https://drafts.csswg.org/css-ui-3/#resize

When an element is resized by the user, the user agent sets the width and height properties to px unit length values of the size indicated by the user, in the element’s style attribute DOM, replacing existing property declaration(s), if any, without !important, if any.

So what if !important is used there? It seems user agents ignore it anyway... But it's also not entirely clear to me from that sentence if that is correct or incorrect.

However, it does go on to suggest:

There may be situations where user attempts to resize an element appear to be overriden or ignored, e.g. because of !important cascading declarations that supersede that element’s style attribute width and height properties in the DOM.

So I think that ought to be clarified first. If indeed the fullscreen element happens to be the exception and it's easier to rectify that with resize:none, so be it.

[mjf-g]

There are only two resizable situations which have a fixed size I can think of:

1. width = min-width = max-width, height = min-height = max-height;
2. fullscreen;

I'm not sure if there are any other situations.