remoting/webapp/base/js/viewport_unittest.js

   1 // Copyright 2015 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 (function() {
   6
   7 'use strict';
   8
   9 /**
  10  * @param {number} width
  11  * @param {number} height
  12  * @return {{width:number, height:number}}
  13  */
  14 function size(width, height) {
  15   return {width: width, height: height};
  16 }
  17
  18 /**
  19  * @param {number} x
  20  * @param {number} y
  21  * @return {{x:number, y:number}}
  22  */
  23 function dpi(x, y) {
  24   return {x: x, y: y};
  25 }
  26
  27 QUnit.module('Viewport');
  28
  29 QUnit.test('choosePluginSize() handles low-DPI client & host',
  30   function(assert) {
  31     // 1. Client & host size the same.
  32     var pluginSize = remoting.Viewport.choosePluginSize(
  33         size(640, 480), 1.0, size(640, 480), dpi(96, 96), 1.0, false, true);
  34     assert.deepEqual(pluginSize, size(640, 480));
  35
  36     // 2. Client logical dimensions smaller than host's.
  37     pluginSize = remoting.Viewport.choosePluginSize(
  38         size(640, 480), 1.0, size(1024, 600), dpi(96, 96), 1.0, false, true);
  39     assert.deepEqual(pluginSize, size(640, (640 / 1024) * 600));
  40
  41     // 3. Client Y dimension larger than host's, X dimension smaller.
  42     pluginSize = remoting.Viewport.choosePluginSize(
  43         size(640, 640), 1.0, size(1024, 600), dpi(96, 96), 1.0, false, true);
  44     assert.deepEqual(pluginSize, size(640, (640 / 1024) * 600));
  45
  46     // 4. Client dimensions larger than host's by <2x.
  47     pluginSize = remoting.Viewport.choosePluginSize(
  48         size(1280, 900), 1.0, size(640, 480), dpi(96, 96), 1.0, false, true);
  49     assert.deepEqual(pluginSize, size(640, 480));
  50
  51     // 5. Client dimensions larger than host's by >2x.
  52     pluginSize = remoting.Viewport.choosePluginSize(
  53         size(1280, 1024), 1.0, size(640, 480), dpi(96, 96), 1.0, false, true);
  54     assert.deepEqual(pluginSize, size(2 * 640, 2 * 480));
  55
  56     // 6. Client X dimension larger than host's, Y dimension smaller.
  57     pluginSize = remoting.Viewport.choosePluginSize(
  58         size(1152, 600), 1.0, size(1024, 768), dpi(96, 96), 1.0, false, true);
  59     assert.deepEqual(pluginSize, size(1024 * (600 / 768), 600));
  60 });
  61
  62 QUnit.test('choosePluginSize() handles high-DPI client, low-DPI host',
  63   function(assert) {
  64     // 1. Client & host size the same.
  65     var pluginSize = remoting.Viewport.choosePluginSize(
  66         size(640, 480), 2.0, size(640, 480), dpi(96, 96), 1.0, false, true);
  67     assert.deepEqual(pluginSize, size(640, 480));
  68
  69     // 2. Client logical dimensions smaller than host's.
  70     pluginSize = remoting.Viewport.choosePluginSize(
  71         size(640, 480), 2.0, size(1024, 600), dpi(96, 96), 1.0, false, true);
  72     assert.deepEqual(pluginSize, size(640, (640 / 1024) * 600));
  73
  74     // 3. Client Y dimension larger than host's, X dimension smaller.
  75     pluginSize = remoting.Viewport.choosePluginSize(
  76         size(640, 640), 2.0, size(1024, 600), dpi(96, 96), 1.0, false, true);
  77     assert.deepEqual(pluginSize, size(640, (640 / 1024) * 600));
  78
  79     // 4. Client logical dimensions larger than host's by <2x.
  80     // Host dimensions fit into the client's _device_ dimensions 3x, so the
  81     // size in client DIPs should be 1:3/2.
  82     pluginSize = remoting.Viewport.choosePluginSize(
  83         size(1280, 900), 2.0, size(640, 480), dpi(96, 96), 1.0, false, true);
  84     assert.deepEqual(pluginSize, size(640 * 3 / 2.0, 480 * 3 / 2.0));
  85
  86     // 5. Client dimensions larger than host's by >2x.
  87     pluginSize = remoting.Viewport.choosePluginSize(
  88         size(1280, 1024), 2.0, size(640, 480), dpi(96, 96), 1.0, false, true);
  89     assert.deepEqual(pluginSize, size(1280, (1280 / 640) * 480));
  90
  91     // 6. Client X dimension larger than host's, Y dimension smaller.
  92     pluginSize = remoting.Viewport.choosePluginSize(
  93         size(1152, 600), 2.0, size(1024, 768), dpi(96, 96), 1.0, false, true);
  94     assert.deepEqual(pluginSize, size(1024 * (600 / 768), 600));
  95 });
  96
  97 QUnit.test('choosePluginSize() handles low-DPI client, high-DPI host',
  98   function(assert) {
  99     // 1. Client & host size the same.
 100     var pluginSize = remoting.Viewport.choosePluginSize(
 101         size(640, 480), 1.0, size(640, 480), dpi(192, 192), 1.0, false, true);
 102     assert.deepEqual(pluginSize, size(640, 480));
 103
 104     // 2. Client logical dimensions smaller than host's.
 105     pluginSize = remoting.Viewport.choosePluginSize(
 106         size(640, 480), 1.0, size(1024, 600), dpi(192, 192), 1.0, false, true);
 107     assert.deepEqual(pluginSize, size(640, (640 / 1024) * 600));
 108
 109     // 3. Client Y dimension larger than host's, X dimension smaller.
 110     pluginSize = remoting.Viewport.choosePluginSize(
 111         size(640, 640), 1.0, size(1024, 600), dpi(192, 192), 1.0, false, true);
 112     assert.deepEqual(pluginSize, size(640, (640 / 1024) * 600));
 113
 114     // 4. Client dimensions larger than host's by <2x.
 115     pluginSize = remoting.Viewport.choosePluginSize(
 116         size(1280, 900), 1.0, size(640, 480), dpi(192, 192), 1.0, false, true);
 117     assert.deepEqual(pluginSize, size(640, 480));
 118
 119     // 5. Client dimensions larger than host's by >2x.
 120     pluginSize = remoting.Viewport.choosePluginSize(
 121         size(1280, 1024), 1.0, size(640, 480), dpi(192, 192), 1.0, false, true);
 122     assert.deepEqual(pluginSize, size(1280, (1280 / 640) * 480));
 123
 124     // 6. Client X dimension larger than host's, Y dimension smaller.
 125     pluginSize = remoting.Viewport.choosePluginSize(
 126         size(1152, 600), 1.0, size(1024, 768), dpi(192, 192), 1.0, false, true);
 127     assert.deepEqual(pluginSize, size(1024 * (600 / 768), 600));
 128 });
 129
 130 QUnit.test('choosePluginSize() handles high-DPI client and host',
 131   function(assert) {
 132     // 1. Client & host size the same.
 133     var pluginSize = remoting.Viewport.choosePluginSize(
 134         size(640, 480), 2.0, size(640, 480), dpi(192, 192), 1.0, false, true);
 135     assert.deepEqual(pluginSize, size(640, 480));
 136
 137     // 2. Client logical dimensions smaller than host's.
 138     pluginSize = remoting.Viewport.choosePluginSize(
 139         size(640, 480), 2.0, size(1024, 600), dpi(192, 192), 1.0, false, true);
 140     assert.deepEqual(pluginSize, size(1024 / 2.0, 600 / 2.0));
 141
 142     // 3. Client Y dimension larger than host's, X dimension smaller.
 143     pluginSize = remoting.Viewport.choosePluginSize(
 144         size(640, 640), 2.0, size(1024, 600), dpi(192, 192), 1.0, false, true);
 145     assert.deepEqual(pluginSize, size(1024 / 2.0, 600 / 2.0));
 146
 147     // 4. Client logical dimensions larger than host's by <2x.
 148     // Host dimensions fit into the client's _device_ dimensions 3x, so the
 149     // size in client DIPs should be 1:3/2.
 150     pluginSize = remoting.Viewport.choosePluginSize(
 151         size(1280, 900), 2.0, size(640, 480), dpi(192, 192), 1.0, false, true);
 152     assert.deepEqual(pluginSize, size(640 * 3 / 2.0, 480 * 3 / 2.0));
 153
 154     // 5. Client dimensions larger than host's by >2x.
 155     pluginSize = remoting.Viewport.choosePluginSize(
 156         size(1280, 1024), 2.0, size(640, 480), dpi(192, 192), 1.0, false, true);
 157     assert.deepEqual(pluginSize, size(1280, (1280 / 640) * 480));
 158
 159     // 6. Client X dimension larger than host's, Y dimension smaller.
 160     pluginSize = remoting.Viewport.choosePluginSize(
 161         size(1152, 600), 2.0, size(1024, 768), dpi(192, 192), 1.0, false, true);
 162     assert.deepEqual(pluginSize, size(1024 / 2.0, 768 / 2.0));
 163 });
 164
 165 QUnit.test('choosePluginSize() handles high-DPI client, 150% DPI host',
 166   function(assert) {
 167     // 1. Client & host size the same.
 168     var pluginSize = remoting.Viewport.choosePluginSize(
 169         size(640, 480), 2.0, size(640, 480), dpi(144, 144), 1.0, false, true);
 170     assert.deepEqual(pluginSize, size(640, 480));
 171
 172     // 2. Client dimensions smaller than host's.
 173     pluginSize = remoting.Viewport.choosePluginSize(
 174         size(640, 480), 2.0, size(1024, 600), dpi(144, 144), 1.0, false, true);
 175     assert.deepEqual(pluginSize, size(1024 / 2.0, 600 / 2.0));
 176
 177     // 3. Client Y dimension larger than host's, X dimension smaller.
 178     pluginSize = remoting.Viewport.choosePluginSize(
 179         size(640, 640), 2.0, size(1024, 600), dpi(144, 144), 1.0, false, true);
 180     assert.deepEqual(pluginSize, size(1024 / 2.0, 600 / 2.0));
 181
 182     // 4. Client dimensions larger than host's by <2x.
 183     // Host dimensions fit into the client's _device_ dimensions 3x, so the
 184     // size in client DIPs should be 1:3/2.
 185     pluginSize = remoting.Viewport.choosePluginSize(
 186         size(1280, 900), 2.0, size(640, 480), dpi(144, 144), 1.0, false, true);
 187     assert.deepEqual(pluginSize, size(640 * 3 / 2.0, 480 * 3 / 2.0));
 188
 189     // 5. Client dimensions larger than host's by >2x.
 190     pluginSize = remoting.Viewport.choosePluginSize(
 191         size(1280, 1024), 2.0, size(640, 480), dpi(144, 144), 1.0, false, true);
 192     assert.deepEqual(pluginSize, size(1280, (1280 / 640) * 480));
 193
 194     // 6. Client X dimension larger than host's, Y dimension smaller.
 195     pluginSize = remoting.Viewport.choosePluginSize(
 196         size(1152, 600), 2.0, size(1024, 768), dpi(144, 144), 1.0, false, true);
 197     assert.deepEqual(pluginSize, size(1024 / 2.0, 768 / 2.0));
 198 });
 199
 200 QUnit.test('choosePluginSize() handles high-DPI client, 125% DPI host',
 201   function(assert) {
 202     // 1. Client & host size the same.
 203     var pluginSize = remoting.Viewport.choosePluginSize(
 204         size(640, 480), 2.0, size(640, 480), dpi(120, 120), 1.0, false, true);
 205     assert.deepEqual(pluginSize, size(640, 480));
 206
 207     // 2. Client dimensions smaller than host's.
 208     pluginSize = remoting.Viewport.choosePluginSize(
 209         size(640, 480), 2.0, size(1024, 600), dpi(120, 120), 1.0, false, true);
 210     assert.deepEqual(pluginSize, size(640, 600 * (640 / 1024)));
 211
 212     // 3. Client Y dimension larger than host's, X dimension smaller.
 213     pluginSize = remoting.Viewport.choosePluginSize(
 214         size(640, 640), 2.0, size(1024, 600), dpi(120, 120), 1.0, false, true);
 215     assert.deepEqual(pluginSize, size(640, 600 * (640 / 1024)));
 216
 217     // 4. Client dimensions larger than host's by <2x.
 218     // Host dimensions fit into the client's _device_ dimensions 3x, so the
 219     // size in client DIPs should be 1:3/2.
 220     pluginSize = remoting.Viewport.choosePluginSize(
 221         size(1280, 900), 2.0, size(640, 480), dpi(120, 120), 1.0, false, true);
 222     assert.deepEqual(pluginSize, size(640 * 3 / 2.0, 480 * 3 / 2.0));
 223
 224     // 5. Client dimensions larger than host's by >2x.
 225     pluginSize = remoting.Viewport.choosePluginSize(
 226         size(1280, 1024), 2.0, size(640, 480), dpi(120, 120), 1.0, false, true);
 227     assert.deepEqual(pluginSize, size(1280, (1280 / 640) * 480));
 228
 229     // 6. Client X dimension larger than host's, Y dimension smaller.
 230     pluginSize = remoting.Viewport.choosePluginSize(
 231         size(1152, 600), 2.0, size(1024, 768), dpi(120, 120), 1.0, false, true);
 232     assert.deepEqual(pluginSize, size(1024 * (600 / 768), 600));
 233 });
 234
 235 QUnit.test('choosePluginSize() with shrink-to-fit disabled',
 236   function(assert) {
 237     // 1. Client & host size the same.
 238     var pluginSize = remoting.Viewport.choosePluginSize(
 239         size(640, 480), 1.0, size(640, 480), dpi(96, 96), 1.0, false, false);
 240     assert.deepEqual(pluginSize, size(640, 480));
 241
 242     // 2. Client logical dimensions smaller than host's.
 243     pluginSize = remoting.Viewport.choosePluginSize(
 244         size(640, 480), 1.0, size(1024, 600), dpi(96, 96), 1.0, false, false);
 245     assert.deepEqual(pluginSize, size(1024, 600));
 246
 247     // 3. Client dimensions larger than host's by <2x.
 248     pluginSize = remoting.Viewport.choosePluginSize(
 249         size(1280, 900), 1.0, size(640, 480), dpi(96, 96), 1.0, false, false);
 250     assert.deepEqual(pluginSize, size(640, 480));
 251
 252     // 4. Client dimensions larger than host's by >2x.
 253     pluginSize = remoting.Viewport.choosePluginSize(
 254         size(1280, 1024), 1.0, size(640, 480), dpi(96, 96), 1.0, false, false);
 255     assert.deepEqual(pluginSize, size(1280, (1280 / 640) * 480));
 256
 257     // 5. Client smaller than host, client high-DPI, host low-DPI.
 258     pluginSize = remoting.Viewport.choosePluginSize(
 259         size(640, 480), 2.0, size(1024, 600), dpi(96, 96), 1.0, false, false);
 260     assert.deepEqual(pluginSize, size(1024, 600));
 261
 262     // 6. Client smaller than host, client low-DPI, host high-DPI.
 263     pluginSize = remoting.Viewport.choosePluginSize(
 264         size(640, 480), 1.0, size(1024, 600), dpi(192, 192), 1.0, false, false);
 265     assert.deepEqual(pluginSize, size(1024, 600));
 266
 267     // 7. Client smaller than host, both high-DPI.
 268     pluginSize = remoting.Viewport.choosePluginSize(
 269         size(640, 480), 2.0, size(1024, 600), dpi(192, 192), 1.0, false, false);
 270     assert.deepEqual(pluginSize, size(512, (512 / 1024) * 600));
 271
 272     // 8. Client smaller than host, client high-DPI, host 150% DPI.
 273     pluginSize = remoting.Viewport.choosePluginSize(
 274         size(640, 480), 2.0, size(1024, 600), dpi(144, 144), 1.0, false, false);
 275     assert.deepEqual(pluginSize, size(512, (512 / 1024) * 600));
 276 });
 277
 278 QUnit.test('choosePluginSize() full-screen multi-monitor optimization',
 279   function(assert) {
 280     // Each test has a host sized to approximate two or more monitors.
 281
 282     // 1. Client & host per-monitor dimensions match, two monitors side-by-side.
 283     var pluginSize = remoting.Viewport.choosePluginSize(
 284         size(640, 480), 1.0, size(2 * 640, 480), dpi(96, 96), 1.0, true, true);
 285     assert.deepEqual(pluginSize, size(2 * 640, 480));
 286
 287     // 2. Client & host per-monitor dimensions match, two monitors stacked.
 288     pluginSize = remoting.Viewport.choosePluginSize(
 289         size(640, 480), 1.0, size(640, 2 * 480), dpi(96, 96), 1.0, true, true);
 290     assert.deepEqual(pluginSize, size(640, 2 * 480));
 291
 292     // 3. Client larger, two monitors stacked.
 293     pluginSize = remoting.Viewport.choosePluginSize(
 294         size(1024, 768), 1.0, size(640, 2 * 480), dpi(96, 96), 1.0, true, true);
 295     assert.deepEqual(pluginSize, size(640 * (768 / (2 * 480)), 768));
 296
 297     // 4. Client smaller, two monitors stacked.
 298     pluginSize = remoting.Viewport.choosePluginSize(
 299         size(640, 480), 1.0, size(1024, 2 * 768), dpi(96, 96), 1.0, true, true);
 300     assert.deepEqual(pluginSize, size(640, 2 * 768 * (640 / 1024)));
 301
 302     // 5. Client wide-screen, host two standard monitors stacked.
 303     pluginSize = remoting.Viewport.choosePluginSize(
 304         size(1920, 1080), 1.0, size(1024, 2 * 768), dpi(96, 96), 1.0,
 305         true, true);
 306     assert.deepEqual(pluginSize, size(1024 * (1080 / (2 * 768)), 1080));
 307
 308     // 6. Client & host per-monitor dimensions match, two monitors stacked,
 309     //    high-DPI client.
 310     pluginSize = remoting.Viewport.choosePluginSize(
 311         size(640, 480), 2.0, size(640, 2 * 480), dpi(96, 96), 1.0, true, true);
 312     assert.deepEqual(pluginSize, size(640, 2 * 480));
 313
 314     // 7. Client & host per-monitor dimensions match, two monitors stacked,
 315     //    high-DPI host.
 316     pluginSize = remoting.Viewport.choosePluginSize(
 317         size(640, 480), 1.0, size(640, 2 * 480), dpi(192, 192),
 318         1.0, true, true);
 319     assert.deepEqual(pluginSize, size(640, 2 * 480));
 320
 321     // 8. Client & host per-monitor dimensions match, two monitors stacked,
 322     //    high-DPI client & host.
 323     pluginSize = remoting.Viewport.choosePluginSize(
 324         size(640, 480), 2.0, size(640, 2 * 480), dpi(192, 192),
 325         1.0, true, true);
 326     assert.deepEqual(pluginSize, size(640 / 2.0, (2 * 480) / 2.0));
 327 });
 328
 329 QUnit.test('choosePluginSize() handling of desktopScale',
 330   function(assert) {
 331     // 1. Verify that a high-DPI client correctly up-scales the host to account
 332     //    for desktopScale.
 333     var pluginSize = remoting.Viewport.choosePluginSize(
 334         size(640, 480), 2.0, size(1.5 * 640, 1.5 * 480), dpi(96, 96), 1.5,
 335         true, true);
 336     assert.deepEqual(pluginSize, size(640, 480));
 337
 338     // 2. Verify that a high-DPI client correctly up-scales the host to fit
 339     //    if desktopScale would make it larger, but shrink-to-fit is set.
 340     pluginSize = remoting.Viewport.choosePluginSize(
 341         size(640, 480), 2.0, size(1280, 900), dpi(96, 96), 1.5,
 342         true, true);
 343     assert.deepEqual(pluginSize, size(640, 900 * (640 / 1280)));
 344
 345     // 3. Verify that a high-DPI client correctly up-scales the host based on
 346     //    desktopScale and shrink-to-fit is not set.
 347     pluginSize = remoting.Viewport.choosePluginSize(
 348         size(640, 480), 2.0, size(1280, 900), dpi(96, 96), 1.5,
 349         true, false);
 350     assert.deepEqual(pluginSize, size(1.5 * 1280, 1.5 * 900));
 351 });
 352
 353 QUnit.test('choosePluginSize() handling of 1.25x pixel ratio client',
 354   function(assert) {
 355     // 1. Verify that if the client has a devicePixelRatio of 1.25x then the
 356     //    host is still sized 1:1 host:logical pixels, rather than 1:1
 357     //    host:device pixels. The latter would appear as a 1.25x down-scale on
 358     //    such a client).
 359     var pluginSize = remoting.Viewport.choosePluginSize(
 360         size(640, 480), 1.25, size(480, 320), dpi(96, 96), 1.0,
 361         true, true);
 362     assert.deepEqual(pluginSize, size(480, 320));
 363 });
 364
 365 })();