browser_viewport_changed_meta.js (5287B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test that resolution is as expected when the viewport tag is changed. 7 // The page content is a 400 x 400 div in a 200 x 200 viewport. Initially, 8 // the viewport width is set to 800 at initial-scale 1, but then the tag 9 // content is changed. This triggers various rescale operations that will 10 // change the resolution of the page after reflow. 11 12 // Chrome handles many of these cases differently. The Chrome results are 13 // included as TODOs, but labelled as "res_chrome" to indicate that the 14 // goal is not necessarily to match an agreed-upon standard, but to 15 // achieve web compatability through changing either Firefox or Chrome 16 // behavior. 17 18 info("--- Starting viewport test output ---"); 19 20 const WIDTH = 200; 21 const HEIGHT = 200; 22 const INITIAL_CONTENT = "width=800, initial-scale=1"; 23 const INITIAL_RES_TARGET = 1.0; 24 const TESTS = [ 25 // This checks that when the replaced content matches the original content, 26 // we get the same values as the original values. 27 { content: INITIAL_CONTENT, res_target: INITIAL_RES_TARGET }, 28 29 // Section 1: Check the case of a viewport shrinking with the display width 30 // staying the same. In this case, the shrink will fit the max of the 400px 31 // content width and the viewport width into the 200px display area. 32 { content: "width=200", res_target: 0.5 }, // fitting 400px content 33 { content: "width=400", res_target: 0.5 }, // fitting 400px content/viewport 34 { content: "width=500", res_target: 0.4 }, // fitting 500px viewport 35 36 // Section 2: Same as Section 1, but adds user-scalable=no. The expected 37 // results are similar to Section 1, but we ignore the content size and only 38 // adjust resolution to make the viewport fit into the display area. 39 { content: "width=200, user-scalable=no", res_target: 1.0 }, 40 { content: "width=400, user-scalable=no", res_target: 0.5 }, 41 { content: "width=500, user-scalable=no", res_target: 0.4 }, 42 43 // Section 3: Same as Section 1, but adds initial-scale=1. Initial-scale 44 // prevents content shrink in Firefox, so the viewport is scaled based on its 45 // changing size relative to the display area. In this case, the resolution 46 // is increased to maintain the proportional amount of the previously visible 47 // content. With the initial conditions, the display area was showing 1/4 of 48 // the content at 0.25x resolution. As the viewport width is shrunk, the 49 // resolution will increase to ensure that only 1/4 of the content is visible. 50 // Essentially, the new viewport width times the resolution will equal 800px, 51 // the original viewport width times resolution. 52 // 53 // Chrome treats the initial-scale=1 as inviolable and sets resolution to 1.0. 54 { content: "width=200, initial-scale=1", res_target: 4.0, res_chrome: 1.0 }, 55 { content: "width=400, initial-scale=1", res_target: 2.0, res_chrome: 1.0 }, 56 { content: "width=500, initial-scale=1", res_target: 1.6, res_chrome: 1.0 }, 57 58 // Section 4: Same as Section 3, but adds user-scalable=no. The combination 59 // of this and initial-scale=1 prevents the scaling-up of the resolution to 60 // keep the proportional amount of the previously visible content. 61 { content: "width=200, initial-scale=1, user-scalable=no", res_target: 1.0 }, 62 { content: "width=400, initial-scale=1, user-scalable=no", res_target: 1.0 }, 63 { content: "width=500, initial-scale=1, user-scalable=no", res_target: 1.0 }, 64 ]; 65 66 const TEST_URL = `data:text/html;charset=utf-8, 67 <html> 68 <head><meta name="viewport" content="${INITIAL_CONTENT}"></head> 69 <body style="margin:0"> 70 <div id="box" style="width:400px;height:400px;background-color:green">Initial</div> 71 </body> 72 </html>`; 73 74 addRDMTask(TEST_URL, async function ({ ui, manager }) { 75 await setViewportSize(ui, manager, WIDTH, HEIGHT); 76 await setTouchAndMetaViewportSupport(ui, true); 77 78 // Check initial resolution value. 79 const initial_resolution = await spawnViewportTask(ui, {}, () => { 80 return content.windowUtils.getResolution(); 81 }); 82 83 is( 84 initial_resolution.toFixed(2), 85 INITIAL_RES_TARGET.toFixed(2), 86 `Initial resolution is as expected.` 87 ); 88 89 for (const test of TESTS) { 90 const { content: content, res_target, res_chrome } = test; 91 92 await spawnViewportTask(ui, { content }, args => { 93 const box = content.document.getElementById("box"); 94 box.textContent = args.content; 95 96 const meta = content.document.getElementsByTagName("meta")[0]; 97 info(`Changing meta viewport content to "${args.content}".`); 98 meta.content = args.content; 99 }); 100 101 await promiseContentReflow(ui); 102 103 const resolution = await spawnViewportTask(ui, {}, () => { 104 return content.windowUtils.getResolution(); 105 }); 106 107 is( 108 resolution.toFixed(2), 109 res_target.toFixed(2), 110 `Replaced meta viewport content "${content}" resolution is as expected.` 111 ); 112 113 if (typeof res_chrome !== "undefined") { 114 todo_is( 115 resolution.toFixed(2), 116 res_chrome.toFixed(2), 117 `Replaced meta viewport content "${content}" resolution matches Chrome resolution.` 118 ); 119 } 120 121 info("Reload and wait for document to be loaded to prepare for next test."); 122 await reloadBrowser(); 123 } 124 });