Re: [csswg-drafts] [resize-observer] device-pixel-border-box size (#3554)

Talked with Ken a bit more about ResizeObserver, and it sounds like it can accommodate the use case that we have at Unity.

One question I have is regarding how proper WebGL context creation now looks like? I.e. 

> Developers must do a certain amount (and really not all that much in this case) of work to adapt to this paradigm vs a fully immediate-mode they may be used to from prior experience.

so is the new proper paradigm to create a WebGL context 
```html
<html>
<body>
<canvas id='canvas' style='width: 100%; height: 100%'> </canvas>
<script>
var canvas = document.getElementById('canvas');

new ResizeObserver(entries => {
  var size = entries[0].devicePixelBorderBoxSize;
  canvas.width = size.width;
  canvas.height = size.height;
  var ctx = canvas.getContext('webgl');
  // init game engine/game/app logic here:
  initRendering(ctx);
}).observe(canvas, { box: 'device-pixel-border-box' });
</script>
</body>
</html>
```
does the above work?

Another question was how about if the JS code needs to be loaded dynamically? E.g. applying the above to the current structure of Emscripten compiled WebAssembly applications would look like:
```html
<html>
<body>
<canvas id='canvas' style='width: 100%; height: 100%'> </canvas>
<script>

function downloadScript(url) {
    return new Promise((ok, err) => {
      var s = document.createElement('script');
      s.src = url;
      s.onload = () => { ok(); };
      document.body.appendChild(s);
  });
}
downloadScript('page.js');
```
page.js:
```js
var canvas = document.getElementById('canvas');

new ResizeObserver(entries => {
  var size = entries[0].devicePixelBorderBoxSize;
  canvas.width = size.width;
  canvas.height = size.height;
  var ctx = canvas.getContext('webgl');
  // init game engine/game/app logic here:
  initRendering(ctx);
}).observe(canvas, { box: 'device-pixel-border-box' });
</script>
</body>
</html>
```
Does that work? I.e. will observing the resize cause an observe event to be fired on the next frame?

Or does the user need to dynamically create the canvas element with
```js
var canvas = new Canvas();
canvas.style = 'width: 100%; height: 100%;';
new ResizeObserver(......).observe(canvas);
document.body.appendChild(canvas);
```
in order for the resize event to be observable for the first time?

-- 
GitHub Notification of comment by juj
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3554#issuecomment-508023377 using your GitHub account

Received on Wednesday, 3 July 2019 09:47:07 UTC