Bug 31464 – Wrong html in view source after receiving the following html

• Status: RESOLVED
• Resolution: INVALID
• Component: DOM

[Marius]

Browser receives this HTML code:
              <div> 
              	<p> 
                    <span id="eventSummary_whenRow1">Friday, November 13</span> 
                    <span id="eventSummary_whenRow2"><br/>1:30AM - 3:30AM</span> 
<a href="#" id="eventSummary_whenLabel" class="eventSummary_collapsed">Time Zone</a><br />                   
<span id="eventSummary" style="display: none"> 
                <form name="tzForm"><select id="eventSummary_cmbDisplayTimezone" name="timeZone" class="EP_EventSummary_TimeZone"> 
                  <option value="-279">Primary: GMT+2: Bucharest </option> 
                </select></form> 
                </span> 
               </p>  
               </div> 


Layout is wrong as From is always visible. After a "view source" you can see that form is outside of the enclosing span.

[Alexey Proskuryakov]

Is this a Chromium bug? In Safari, View Source (Cmd+Option+U) always shows unmodified source.

[Marius]

I'm sorry I expressed myself poorly. I rechecked my steps and it seems that view source does show html corectly, but web inspector (option + command + c) shows it wrong. 

You can also notice from the first look on the html that the form is visible when it shouldn't be as it's nested inside the span with display:none. 


To test, just copy / paste the html code into a file and open in it in the browser. (adding maybe correct html header etc)

[Daniel Bates]

Marius,

The snippet you provided is not valid HTML (checked against the HTML 4.01 spec <http://www.w3.org/TR/html4>).

In particular, a <form> (which is a block-level element) cannot be nested inside a <span> (which is an inline element). Hence, we close the <span> (i.e. </span>) (*) before the <form> element, which is what you see in the inspector. Notice, <p> is an inline element, see <http://www.w3.org/TR/html4/struct/text.html#h-9.3.1>. So, it cannot contain a block-level element (**). Because of (*), <p> now contains the <form>, but by (**) this is not valid. So, we close the <p> (&) (i.e. </p>) before the <form>. Therefore the resulting HTML structure has the form:

<div>
<p>
  <span>
  <span>
    <br>
  </span>
  <a>
  <br>
  <span>
</p>
<form>
<p> (&&)

(&&) I believe this extra <p> is a result of us trying to figure out what the user may have intended. When we do (&) we also add a <p> after the <form>.

See Section 7.5.3 of the HTML 4.01 spec <http://www.w3.org/TR/html4/struct/global.html#h-7.5.3> regarding the distinction between block-level and inline elements.

(In reply to comment #2)
> I'm sorry I expressed myself poorly. I rechecked my steps and it seems that
> view source does show html corectly, but web inspector (option + command + c)
> shows it wrong. 
> 
> You can also notice from the first look on the html that the form is visible
> when it shouldn't be as it's nested inside the span with display:none. 
> 
> 
> To test, just copy / paste the html code into a file and open in it in the
> browser. (adding maybe correct html header etc)

[Daniel Bates]

The structure should be of the form:

<div>
  <p>
    <span>
    <span>
      <br>
    </span>
    <a>
    <br>
    <span>
  </p>
  <form>
  <p> (&&)
</div>

(In reply to comment #3)
 > <div>
> <p>
>   <span>
>   <span>
>     <br>
>   </span>
>   <a>
>   <br>
>   <span>
> </p>
> <form>
> <p> (&&)
>

[Daniel Bates]

Resolving this bug as invalid because of comment 3 <https://bugs.webkit.org/show_bug.cgi?id=31464#c3>. Marius, if you feel this is really a bug then re-open this bug and elaborate on your reasoning.