Add support for HTML normalize method

Author: sirreal

html-api-debugger/html-api-debugger.php

@@ -151,6 +151,7 @@ function prepare_html_result_object( string $html, array $options = null ): arra
 		'html' => $html,
 		'error' => null,
 		'result' => null,
+		'normalizedHtml' => HTML_API_Integration\get_normalized_html( $html ),
 	);
 
 	try {

html-api-debugger/html-api-integration.php

@@ -20,9 +20,24 @@ function get_supports(): array {
 		'full_parser' => method_exists( WP_HTML_Processor::class, 'create_full_parser' ),
 		'quirks_mode' => $html_processor_state_rc->hasProperty( 'document_mode' ),
 		'doctype' => method_exists( WP_HTML_Processor::class, 'get_doctype_info' ),
+		'normalize' => method_exists( WP_HTML_Processor::class, 'normalize' ),
 	);
 }
 
+
+/**
+ * Get the normalized HTML.
+ *
+ * @param string $html The HTML.
+ * @return string|null The normalized HTML or null if not supported.
+ */
+function get_normalized_html( string $html ): ?string {
+	if ( ! method_exists( WP_HTML_Processor::class, 'normalize' ) ) {
+		return null;
+	}
+	return WP_HTML_Processor::normalize( $html );
+}
+
 /**
  * Build a DOM-like tree using the HTML API
  *

html-api-debugger/interactivity.php

@@ -68,6 +68,7 @@ function generate_page( string $html, array $options ): string {
 			'htmlApiDoctypeName' => $htmlapi_response['result']['doctypeName'] ?? '[unknown]',
 			'htmlApiDoctypePublicId' => $htmlapi_response['result']['doctypePublicId'] ?? '[unknown]',
 			'htmlApiDoctypeSytemId' => $htmlapi_response['result']['doctypeSystemId'] ?? '[unknown]',
+			'normalizedHtml' => $htmlapi_response['normalizedHtml'] ?? '',
 		)
 	);
 	ob_start();
@@ -104,6 +105,10 @@ class="html-api-debugger-container html-api-debugger--grid"
 			referrerpolicy="no-referrer"
 			sandbox="allow-forms allow-modals allow-popups allow-scripts allow-same-origin"></iframe>
 	</div>
+	<details class="full-width" data-wp-bind--hidden="!state.htmlapiResponse.supports.normalize">
+		<summary>HTML API Normalized HTML</summary>
+		<pre class="html-text" data-wp-text="state.normalizedHtml"></pre>
+	</details>
 	<details class="full-width">
 		<summary>Document info</summary>
 

html-api-debugger/readme.txt

@@ -79,3 +79,4 @@ Add a page to wp-admin for debugging the HTML API.
 * Replace TABLE based layout with CSS grid.
 * Fix a crash on meta tags with a content attribute.
 * Display namespace on tag closers.
+* Display normalized HTML when supported.

html-api-debugger/view.js

@@ -35,19 +35,22 @@ let debounceInputAbortController = null;
  * @property {boolean} is_virtual
  * @property {boolean} quirks_mode
  * @property {boolean} full_parser
+ * @property {boolean} normalize
  *
  *
  * @typedef HtmlApiResponse
  * @property {any} error
  * @property {Supports} supports
  * @property {{tree: any, compatMode:string, doctypeName:string, doctypePublicId:string, doctypeSystemId:string }|null} result
+ * @property {string|null} normalizedHtml
  * @property {string} html
  *
  *
  * @typedef State
  * @property {string|null} htmlApiDoctypeName
  * @property {string|null} htmlApiDoctypePublicId
  * @property {string|null} htmlApiDoctypeSystemId
+ * @property {string|null} normalizedHtml
  * @property {string} htmlPreambleForProcessing
  * @property {string} formattedHtmlapiResponse
  * @property {HtmlApiResponse} htmlapiResponse
@@ -126,6 +129,18 @@ const store = createStore(NS, {
 				: store.state.htmlapiResponse.result?.doctypeSystemId;
 		},
 
+		get normalizedHtml() {
+			if (
+				!store.state.htmlapiResponse.supports.normalize ||
+				!store.state.htmlapiResponse.normalizedHtml
+			) {
+				return '';
+			}
+			return store.state.showInvisible
+				? replaceInvisible(store.state.htmlapiResponse.normalizedHtml)
+				: store.state.htmlapiResponse.normalizedHtml;
+		},
+
 		get formattedHtmlapiResponse() {
 			return JSON.stringify(store.state.htmlapiResponse, undefined, 2);
 		},