third_party/WebKit/LayoutTests/inspector-protocol/emulation/device-emulation-visual-viewport-size.html - Issue 2096633002: Adds scroll position/scale emulation to DevTools.

Side by Side Diff: third_party/WebKit/LayoutTests/inspector-protocol/emulation/device-emulation-visual-viewport-size.html

Issue 2096633002: Adds scroll position/scale emulation to DevTools. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Sync, patch in 2169483002 (+ regression test), add DevTools tests. Created 4 years, 5 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« content/browser/devtools/protocol/emulation_handler.cc ('K') | « content/renderer/render_view_browsertest.cc ('k') | third_party/WebKit/LayoutTests/inspector-protocol/emulation/device-emulation-visual-viewport-size-expected.txt » ('j') | third_party/WebKit/Source/core/frame/FrameView.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <html>

	2 <head>

	3

	4 <script src="../../http/tests/inspector-protocol/inspector-protocol-test.js"></s cript>

	5

	6 <style>

	7 body {

	8 margin: 0;

	9 overflow: hidden;

	10 min-height: 1000px;

	11 }

	12

	13 div#layoutViewportDiv {

	14 position: fixed;

	15 z-index: 100;

	16 width: 100%;

	17 height: 100%;

	18 }

	19 </style>

	20

	21 <script>

	22 function dumpMetrics()

	23 {

	24 return JSON.stringify({

	25 visualWidth: window.innerWidth,

	26 visualHeight: window.innerHeight,

	27 layoutWidth: document.getElementById("layoutViewportDiv").clientWidth,
	dgozman 2016/07/21 20:54:08 I don't like that override we use is observable by I don't like that override we use is observable by the page. This defeats the purpose: let's say we focus on the specific region to take a screenshot of it, and then position:fixed element covers half of it because we made it observable to the web. Since the whole purpose of the visible viewport override is performance, can we do something else (like disabling compositing entirely)? Eric Seckler 2016/07/22 14:44:48 I noted some of this in the design doc. I think we Show quoted text On 2016/07/21 20:54:08, dgozman wrote: > I don't like that override we use is observable by the page. This defeats the > purpose: let's say we focus on the specific region to take a screenshot of it, > and then position:fixed element covers half of it because we made it observable > to the web. > Since the whole purpose of the visible viewport override is performance, can we > do something else (like disabling compositing entirely)? I noted some of this in the design doc. I think we actually want layout viewport overrides (both size and scroll) to cause a reflow/layout of the page, so they should always be observed by the page. I.e., the layout overrides should resize the page, that's what we intend to use them for :) For visual viewport overrides, we want to support both (i) page-observable changes (e.g. to take a screenshot of "what does my page look like on a mobile browser that zoomes in here"), but also (ii) the option to hide the visual viewport overrides from the page (e.g. to take a screenshot of an ad - here we don't want visual-viewport-fixed elements to pop up). I think it would be fine if we initially only support (i) and add (ii) later, particularly since pos-fixed elements are layout-viewport relative and most of the visual viewport isn't yet exposed to pages (VisualViewport API is still experimental). We can later support (ii) by adding an option to hide the overrides of the visual viewport from the page in some way. Regarding disabling compositing, we're looking into suspending certain parts of the pipeline (e.g. raster/paint) for headless at the moment. In that process, we should also look into how often/when we want compositing to occur as well. For us, it may actually rather be "compose only after overrides are set", or "compose when we explicitly tell you to". I think it makes sense to look into this separately, too.
	28 layoutHeight: document.getElementById("layoutViewportDiv").clientHeight

	29 }, null, 4);

	30 }

	31

	32 function test()

	33 {

	34 function printMetrics(callback)

	35 {

	36 InspectorTest.evaluateInPage("dumpMetrics()", print);

	37

	38 function print(metrics)

	39 {

	40 InspectorTest.log(metrics);

	41 callback();

	42 }

	43 }

	44

	45 function testOverrides(width, height, visualWidth, visualHeight, next)

	46 {

	47 var params = {

	48 width: width,

	49 height: height,

	50 visualViewportWidth: visualWidth,

	51 visualViewportHeight: visualHeight,

	52 deviceScaleFactor: 0,

	53 mobile: false,

	54 fitWindow: false

	55 };

	56 InspectorTest.log("Overrides: " + JSON.stringify(params));

	57

	58 InspectorTest.sendCommandOrDie("Emulation.setDeviceMetricsOverride", par ams, printMetrics.bind(null, overridesActive));

	59

	60 function overridesActive()

	61 {

	62 InspectorTest.log("Clearing overrides.");

	63 InspectorTest.sendCommandOrDie("Emulation.clearDeviceMetricsOverride ", {}, printMetrics.bind(null, next));

	64 }

	65 }

	66

	67 InspectorTest.runTestSuite([

	68 function noOverrides(next)

	69 {

	70 testOverrides(0, 0, 0, 0, next);

	71 },

	72

	73 function width(next)

	74 {

	75 testOverrides(200, 0, 0, 0, next);

	76 },

	77

	78 function height(next)

	79 {

	80 testOverrides(0, 200, 0, 0, next);

	81 },

	82

	83 function visualWidth(next)

	84 {

	85 testOverrides(0, 0, 100, 0, next);

	86 },

	87

	88 function visualHeight(next)

	89 {

	90 testOverrides(0, 0, 0, 100, next);

	91 },

	92

	93 function visualWidthAndHeight(next)

	94 {

	95 testOverrides(0, 0, 100, 150, next);

	96 },

	97

	98 function visualAndFrame(next)

	99 {

	100 testOverrides(200, 250, 100, 150, next);

	101 },

	102

	103 function visualLargerThanFrame(next)

	104 {

	105 testOverrides(100, 150, 200, 250, next);

	106 }

	107 ]);

	108 }

	109 </script>

	110

	111 </head>

	112 <body onload="runTest()">

	113 <div id="layoutViewportDiv"></div>

	114 <p>

	115 Tests overrides for visual viewport size in combination with frame size override s.

	116 </p>

	117 </body>

	118 </html>

OLD	NEW