diff options
Diffstat (limited to 'devtools/client/responsive/test/browser/browser_viewport_changed_meta.js')
-rw-r--r-- | devtools/client/responsive/test/browser/browser_viewport_changed_meta.js | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/devtools/client/responsive/test/browser/browser_viewport_changed_meta.js b/devtools/client/responsive/test/browser/browser_viewport_changed_meta.js new file mode 100644 index 0000000000..f0bafdd551 --- /dev/null +++ b/devtools/client/responsive/test/browser/browser_viewport_changed_meta.js @@ -0,0 +1,124 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that resolution is as expected when the viewport tag is changed. +// The page content is a 400 x 400 div in a 200 x 200 viewport. Initially, +// the viewport width is set to 800 at initial-scale 1, but then the tag +// content is changed. This triggers various rescale operations that will +// change the resolution of the page after reflow. + +// Chrome handles many of these cases differently. The Chrome results are +// included as TODOs, but labelled as "res_chrome" to indicate that the +// goal is not necessarily to match an agreed-upon standard, but to +// achieve web compatability through changing either Firefox or Chrome +// behavior. + +info("--- Starting viewport test output ---"); + +const WIDTH = 200; +const HEIGHT = 200; +const INITIAL_CONTENT = "width=800, initial-scale=1"; +const INITIAL_RES_TARGET = 1.0; +const TESTS = [ + // This checks that when the replaced content matches the original content, + // we get the same values as the original values. + { content: INITIAL_CONTENT, res_target: INITIAL_RES_TARGET }, + + // Section 1: Check the case of a viewport shrinking with the display width + // staying the same. In this case, the shrink will fit the max of the 400px + // content width and the viewport width into the 200px display area. + { content: "width=200", res_target: 0.5 }, // fitting 400px content + { content: "width=400", res_target: 0.5 }, // fitting 400px content/viewport + { content: "width=500", res_target: 0.4 }, // fitting 500px viewport + + // Section 2: Same as Section 1, but adds user-scalable=no. The expected + // results are similar to Section 1, but we ignore the content size and only + // adjust resolution to make the viewport fit into the display area. + { content: "width=200, user-scalable=no", res_target: 1.0 }, + { content: "width=400, user-scalable=no", res_target: 0.5 }, + { content: "width=500, user-scalable=no", res_target: 0.4 }, + + // Section 3: Same as Section 1, but adds initial-scale=1. Initial-scale + // prevents content shrink in Firefox, so the viewport is scaled based on its + // changing size relative to the display area. In this case, the resolution + // is increased to maintain the proportional amount of the previously visible + // content. With the initial conditions, the display area was showing 1/4 of + // the content at 0.25x resolution. As the viewport width is shrunk, the + // resolution will increase to ensure that only 1/4 of the content is visible. + // Essentially, the new viewport width times the resolution will equal 800px, + // the original viewport width times resolution. + // + // Chrome treats the initial-scale=1 as inviolable and sets resolution to 1.0. + { content: "width=200, initial-scale=1", res_target: 4.0, res_chrome: 1.0 }, + { content: "width=400, initial-scale=1", res_target: 2.0, res_chrome: 1.0 }, + { content: "width=500, initial-scale=1", res_target: 1.6, res_chrome: 1.0 }, + + // Section 4: Same as Section 3, but adds user-scalable=no. The combination + // of this and initial-scale=1 prevents the scaling-up of the resolution to + // keep the proportional amount of the previously visible content. + { content: "width=200, initial-scale=1, user-scalable=no", res_target: 1.0 }, + { content: "width=400, initial-scale=1, user-scalable=no", res_target: 1.0 }, + { content: "width=500, initial-scale=1, user-scalable=no", res_target: 1.0 }, +]; + +const TEST_URL = `data:text/html;charset=utf-8, + <html> + <head><meta name="viewport" content="${INITIAL_CONTENT}"></head> + <body style="margin:0"> + <div id="box" style="width:400px;height:400px;background-color:green">Initial</div> + </body> + </html>`; + +addRDMTask(TEST_URL, async function ({ ui, manager, browser }) { + await setViewportSize(ui, manager, WIDTH, HEIGHT); + await setTouchAndMetaViewportSupport(ui, true); + + // Check initial resolution value. + const initial_resolution = await spawnViewportTask(ui, {}, () => { + return content.windowUtils.getResolution(); + }); + + is( + initial_resolution.toFixed(2), + INITIAL_RES_TARGET.toFixed(2), + `Initial resolution is as expected.` + ); + + for (const test of TESTS) { + const { content: content, res_target, res_chrome } = test; + + await spawnViewportTask(ui, { content }, args => { + const box = content.document.getElementById("box"); + box.textContent = args.content; + + const meta = content.document.getElementsByTagName("meta")[0]; + info(`Changing meta viewport content to "${args.content}".`); + meta.content = args.content; + }); + + await promiseContentReflow(ui); + + const resolution = await spawnViewportTask(ui, {}, () => { + return content.windowUtils.getResolution(); + }); + + is( + resolution.toFixed(2), + res_target.toFixed(2), + `Replaced meta viewport content "${content}" resolution is as expected.` + ); + + if (typeof res_chrome !== "undefined") { + todo_is( + resolution.toFixed(2), + res_chrome.toFixed(2), + `Replaced meta viewport content "${content}" resolution matches Chrome resolution.` + ); + } + + info("Reload and wait for document to be loaded to prepare for next test."); + await reloadBrowser(); + } +}); |