Skip to content

Bug: Camelcase 'allowFullScreen' doesn't work when 'allow' attribute is set #139

@masserra

Description

@masserra

Problem

Initially I was going to raise a bug simply stating the camelcase version (allowFullScreen) wouldn't work whilst the lowercase version (allowfullscreen) would.

After a few more tests I discovered that the camelcase 'allowFullScreen' doesn't work when 'allow' attribute is set.

Further testing showed that it doesn't add a ; when concatenating fullscreen with the existing allow string, resulting in two allows separated by a space which seems like it's not an option.

Test examples

See code snippets below followed by screenshots of its output.

<Iframe
      url={url}
      width="100%"
      height={height || "350"}
      styles={{
        ...(!height && { aspectRatio: "16 / 9" })
      }}
      display="block"
      position="relative"
      frameBorder={0}
      allowfullscreen
      loading="lazy"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture"
/>

The code above using lowercase allowfullscreen (which works) outputs this:
lowercase-allowFullScreen


<Iframe
      url={url}
      width="100%"
      height={height || "350"}
      styles={{
        ...(!height && { aspectRatio: "16 / 9" })
      }}
      display="block"
      position="relative"
      frameBorder={0}
      allowFullScreen
      loading="lazy"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture"
/>

The code above using camelcase allowFullScreen (which doesn't work) outputs this:
camelcase-allowfullscreen
(As you can see, not only doesn't add a ; after the fullscreen directive, it also leaves lost orphan ; in between from where it initially was located)


<Iframe
      url={url}
      width="100%"
      height={height || "350"}
      styles={{
        ...(!height && { aspectRatio: "16 / 9" })
      }}
      display="block"
      position="relative"
      frameBorder={0}
      allowFullScreen
      loading="lazy"
/>

The code above removing the allow property and using camelcase allowFullScreen (which works) outputs the following as expected:
camelcase-allowFullScreen-no-allow
(As you can see, because it has no allow it doesn't have a problem with not having a ; therefore it works)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions