[wp-trac] [WordPress Trac] #61531: HTML API: Audit class name methods for consistency and correctness

Fri Jun 28 20:25:28 UTC 2024

#61531: HTML API: Audit class name methods for consistency and correctness
--------------------------------------+-----------------------------
 Reporter:  jonsurrell                |       Owner:  (none)
     Type:  enhancement               |      Status:  assigned
 Priority:  normal                    |   Milestone:  Future Release
Component:  HTML API                  |     Version:  6.5
 Severity:  normal                    |  Resolution:
 Keywords:  has-patch has-unit-tests  |     Focuses:
--------------------------------------+-----------------------------

Comment (by dmsnell):

 After a lengthy and extremely valuable chat with @jonsurrell and some
 independent testing I think we can say comfortably that the behavior in
 the HTML API is wrong, but that making it right is a bit more complicated
 than a simple bug fix would be.

 In the HTML API we have to make ourselves aware of the quirks mode of the
 document being parsed. For normative posts it's probably safe to assume
 //no quirks mode//, as most WordPress themes output an HTML doctype that
 enters no-quirks mode. But, we may encounter quirks-mode documents, and
 the HTML Processor will likely need to communicate eventually which one a
 given document is.

 > When matching against a document which is in
 [https://dom.spec.whatwg.org/#concept-document-quirks quirks mode], class
 names must be matched [https://infra.spec.whatwg.org/#ascii-case-
 insensitive ASCII case-insensitively]; class selectors are otherwise case-
 sensitive, only matching class names they are
 [https://infra.spec.whatwg.org/#string-is identical to].

 [https://www.w3.org/TR/selectors-4/#class-html CSS Selectors Level 4]

 I created the following document to illustrate the relevant semantics: in
 `no-quirks` mode, CSS //class selectors// match byte-for-byte with what's
 in the decoded `class` attribute; in `quirks` mode, they match in an
 ASCII-case-insensitive manner.

 Remove the `<!DOCTYPE html>` line to test in quirks mode.

 {{{
 <!DOCTYPE html>
 <style>
 .one { border-left: 3px solid red; }
 .ONE { border-top: 3px solid red; }
 .right { border-right: 3px solid blue; }
 .green { color: green; }
 .italic { font-style: italic; }
 .underline { text-decoration: underline; }
 </style>

 <div>
         <p class="one">One</p>
         <p class="ONE">ONE</p>
         <p class="&#x6f;ne">&#x64;ne</p>
         <p class="ONE">&#79;NE</p>
         <p class="oNe one ONE oNe &#x6f;ne oNe ONE">All of them</p>
 </div>

 <script>
 const by = s => document.querySelectorAll( s );

 by( '.one' ).forEach( node => node.classList.add('grEen') );
 by( '.ONE' ).forEach( node => node.classList.add('right') );
 by( '[class~="one"]' ).forEach( node => node.classList.add( 'italic' ) );
 by( '[class~="ONE"]' ).forEach( node => node.classList.add( 'underline' )
 );
 </script>
 }}}

 ||= No-Quirks Mode =||= Quirks Mode =||
 || [[Image(ticket:61531:no-quirks-mode.png)]] || [[Image(ticket:61531
 :quirks-mode.png)]] ||

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/61531#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform