Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

web: Fix 100% height when that equals 0 #13030

Closed

Conversation

danielhjacobs
Copy link
Contributor

@danielhjacobs danielhjacobs commented Aug 31, 2023

200px is what it is on Pale Moon. Other browsers may vary.

Main Test (200px height) :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ruffle</title>
</head>
<body>
  <embed width="100%" height="100%" src="https://cdn.jsdelivr.net/gh/ruffle-rs/demo/logo-anim.swf"></embed>
</body>
</html>

Other tests:

50px height:

<embed width="100%" height="50px" src="https://cdn.jsdelivr.net/gh/ruffle-rs/demo/logo-anim.swf"></embed>

0px height:

<embed width="100%" height="0px" src="https://cdn.jsdelivr.net/gh/ruffle-rs/demo/logo-anim.swf"></embed>

0px height:

<body style="height: 0px">
  <embed width="100%" height="100%" src="https://cdn.jsdelivr.net/gh/ruffle-rs/demo/logo-anim.swf"></embed>
</body>

50px height:

<body style="height: 50px">
  <embed width="100%" height="100%" src="https://cdn.jsdelivr.net/gh/ruffle-rs/demo/logo-anim.swf"></embed>
</body>

200px height:

<body style="height: 0px">
  <div>
    <embed width="100%" height="100%" src="https://cdn.jsdelivr.net/gh/ruffle-rs/demo/logo-anim.swf"></embed>
  </div>
</body>

Test on Flash browser

Screencast.from.2023-09-08.15-54-25.webm

Test using this PR:

Screencast.from.2023-09-08.15-55-28.webm

@danielhjacobs danielhjacobs force-pushed the fix-100-percent-height branch 2 times, most recently from 5aead46 to 66c5fc3 Compare September 5, 2023 14:43
@danielhjacobs danielhjacobs marked this pull request as draft September 5, 2023 16:08
@danielhjacobs danielhjacobs force-pushed the fix-100-percent-height branch 2 times, most recently from 020c34a to de3d7c9 Compare September 8, 2023 19:57
@danielhjacobs danielhjacobs marked this pull request as ready for review September 8, 2023 19:58
@danielhjacobs danielhjacobs force-pushed the fix-100-percent-height branch 3 times, most recently from fd926fe to f6b2cff Compare September 8, 2023 20:36
@danielhjacobs danielhjacobs marked this pull request as draft September 8, 2023 20:58
@danielhjacobs danielhjacobs force-pushed the fix-100-percent-height branch 6 times, most recently from 18f8fd2 to 2d1c0a6 Compare September 11, 2023 19:17
@danielhjacobs danielhjacobs marked this pull request as ready for review September 11, 2023 19:37
@danielhjacobs danielhjacobs force-pushed the fix-100-percent-height branch 11 times, most recently from 9c142da to 3eb23ae Compare September 12, 2023 19:33
@danielhjacobs
Copy link
Contributor Author

danielhjacobs commented Sep 12, 2023

I also tested this, but a bunch of setTimeout calls does not make for a good test:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>PERCENT-BASED-HEIGHT</title>
</head>
<body style="height: 0px;">
  <div id="middle-div">
    <embed id="content" width="100%" height="100%" src="https://cdn.jsdelivr.net/gh/ruffle-rs/demo/logo-anim.swf"></embed>
  </div>
  <div id="result"></div>
  <script>
  let index = 1;
  function writeResult(res) {
    const resultDiv = document.createElement("div");
    resultDiv.textContent = res;
    resultDiv.id = "result_" + index;
    const result = document.getElementById("result");
    result.appendChild(resultDiv);
    index++;
  }
  function checkClientHeight() {
      const content = document.getElementById("content");
      writeResult(content.clientHeight);
  }
  function changeContentHeightAttribute(height) {
      const content = document.getElementById("content");
      content.setAttribute("height", height);
  }
  function changeBodyHeightStyle(height) {
      const body = document.querySelector("body");
      body.style.height = height;
  }
  function removeBodyStyle() {
      const body = document.querySelector("body");
      body.removeAttribute("style");
  }
  function removeMiddleDiv() {
      const middleDiv = document.getElementById("middle-div");
      const content = document.getElementById("content");
      middleDiv.replaceWith(content);
  }
  document.addEventListener("DOMContentLoaded", () => {
      const resizeObserver = new ResizeObserver(() => {
          checkClientHeight();
      });
      setTimeout(() => {
        // 100% width and 100% height of content, middle-div, 0px body height
        const content = document.getElementById("content");
        resizeObserver.observe(content)
        // 100% width and 100% height of content, 0px body height
        setTimeout(removeMiddleDiv, 1000); // 0
        // 100% width and 100% height of content, 50px body height
        setTimeout(() => changeBodyHeightStyle("50px"), 2000); // 50
        // 100% width and 100% height of content, no styling for body
        setTimeout(removeBodyStyle, 3000) // 200
        // 100% width and 50px height of content, no styling for body
        setTimeout(() => changeContentHeightAttribute("50px"), 4000); // 50
        // 100% width and 0px height of content, no styling for body
        setTimeout(() => changeContentHeightAttribute("0px"), 5000); // 0
        const contentDupe = document.createElement("embed");
        contentDupe.src = "https://cdn.jsdelivr.net/gh/ruffle-rs/demo/logo-anim.swf";
        contentDupe.setAttribute("height", "100%");
        contentDupe.setAttribute("width", "100%");
        setTimeout(() => document.querySelector("body").appendChild(contentDupe), 7000);
      }, 5000);
  });
  </script>
</body>
</html>

This PR vs Flash:

Screencast.from.2023-09-12.16-06-12.webm

For reference, this is the same page before this PR:

Screencast.from.2023-09-12.16-30-32.webm

@danielhjacobs danielhjacobs force-pushed the fix-100-percent-height branch 4 times, most recently from 06cfc5c to 35e7889 Compare September 15, 2023 14:26
@danielhjacobs
Copy link
Contributor Author

Replaced by #13256

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants