1435339 - [webvr] vrdisplay.requestPresent does not render if source not in the DOM

Status: UNCONFIRMED

(Core :: WebVR, defect)

Description

[Jordan Santell [:jsantell] [@jsantell]]

STR:
* create a canvas to render WebVR content to via document.createElement('canvas')
* Get a VRDisplay and requestPresent using said canvas

Actual Results:
* VRDisplay enters VR mode and is considered presenting, yet nothing appears on HMD

Expected Results:
* VRDisplay enters VR mode and is considered presenting and renders to HMD (should cycle through colors).

----

Here's a test case: https://request-present-test.glitch.me/

The relevant code looks like:

```
const canvas = document.createElement('canvas');
// Must do this on some platforms before presenting,
// otherwise resulting in `DOMException: Layer source must have a
// WebGLRenderingContext`
canvas.getContext('webgl');
vrDisplay.requestPresent([{ source: canvas }]);
```

We create a canvas via JS (not in the DOM) and use it for requesting presentation. On Firefox Nightly 60/Windows 10/HTC Vive, presenting does not currently render to the HMD. On Chrome for Android/Daydream, this works as expected. Looking at the spec, there doesn't seem to be any requirement for the canvas to be in the DOM.

In the above linked test cases, the following modifications fix the issue:

* Inserting visible canvas into DOM before/after presenting: `document.body.appendChild(canvas)`
* Inserting hidden canvas into DOM before/after presenting, and then making canvas visible: `document.body.appendChild(canvas), canvas.style.display = 'none'; /* then present */ canvas.style.display = 'block';`
* Inserting visible canvas into DOM with 1px width: `document.body.appendChild(canvas), canvas.style.width = '1px';`

The below modifications still fail:

* Inserting hidden canvas into DOM before/after presenting: `document.body.appendChild(canvas), canvas.style.display = 'none'`
* Inserting visible canvas into DOM with 0px width: `document.body.appendChild(canvas), canvas.style.width = '0px';`

---

It seems that we need to render at least one visible frame with the canvas not hidden in the DOM to present to HMD. The closest I can get to working around this is ensuring the canvas is in the DOM and rendered with the CSS width of 1px (which is still rendered on screen, but can do a good job of obscuring this with CSS). It seems that according to the spec, there shouldn't be a requirement whether or not the render source should be in the DOM, and this works on other platforms. Currently running into this working on a WebXR->WebVR polyfill, wherein the WebXR spec, it's more likely that the XRWebGLLayer is not already in the DOM (due to explicit support for mirroring via outputContext).