jackyef/index.html

## index.html
<!DOCTYPE html>
<html lang="id">
<body>
  <h1 id="LCP">Heading 1</h1>
  <script>
      const lcpElement = document.getElementById("LCP");

      const rect = lcpElement.getBoundingClientRect();
      console.log('initial', JSON.stringify({ rect }, null, 2));
      console.log(`Initial size ${rect.width}px + ${rect.height}px`);
      console.log(`Initial padding ${rect.top}px + ${rect.left}px`);


    </script>
    <script>
      const lcpElement2 = document.getElementById("LCP");
      var ro = new ResizeObserver(entries => {
        console.log('resize happened, wtf');
        for (let entry of entries) {
          const cr = entry.contentRect;
          console.log('resized', JSON.stringify({ cr }, null, 2));
          console.log(`Element size: ${cr.width}px x ${cr.height}px`);
          console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
          console.log({ entry })
        }
      });

      // Observe one or multiple elements

      ro.observe(lcpElement2);
    </script>

<script id="jsbin-source-html" type="text/html">
<!DOCTYPE html>
<html lang="id">
<body>
  <h1 id="LCP">Heading 1</h1>
  <script>
      const lcpElement = document.getElementById("LCP");

      const rect = lcpElement.getBoundingClientRect();
      console.log('initial', JSON.stringify({ rect }, null, 2));
      console.log(`Initial size ${rect.width}px + ${rect.height}px`);
      console.log(`Initial padding ${rect.top}px + ${rect.left}px`);


    <\/script>
    <script>
      const lcpElement2 = document.getElementById("LCP");
      var ro = new ResizeObserver(entries => {
        console.log('resize happened, wtf');
        for (let entry of entries) {
          const cr = entry.contentRect;
          console.log('resized', JSON.stringify({ cr }, null, 2));
          console.log(`Element size: ${cr.width}px x ${cr.height}px`);
          console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
          console.log({ entry })
        }
      });

      // Observe one or multiple elements

      ro.observe(lcpElement2);
    <\/script>
  </body>
  </html>
</script>

</body>
  </html>
	<!DOCTYPE html>
	<html lang="id">
	<body>
	<h1 id="LCP">Heading 1</h1>
	<script>
	const lcpElement = document.getElementById("LCP");

	const rect = lcpElement.getBoundingClientRect();
	console.log('initial', JSON.stringify({ rect }, null, 2));
	console.log(`Initial size ${rect.width}px + ${rect.height}px`);
	console.log(`Initial padding ${rect.top}px + ${rect.left}px`);


	</script>
	<script>
	const lcpElement2 = document.getElementById("LCP");
	var ro = new ResizeObserver(entries => {
	console.log('resize happened, wtf');
	for (let entry of entries) {
	const cr = entry.contentRect;
	console.log('resized', JSON.stringify({ cr }, null, 2));
	console.log(`Element size: ${cr.width}px x ${cr.height}px`);
	console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
	console.log({ entry })
	}
	});

	// Observe one or multiple elements

	ro.observe(lcpElement2);
	</script>

	<script id="jsbin-source-html" type="text/html">
	<!DOCTYPE html>
	<html lang="id">
	<body>
	<h1 id="LCP">Heading 1</h1>
	<script>
	const lcpElement = document.getElementById("LCP");

	const rect = lcpElement.getBoundingClientRect();
	console.log('initial', JSON.stringify({ rect }, null, 2));
	console.log(`Initial size ${rect.width}px + ${rect.height}px`);
	console.log(`Initial padding ${rect.top}px + ${rect.left}px`);


	<\/script>
	<script>
	const lcpElement2 = document.getElementById("LCP");
	var ro = new ResizeObserver(entries => {
	console.log('resize happened, wtf');
	for (let entry of entries) {
	const cr = entry.contentRect;
	console.log('resized', JSON.stringify({ cr }, null, 2));
	console.log(`Element size: ${cr.width}px x ${cr.height}px`);
	console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
	console.log({ entry })
	}
	});

	// Observe one or multiple elements

	ro.observe(lcpElement2);
	<\/script>
	</body>
	</html>
	</script>

	</body>
	</html>