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.

Sign up for GitHub

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

Jump to bottom

Thymeleaf not rendering HTML Boolean attribute controls correctly for <audio>. #956

Closed
garretwilson opened this issue Apr 28, 2023 · 8 comments
Closed

Thymeleaf not rendering HTML Boolean attribute controls correctly for <audio>. #956

garretwilson opened this issue Apr 28, 2023 · 8 comments
Labels
needs triage

Comments

@garretwilson
Copy link

garretwilson commented Apr 28, 2023 •
edited

I'm using Spring Boot 3.0.4. I have XHTML source code which includes an <audio> element:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en-US">

…

    <audio th:if="${audioUrl}" th:src="${audioUrl}" controls="controls">
      This browser does not support audio.
    </audio>

…

Note that I am using the XHTML format for a Boolean attribute controls="controls". I expect the element to be rendered as HTML:

    <audio … controls>
      This browser does not support audio.
    </audio>

But instead it renders it as an attribute with a value:

    <audio … controls="controls">
      This browser does not support audio.
    </audio>

I haven't touched Thymeleaf in a while. I thought I remembered reading that it handled Boolean attributes correctly for HTML, but it looks like it doesn't, unless I made a mistake somewhere
@garretwilson
Copy link
Author

It appears that Thymeleaf will allow me to use the HTML form in the source code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en-US">

…

    <audio th:if="${audioUrl}" th:src="${audioUrl}" controls>
      This browser does not support audio.
    </audio>

…

But now my source code is no longer valid XHTML.

@garretwilson
Copy link
Author

garretwilson commented Apr 28, 2023 •
edited

Interesting; if I do this:

…
    <audio th:if="${audioUrl}" th:src="${audioUrl}" th:controls="${true}">
      This browser does not support audio.
    </audio>
…

Then Thymeleaf still renders:

    <audio … controls="controls">
      This browser does not support audio.
    </audio>

So Thymeleaf must be generating the output in XHTML mode.

@garretwilson
Copy link
Author

garretwilson commented Apr 28, 2023 •
edited

I explicitly set spring.thymeleaf.mode: HTML (which I thought was the default anyway) in my application.yaml file. (Note that I have spring.thymeleaf.suffix: .xhtml because my input files are XHTML, but that should have no bearing I would think.)

Yet Thymeleaf still renders th:controls="${true}" as controls="controls", even in HTML template mode. What's going on?

@garretwilson
Copy link
Author

garretwilson commented Apr 28, 2023 •
edited

I'm reading in the latest documentation 5.5 Fixed-value boolean attributes:

HTML has the concept of boolean attributes, attributes that have no value and the presence of one means that value is “true”. In XHTML, these attributes take just 1 value, which is itself. …

The Standard Dialect includes attributes that allow you to set these attributes by evaluating a condition, so that if evaluated to true, the attribute will be set to its fixed value, and if evaluated to false, the attribute will not be set …

The following fixed-value boolean attributes exist in the Standard Dialect: … th:controls …

It seems that Thymeleaf should already be generating controls instead of controls="controls" if I use the th:controls form. It would appear this is indeed a bug.

@garretwilson garretwilson changed the title Thymeleaf not rendering HTML Boolean attribute correctly for <audio>. Thymeleaf not rendering HTML Boolean attribute controls correctly for <audio>. Apr 28, 2023
@garretwilson
Copy link
Author

Seeing no response here I opened a question on Stack Overflow.

@garretwilson
Copy link
Author

On the Stack Overflow question someone's comment made me read the documentation again, and I think perhaps it never indicated that Thymeleaf would render the natural HTML form:

… if evaluated to true, the attribute will be set to its fixed value, and if evaluated to false, the attribute will not be set …

Perhaps I read over this section too quickly, and interpreted the section to mean that Thymleaf understood the distinction and would be rendering the HTML form. Upon rereading it, you seem to be saying just the opposite: that Thymeleaf will render the XHTML form.

@danielfernandez
Copy link
Member

Please note Thymeleaf's behaviour rendering this:

< ... th:controls="${...}" >

As this when the expression is true:

< ... controls="controls" >

Is perfectly valid HTML. Please review the HTML spec here.

@garretwilson
Copy link
Author

Is perfectly valid HTML.

I understand. I just misread the documentation regarding expected behavior. Thanks for responding.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@garretwilson @danielfernandez