toJSON.html (1466B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Layout Instability: toJSON</title> 4 <body> 5 <style> 6 #myDiv { position: relative; width: 300px; height: 100px; background: blue; } 7 </style> 8 <div id='myDiv'></div> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="resources/util.js"></script> 12 <script> 13 promise_test(async t => { 14 assert_implements(window.LayoutShift, 'Layout Instability is not supported.'); 15 // Wait for the initial render to complete. 16 await waitForAnimationFrames(2); 17 18 return new Promise(resolve => { 19 const observer = new PerformanceObserver( 20 t.step_func(entryList => { 21 const entry = entryList.getEntries()[0]; 22 assert_equals(typeof(entry.toJSON), 'function'); 23 const json = entry.toJSON(); 24 assert_equals(typeof(json), 'object'); 25 const keys = [ 26 // PerformanceEntry 27 'name', 28 'entryType', 29 'startTime', 30 'duration', 31 // LayoutShift 32 'value', 33 'hadRecentInput', 34 'lastInputTime', 35 ]; 36 for (const key of keys) { 37 assert_equals(json[key], entry[key], 38 `LayoutShift ${key} entry does not match its toJSON value`); 39 } 40 resolve(); 41 }) 42 ); 43 observer.observe({type: 'layout-shift'}); 44 document.getElementById('myDiv').style = "top: 60px"; 45 }); 46 }, 'Test toJSON() in LayoutShift.'); 47 </script> 48 </body>