fledge-container-size.https.html (4624B)
1 <!DOCTYPE html> 2 <title>Test container size in FLEDGE fenced frames.</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/common/utils.js"></script> 6 <script src="/common/dispatcher/dispatcher.js"></script> 7 <script src="resources/utils.js"></script> 8 9 <body> 10 <script> 11 async function checkSyntaxError(requested_width, requested_height) { 12 try { 13 const frame = await attachFencedFrameContext({ 14 generator_api: "fledge", resolve_to_config: true, ad_with_size: true, 15 requested_size: [requested_width, requested_height]}); 16 } catch(e) { 17 assert_equals(e.name, 'TypeError'); 18 return; 19 } 20 assert_unreached('Missing expected type error'); 21 } 22 23 async function checkSuccess() { 24 const assert_outer_dimensions = 25 (frame, label, expected_width, expected_height) => { 26 assert_equals(frame.element.width, expected_width, 27 label + ' outer attribute width'); 28 assert_equals(frame.element.height, expected_height, 29 label + ' outer attribute height'); 30 assert_equals(getComputedStyle(frame.element).width, expected_width, 31 label + ' outer computed width'); 32 assert_equals(getComputedStyle(frame.element).height, expected_height, 33 label + ' outer computed height'); 34 } 35 36 const assert_inner_dimensions = 37 (label, expected_width, expected_height) => { 38 assert_equals(getComputedStyle(document.documentElement).width, expected_width+'px', 39 label + ' inner computed width'); 40 assert_equals(window.innerWidth, expected_width, 41 label + ' inner width'); 42 assert_equals(window.innerHeight, expected_height, 43 label + ' inner height'); 44 } 45 46 // `ad_with_size` is hardcoded to use '100px' by '50px'. 47 const content_width = 100; 48 const content_height = 50; 49 50 // Create a FLEDGE FF with a constant content size and given container size. 51 const requested_width_1 = '299px'; 52 const requested_height_1 = '72px'; 53 const frame = await attachFencedFrameContext({ 54 generator_api: 'fledge', resolve_to_config: true, ad_with_size: true, 55 requested_size: [requested_width_1, requested_height_1]}); 56 57 // The outer size should reflect the container size, and the inner size should reflect the content size. 58 await frame.execute(assert_inner_dimensions, ['First config', content_width, content_height]); 59 assert_outer_dimensions(frame, 'First config', requested_width_1, requested_height_1); 60 61 // Modify the container size manually. 62 const modified_width = '121px'; 63 const modified_height = '444px'; 64 frame.element.width = modified_width; 65 frame.element.height = modified_height; 66 67 // The outer size should reflect the new size, and the inner size should be unchanged. 68 await frame.execute(assert_inner_dimensions, ['Modified container size', content_width, content_height]); 69 assert_outer_dimensions(frame, 'Modified container size', modified_width, modified_height); 70 71 // Navigate to a new FLEDGE FF config with a different container size. 72 const requested_width_2 = '321px'; 73 const requested_height_2 = '49px'; 74 const replaced_frame = await replaceFrameContext(frame, { 75 generator_api: 'fledge', resolve_to_config: true, ad_with_size: true, 76 requested_size: [requested_width_2, requested_height_2]}); 77 78 // The outer size should reflect the new size, and the inner size should be unchanged. 79 await replaced_frame.execute(assert_inner_dimensions, ['Second config', content_width, content_height]); 80 assert_outer_dimensions(replaced_frame, 'Second config', requested_width_2, requested_height_2); 81 82 // Navigate to a new FLEDGE FF config with no container size. 83 const replaced_frame_2 = await replaceFrameContext(frame, { 84 generator_api: 'fledge', resolve_to_config: true, ad_with_size: true}); 85 86 // The dimensions should be unchanged. 87 await replaced_frame_2.execute(assert_inner_dimensions, ['Third config', content_width, content_height]); 88 assert_outer_dimensions(replaced_frame_2, 'Third config', requested_width_2, requested_height_2); 89 } 90 91 // Type error cases. 92 promise_test(async () => { return checkSyntaxError('-299px', '72px'); }, '-299px x 72px'); 93 promise_test(async () => { return checkSyntaxError('299px', '-72px'); }, '299px x -72px'); 94 promise_test(async () => { return checkSyntaxError('0px', '0px'); }, '0px x 0px'); 95 promise_test(async () => { return checkSyntaxError('299px', '72ab'); }, '299px x 72ab'); 96 promise_test(async () => { return checkSyntaxError('299bc', '72px'); }, '299bc x 72px'); 97 98 // Success cases. 99 promise_test(async () => { return checkSuccess(); }, 'FLEDGE successful container size'); 100 101 </script> 102 </body>