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

<audio> inside <p> causes an empty <p> #121

Closed
Crusse opened this issue Oct 10, 2016 · 5 comments
Closed

<audio> inside <p> causes an empty <p> #121

Crusse opened this issue Oct 10, 2016 · 5 comments
Assignees
@goetas
Labels
bug

Comments

@Crusse
Copy link

Crusse commented Oct 10, 2016 •
edited
Loading

I'm using version 2.2.2 with PHP PHP 5.4.45.

This code

$html = <<<HTML
<!DOCTYPE html>

  <p><audio preload="none" controls="controls">
    <source src="https://example.com/test.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
  </audio></p>
HTML;

$parser = new Masterminds\HTML5( array( 'disable_html_ns' => true ) );
$doc = $parser->loadHTML( $html );
echo $parser->saveHTML( $doc );

results in this HTML

<!DOCTYPE html>
<html><p></p><audio preload="none" controls="controls">
    <source src="https://example.com/test.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio></html>

Running this in Chrome says that <audio> is an inline element (at least in this context):

<!DOCTYPE html>

  <p><audio preload="none" controls="controls">
    <source src="https://example.com/test.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
  </audio></p>


<script>
setTimeout( function() {
  var c = document.getElementsByTagName('audio')[0];
  alert(getComputedStyle(c, null).display);
}, 1000 );
</script>
@goetas
Copy link
Member

goetas commented Oct 11, 2016

I'm not sure that the tag p can contain audio tags... is it true?

@Crusse
Copy link
Author

Crusse commented Oct 11, 2016 •
edited
Loading

I'm not sure either. My use case is with TinyMCE, which actually adds p tags around audio tags: https://jsfiddle.net/z35qy9h0/1/

A random SO thread: http://stackoverflow.com/questions/9852312/list-of-html5-elements-that-can-be-nested-inside-p-element

Also testing the aforementioned HTML in Firefox and Chrome results in the audio element staying inside the p element, when looking at the DOM, whereas if there was a div inside a p element, those browsers would render the div outside the p element.

Also, this gives no validation errors with the string

<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<p>
  <audio preload="none" controls="controls">
    <source src="https://example.com/test.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
  </audio>
</p>
</html>

@goetas goetas added the bug label Oct 12, 2016
@Lewiscowles1986
Copy link

Is turning off autop not a better option than adding edge cases to other software?

@mattfarina
Copy link
Member

This one is a little more complicated once I started looking at the specs...

In HTML 4.01 is notes,

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

This exact line doesn't show up in the HTML5 spec.

The HTML5 spec does say,

Runs of phrasing content form paragraphs.

Phrasing content does contain audio tags.

So, this is a bug.

While I've yet to track it completely, I did find that it's in the parser. The next step is to start looking at how p auto-closing works.

@goetas goetas self-assigned this Sep 1, 2017
esperecyan added a commit to esperecyan/html-filter that referenced this issue Oct 27, 2017
@esperecyan
audio要素、video要素がフレージングコンテンツとして扱われない不具合 Masterminds/html5-php#121 に対処
eaf5ab7
@goetas goetas mentioned this issue Oct 8, 2018
Merged
@goetas
Copy link
Member

goetas commented Oct 8, 2018

#142 should fix this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@goetas goetas

Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mattfarina @goetas @Crusse @Lewiscowles1986