How does Kahoot know if content is fullscreen?

How does Kahoot know if content is fullscreen?

I was playing Kahoot on a Chromebook. On many chromebooks, there is func button that "hides" the tab bar, in short, fullscreen the webpage and hide the tab changer, URL bar, and bookmarks bar to make the webpage bigger. It is not considered fullscreen, the "press [esc] to exit fullscreen" does not appear, and when I direct my mouse up the X does not appear (to exit fullscreen), but instead everything that was hidden appears again, but it is over the web content, so the webpage does not resize, but part of it is covered by the tabs bar. When I move my mouse downwards, the bar goes away again.

However, I noticed that if I was in the chrome fullscreen mode (described above), the fullscreen option on Kahoot was blanked out, as such:

That means that it could detect it.

If I was not in the chrome fullscreen mode, it would show up black, and I would be able to enter fullscreen using the button (by kahoot making the document of the page fullscreenelement)

I then did a check for the fullscreen element while in the chrome fullscreen mode:

Therefore, there is no fullscreen element. So, How can kahoot detect if I am in the Chromebook fullscreen mode, if there is no fullscreenelement?

TLDR: Actually, the Kahoot! website is only comparing the width/height of the page and the width/height of the screen to check if the page is mostly covering the screen.

I have found that in the Kahoot! source code (See the full beautified code):

function isUserInitiatedFullscreen() {
    var pageWidth = window.innerWidth * window.devicePixelRatio;
    var screenWidth = window.screen.width;

    var pageHeight = window.innerHeight * window.devicePixelRatio;
    var screenHeight = window.screen.height;

    return (
        pageWidth / screenWidth >= 0.99 
        && pageHeight / screenHeight >= 0.99 
        && window.outerWidth === pageWidth 
        && (!screenfull.isEnabled || screenfull.isFullscreen)
    );
};

var fullscreenButtonMessages = {
    fullScreen: "Fullscreen",
    exit: "Exit fullscreen",
    disabled: "Please use the browser menu <br>or a hotkey to exit fullscreen",
};

function FullscreenButton() {
    var message = (
        isUserInitiatedFullscreen() ? fullscreenButtonMessages.disabled : 
        isFullscreen ? fullscreenButtonMessages.exit : fullscreenButtonMessages.fullScreen
    );
    /* ... */
}

It means that the page is considered in fullscreen if pageWidth / screenWidth >= 0.99 and pageHeight / screenHeight >= 0.99.

It's exactly the same as pageWidth >= 0.99 * screenWidth && pageHeight >= 0.99 * screenHeight (it's just math).

So if the page takes 99% or more than the width of the screen and 99% or more than the height of the screen, the window is considered in fullscreen and, as you can see in the FullscreenButton function, the message is set to the one in the screenshot.