761099 - No way to preserve aspect ratio of elements when requesting DOM fullscreen

Status: RESOLVED FIXED

(Core :: DOM: Core & HTML, defect)

Description

[Katelyn Gadd (:kael)]

Attachment: Normal rendering to demonstrate intended aspect ratio

When requesting DOM fullscreen mode for a canvas element (via mozRequestFullScreen), the element is automatically resized to fill the entire screen, ignoring its original aspect ratio. In addition to this, there is no way to manually readjust the size of the canvas - it is locked to precisely the dimensions of the screen and seems to ignore the CSS padding and margin attributes in addition to the native width/height attributes of the canvas.

For comparison, in Google Chrome, when you enter DOM fullscreen on a canvas element, you are free to adjust its dimensions (using canvas.width/height) and the browser even helpfully centers the element on-screen for you. This is pretty much the optimal behavior in that it allows you to preserve aspect ratio if you wish (by manually setting width/height on the canvas) but still defaults to a full-screen scale.

You could potentially preserve aspect ratio using canvas transforms, but then any drawing operations could extend beyond the edges of the screen 'box' due to the fact that the canvas still occupies the entire screen. You'd have to manually draw in black letterbox rects in the correct places or use a clip or something. All of those workarounds would have negative performance consequences.

I've attached screenshots showing how DOM fullscreen behaves in Firefox 14a2 (Aurora) and Chrome 21 (Canary) respectively, along with showing a normal (non-fullscreen) rendering of the same content so you can see what the intended aspect ratio is.

I can give anyone interested in working on this bug access to a demo that demonstrates it; unfortunately I don't have permission to make the demo public or make its URL publicly viewable in this bug.

Comment 1

[Katelyn Gadd (:kael)]

Attachment: Fullscreen rendering in Firefox

Comment 2

[Katelyn Gadd (:kael)]

Attachment: Fullscreen rendering in Chrome

Comment 3

[Boris Zbarsky [:bzbarsky]]

Note that I believe our current behavior is what the spec requires.  So you're really looking for new spec text here (and in particular you need to be able to describe your desired behavior in terms that can go into a spec).

Comment 4

[Katelyn Gadd (:kael)]

Sorry, am I reading the wrong spec? Here's what the as of June 2 version I just looked at says:

"""
It is not rendered if it, or an ancestor, has the display property set to none.

If its specified position property is static, it computes to absolute.

Its outline, if any, is to be rendered before step 10 in the painting order.

Unless overridden by another specification, its static position for left, right, and top is zero."""

Out of that the only behavior I can see being suggested is that width should be ignored. It does not seem to suggest that height should be ignored, nor that margin or padding should be ignored. And it explicitly mentions border (which, to be fair, I have not tested as a method for letterboxing - I'll give that a try).

Comment 5

[Katelyn Gadd (:kael)]

Also, the specification also mentions that it should default to 'object-fit: contain' (6.4: user agent level style sheet defaults), which is specified as aspect-ratio aware (http://www.w3.org/TR/2011/WD-css3-images-20110217/#object-fit). If that part of the specification were implemented, I would be getting an aspect ratio aware fullscreen scale. Or does that CSS attribute not do anything for canvas elements? The way 'replaced elements' is defined in CSS sounds like it would include canvases, because they are images with intrinsic dimensions (of course, the dimensions are set by the width/height properties, but they are still intrinsic to the image, or more precisely, the framebuffer associated with the canvas).

Comment 6

[Boris Zbarsky [:bzbarsky]]

You're reading the wrong part of the spec.  The relevant part of the spec is in section 6.4 and says this:

  *|*:fullscreen {
    position:fixed;
    top:0; right:0; bottom:0; left:0;
    margin:0;
    box-sizing:border-box;
    width:100%;
    height:100%;
    object-fit:contain;
  }

The only difference between that and what we do is that we set all of those to !important in the UA stylesheet.  Maybe we shouldn't....

Comment 7

[Boris Zbarsky [:bzbarsky]]

Ah, object-fit.  We don't implement that yet.  Yes, if we implemented that things would work.

Comment 8

[Katelyn Gadd (:kael)]

Personally I'd argue setting them to !important in the UA stylesheet is wrong. If they weren't important I could override them to get my desired behavior. I guess maybe if I set !important it'll override your !important? I should try that.

If this will 'just work' once object-fit is in, I can always wait for that.

Comment 9

[Boris Zbarsky [:bzbarsky]]

> Personally I'd argue setting them to !important in the UA stylesheet is wrong.

If you don't, then this:

  <img src="foo" width="100" height="100">

when taken full-screen won't actually change size at all.

> I guess maybe if I set !important it'll override your !important?

In Gecko, UA !important overrides everything.

Comment 10

[Xidorn Quan [:xidorn] UTC+10]

Now we have "object-fit: contain !important" on fullscreen elements, so this bug is fixed... But... actually now we have no way to not preserve aspect ratio of elements :/

We'll see whether we can remove "!important" from that rule.