third_party/WebKit/LayoutTests/virtual/threaded/fast/compositorworker/basic-plumbing-main-to-worker.html - Issue 2041193005: [compositorworker] compositor proxy mutation updates underlying layers

Side by Side Diff: third_party/WebKit/LayoutTests/virtual/threaded/fast/compositorworker/basic-plumbing-main-to-worker.html

Issue 2041193005: [compositorworker] compositor proxy mutation updates underlying layers (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@compositor-worker-upstream-registration

Patch Set: Fix inlcudes Created 4 years, 6 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

« no previous file with comments | « cc/trees/layer_tree_host_impl.cc ('k') | third_party/WebKit/LayoutTests/virtual/threaded/fast/compositorworker/basic-plumbing-worker-to-main.html » ('j') | third_party/WebKit/Source/core/dom/CompositorProxy.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2

	3 <style>

	4 #box {

	5 width: 100px;

	6 height: 100px;

	7 overflow: scroll;

	8 }

	9

	10 #scrolled {

	11 background: white;

	12 width: 300px;

	13 height: 300px;

	14 }

	15 </style>

	16

	17 <div id="box">

	18 <div id="scrolled"></div>

	19 </div>

	20

	21 <script src="../../../../resources/testharness.js"></script>

	22 <script src="../../../../resources/testharnessreport.js"></script>

	23 <script>

	24 if (window.internals)

	25 internals.settings.setCompositorWorkerEnabled(true);

	26

	27 var test = async_test('Tests that a change from the main thread is received on t he compositor thread');
	jbroman 2016/06/13 19:45:17 This test is a little weird to read, because of th This test is a little weird to read, because of the asynchronous control flow. Have you considered writing a promise test instead? Something like: function postMessageAndAwaitReply(worker, message) { worker.postMessage(message); return new Promise((resolve, reject) => { worker.addEventListener(function listener(e) { resolve(e.data); worker.removeEventListener(listener); }); }); } function requestAnimationFramePromise() { return new Promise((resolve, reject) => requestAnimationFrame(ts => resolve(ts))); } promise_test(function() { var worker = new CompositorWorker(...); var proxy = new CompositorProxy(document.getElementById('box')); var keys = ['opacity', 'transform', 'scrollTop', 'scrollLeft']; return postMessageAndAwaitReply(worker, {proxy, keys}).then(data => { assert_equals(data.opacity, 1); // ... element.scrollLeft = 10; // ... return requestAnimationFramePromise().then(ts => postMessageAndAwaitReply(worker, {}); }).then(data => { assert_equals(data.opacity, 0.5); // .. }); }, 'Tests that...'); I personally prefer this (removes the need to remember to put step_func in the right places due to promise rejection propagation, and the order of events reads from top to bottom). But I won't insist on this. majidvp 2016/06/13 21:52:51 Acknowledged. Show quoted text On 2016/06/13 19:45:17, jbroman wrote: > This test is a little weird to read, because of the asynchronous control flow. > Have you considered writing a promise test instead? Something like: > > function postMessageAndAwaitReply(worker, message) { > worker.postMessage(message); > return new Promise((resolve, reject) => { > worker.addEventListener(function listener(e) { > resolve(e.data); > worker.removeEventListener(listener); > }); > }); > } > > function requestAnimationFramePromise() { > return new Promise((resolve, reject) => requestAnimationFrame(ts => > resolve(ts))); > } > > promise_test(function() { > var worker = new CompositorWorker(...); > var proxy = new CompositorProxy(document.getElementById('box')); > var keys = ['opacity', 'transform', 'scrollTop', 'scrollLeft']; > return postMessageAndAwaitReply(worker, {proxy, keys}).then(data => { > assert_equals(data.opacity, 1); > // ... > element.scrollLeft = 10; > // ... > return requestAnimationFramePromise().then(ts => > postMessageAndAwaitReply(worker, {}); > }).then(data => { > assert_equals(data.opacity, 0.5); > // .. > }); > }, 'Tests that...'); > > I personally prefer this (removes the need to remember to put step_func in the > right places due to promise rejection propagation, and the order of events reads > from top to bottom). But I won't insist on this. Acknowledged.
	28 var worker;

	29

	30 test.step(function(){

	31 worker = new CompositorWorker('resources/basic-plumbing-main-to-worker.js');

	32 worker.onmessage = test.step_func(function(e){

	33 assert_equals(e.data.opacity, 1);

	34 assert_equals(e.data.scrollLeft, 0);

	35 assert_equals(e.data.scrollTop, 0);

	36 assert_equals(JSON.stringify(e.data.transform), '{"0":1,"1":0,"2":0,"3":0,"4 ":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":0,"13":0,"14":0,"15":1}');

	37

	38 updateElementAndVerify();

	39 });

	40

	41 var keys = ['opacity', 'transform', 'scrollTop', 'scrollLeft'];

	42 worker.postMessage({'proxy': new CompositorProxy(document.getElementById('box' ), keys)});

	43 });

	44

	45 function updateElementAndVerify(e) {

	46 var element = document.getElementById('box');
	jbroman 2016/06/13 19:45:17 nit: inconsistent indentation (I think Blink still nit: inconsistent indentation (I think Blink still prefers 4 in JS, but regardless this should be consistent) majidvp 2016/06/13 21:52:51 Done. Show quoted text On 2016/06/13 19:45:17, jbroman wrote: > nit: inconsistent indentation (I think Blink still prefers 4 in JS, but > regardless this should be consistent) Done.
	47 element.scrollLeft = 10;

	48 element.scrollTop = 20;

	49 element.style.transform = 'translate3d(30px, 0, 0)';

	50 element.style.opacity = 0.5;

	51

	52 worker.onmessage = test.step_func(function(e){

	53 assert_equals(e.data.opacity, 0.5);

	54 assert_equals(e.data.scrollLeft, 10);

	55 assert_equals(e.data.scrollTop, 20);

	56 assert_equals(JSON.stringify(e.data.transform), '{"0":1,"1":0,"2":0,"3":0, "4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":30,"13":0,"14":0,"15":1}' );

	57

	58 test.done();

	59 });

	60

	61 // Delay posting to the compositor until we have had another frame (i.e. com mit).

	62 setTimeout(function(){
	jbroman 2016/06/13 19:45:17 Are you sure you want setTimeout and not requestAn Are you sure you want setTimeout and not requestAnimationFrame or testRunner.layoutAndPaintAsyncThen? majidvp 2016/06/13 21:52:51 Actually, setTimeout is not needed here. Removed. Show quoted text On 2016/06/13 19:45:17, jbroman wrote: > Are you sure you want setTimeout and not requestAnimationFrame or > testRunner.layoutAndPaintAsyncThen? Actually, setTimeout is not needed here. Removed.
	63 requestAnimationFrame(function() {

	64 worker.postMessage({});

	65 })

	66 }, 0);

	67 }

	68 </script>

OLD	NEW