-
Notifications
You must be signed in to change notification settings - Fork 79
Description
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:

<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:

(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:

(As you can see, because it has no allow it doesn't have a problem with not having a ; therefore it works)