From eed20ad95196ede1b415837caa0b848ee1f48a11 Mon Sep 17 00:00:00 2001
From: sideshowbarker <mike@w3.org>
Date: Wed, 6 Nov 2024 19:13:15 +0900
Subject: [PATCH] Tests: Import WPT accname/name/comp_name_from_content.html
 test

---
 .../accname/name/comp_name_from_content.txt   |  70 +++++
 .../accname/name/comp_name_from_content.html  | 266 ++++++++++++++++++
 2 files changed, 336 insertions(+)
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/accname/name/comp_name_from_content.txt
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/accname/name/comp_name_from_content.html

diff --git a/Tests/LibWeb/Text/expected/wpt-import/accname/name/comp_name_from_content.txt b/Tests/LibWeb/Text/expected/wpt-import/accname/name/comp_name_from_content.txt
new file mode 100644
index 00000000000..16655895363
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/accname/name/comp_name_from_content.txt
@@ -0,0 +1,70 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 60 tests
+
+60 Pass
+Details
+Result	Test Name	MessagePass	aria button name from content, inline	
+Pass	aria heading name from content, inline	
+Pass	aria link name from content, inline	
+Pass	aria button name from content, block	
+Pass	aria heading name from content, block	
+Pass	aria link name from content, block	
+Pass	button name from content	
+Pass	heading name from content	
+Pass	link name from content	
+Pass	button name from content with ::before	
+Pass	heading name from content with ::before	
+Pass	link name from content with ::before	
+Pass	button name from content with ::after	
+Pass	heading name from content with ::after	
+Pass	link name from content with ::after	
+Pass	button name from content with ::before and ::after	
+Pass	heading name from content with ::before and ::after	
+Pass	link name from content with ::before and ::after	
+Pass	button name from content no space joiners ::before and ::after	
+Pass	heading name from content no space joiners ::before and ::after	
+Pass	link name from content no space joiners ::before and ::after	
+Pass	button name from content with ::before and ::after in rtl	
+Pass	heading name from content with ::before and ::after in rtl	
+Pass	link name from content with ::before and ::after in rtl	
+Pass	button name from fallback content with ::before and ::after	
+Pass	heading name from fallback content with ::before and ::after	
+Pass	link name from fallback content with ::before and ::after	
+Pass	button name from fallback content mixing attr() and strings with ::before and ::after	
+Pass	heading name from fallback content mixing attr() and strings with ::before and ::after	
+Pass	link name from fallback content mixing attr() and strings with ::before and ::after	
+Pass	primitive radio input with ::before containing empty alternative text	
+Pass	primitive radio input with ::before containing empty alternative text for an image	
+Pass	button name from content for each child	
+Pass	heading name from content for each child	
+Pass	link name from content for each child	
+Pass	button name from content for each child including image	
+Pass	heading name from content for each child including image	
+Pass	link name from content for each child including image	
+Pass	button name from content for each child including nested image	
+Pass	heading name from content for each child including nested image	
+Pass	link name from content for each child including nested image	
+Pass	heading name from content for each child including nested button with nested image	
+Pass	heading name from content for each child including nested link with nested image	
+Pass	heading name from content for each child including nested link using aria-label with nested image	
+Pass	heading name from content for each child including nested link using aria-labelledby with nested image	
+Pass	heading name from content for each child including two nested links using aria-labelledby with nested image	
+Pass	link name from content for each child including nested image (referenced elsewhere via labelledby)	
+Pass	button name from content for each child (no space, inline)	
+Pass	heading name from content for each child (no space, inline)	
+Pass	link name from content for each child (no space, inline)	
+Pass	button name from content for each child (no space, display:block)	
+Pass	heading name from content for each child (no space, display:block)	
+Pass	link name from content for each child (no space, display:block)	
+Pass	button name from content for each child (no space, display:inline-block)	
+Pass	heading name from content for each child (no space, display:inline-block)	
+Pass	link name from content for each child (no space, display:inline-block)	
+Pass	heading name from content with text-transform:none	
+Pass	heading name from content with text-transform:uppercase	
+Pass	heading name from content with text-transform:capitalize	
+Pass	heading name from content with text-transform:lowercase	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/accname/name/comp_name_from_content.html b/Tests/LibWeb/Text/input/wpt-import/accname/name/comp_name_from_content.html
new file mode 100644
index 00000000000..ba53b38a882
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/accname/name/comp_name_from_content.html
@@ -0,0 +1,266 @@
+<!doctype html>
+<html>
+<head>
+  <title>Name Comp: Name From Content</title>
+  <meta charset="utf-8">
+  <script src="../../resources/testharness.js"></script>
+  <script src="../../resources/testharnessreport.js"></script>
+  <script src="../../resources/testdriver.js"></script>
+  <script src="../../resources/testdriver-vendor.js"></script>
+  <script src="../../resources/testdriver-actions.js"></script>
+  <script src="../../wai-aria/scripts/aria-utils.js"></script>
+  <style type="text/css">
+
+     /*
+
+      Since the AccName spec is in flux about whitespace joiners, and the implementations don't match,
+      normalize the whitespace (with extra leading/trailing) space.
+
+      No point in having the same in-flux spec change cause failures the remaining unrelated tests.
+
+      See more here:
+      https://github.com/w3c/accname/issues/205
+      https://github.com/w3c/accname/projects/1#card-42288231
+
+    */
+
+    .simple-before::before {
+      content: " before "; /* [sic] leading and trailing space */
+      margin:0 0.1em;
+    }
+    .simple-after::after {
+      content: " after "; /* [sic] leading and trailing space */
+      margin:0 0.1em;
+    }
+    .no-space::before, .no-space::after {
+      content: "nospace"; /* [sic] Unlike the others, NO extra leading/trailing space here. */
+    }
+    .simple-before:dir(rtl)::before {
+      content: " من قبل "; /* [sic] leading and trailing space */
+    }
+    .simple-after:dir(rtl)::after {
+      content: " بعد "; /* [sic] leading and trailing space */
+    }
+    .fallback-before::before {
+      content: " before "; /* [sic] leading and trailing space */
+      content: " before " / " alt-before "; /* Override the previous line for engines that support the Alternative Text syntax. */
+    }
+    .fallback-after::after {
+      content: " after "; /* [sic] leading and trailing space */
+      content: " after " / " alt-after "; /* Override the previous line for engines that support the Alternative Text syntax. */
+    }
+    .fallback-before-empty::before {
+      content: "before"  / "";
+    }
+    .fallback-before-image-empty::before {
+      content: "before " url(/images/blue.png) / "";
+    }
+    .fallback-before-mixed::before {
+      content: " before "; /* [sic] leading and trailing space */
+      content: " before " / " start " attr(data-alt-text-before) " end "; /* Override the previous line for engines that support the Alternative Text syntax. */
+    }
+    .fallback-after-mixed::after {
+      content: " after "; /* [sic] leading and trailing space */
+      content: " after " / " start " attr(data-alt-text-after) " end "; /* Override the previous line for engines that support the Alternative Text syntax. */
+    }
+    .block > span {
+      display: block;
+      margin: 0 0.1em;
+    }
+    .iblock > span {
+      display: inline-block;
+      margin: 0 0.1em;
+    }
+
+  </style>
+</head>
+<body>
+
+<p>Tests the <a href="https://w3c.github.io/accname/#comp_name_from_content">#comp_name_from_content</a> portions of the AccName <em>Name Computation</em> algorithm.</p>
+
+<p>This series of tests exercises the button, heading, and link elements, because each have different characteristics worthy of testing in each of the name computation algorithm scenarios:</p>
+<ul>
+  <li>button is a leaf node with sub-level elements presentational.</li>
+  <li>heading is block level, and can contain sub-level interactives like links.</li>
+  <li>link (a[href]) is an interactive inline element that can include non-presentational descendants.</li>
+</ul>
+
+<h1>ARIA roles, inline</h1>
+<span tabindex="0" role="button" data-expectedlabel="label" data-testname="aria button name from content, inline" class="ex">label</span><br>
+<span tabindex="0" role="heading" data-expectedlabel="label" data-testname="aria heading name from content, inline" class="ex">label</span><br>
+<span tabindex="0" role="link" data-expectedlabel="label" data-testname="aria link name from content, inline" class="ex">label</span><br>
+<br>
+
+<h1>ARIA roles, block</h1>
+<div tabindex="0" role="button" data-expectedlabel="label" data-testname="aria button name from content, block" class="ex">label</div>
+<div tabindex="0" role="heading" data-expectedlabel="label" data-testname="aria heading name from content, block" class="ex">label</div>
+<div tabindex="0" role="link" data-expectedlabel="label" data-testname="aria link name from content, block" class="ex">label</div>
+<br>
+
+<h1>simple</h1>
+<button data-expectedlabel="label" data-testname="button name from content" class="ex">label</button><br>
+<h3 data-expectedlabel="label" data-testname="heading name from content" class="ex">label</h3>
+<a href="#" data-expectedlabel="label" data-testname="link name from content" class="ex">label</a><br>
+<br>
+
+<h1>simple with ::before</h1>
+<button data-expectedlabel="before label" data-testname="button name from content with ::before" class="ex simple-before">label</button><br>
+<h3 data-expectedlabel="before label" data-testname="heading name from content with ::before" class="ex simple-before">label</h3>
+<a href="#" data-expectedlabel="before label" data-testname="link name from content with ::before" class="ex simple-before">label</a><br>
+<br>
+
+<h1>simple with ::after</h1>
+<button data-expectedlabel="label after" data-testname="button name from content with ::after" class="ex simple-after">label</button><br>
+<h3 data-expectedlabel="label after" data-testname="heading name from content with ::after" class="ex simple-after">label</h3>
+<a href="#" data-expectedlabel="label after" data-testname="link name from content with ::after" class="ex simple-after">label</a><br>
+<br>
+
+<h1>simple with ::before and ::after</h1>
+<button data-expectedlabel="before label after" data-testname="button name from content with ::before and ::after" class="ex simple-before simple-after">label</button><br>
+<h3 data-expectedlabel="before label after" data-testname="heading name from content with ::before and ::after" class="ex simple-before simple-after">label</h3>
+<a href="#" data-expectedlabel="before label after" data-testname="link name from content with ::before and ::after" class="ex simple-before simple-after">label</a><br>
+<br>
+
+<h1>no space joiners ::before and ::after</h1>
+<button data-expectedlabel="nospacelabelnospace" data-testname="button name from content no space joiners ::before and ::after" class="ex no-space">label</button><br>
+<h3 data-expectedlabel="nospacelabelnospace" data-testname="heading name from content no space joiners ::before and ::after" class="ex no-space">label</h3>
+<a href="#" data-expectedlabel="nospacelabelnospace" data-testname="link name from content no space joiners ::before and ::after" class="ex no-space">label</a><br>
+<br>
+
+<h1>Arabic right-to-left (RTL) with ::before and ::after</h1>
+<div dir="rtl" lang="ar">
+  <button data-expectedlabel="من قبل اسم بعد" data-testname="button name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</button><br>
+  <h3 data-expectedlabel="من قبل اسم بعد" data-testname="heading name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</h3>
+  <a href="#" data-expectedlabel="من قبل اسم بعد" data-testname="link name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</a><br>
+</div>
+<br>
+
+<h1><a href="https://drafts.csswg.org/css-content/#alt">Alternative Text for  CSS content (previously `alt:`)</a> in pseudo-elements</h1>
+<p>rendered text should be "before label after"</p>
+<p>accessibility label should be "alt-before label alt-after"</p>
+<button data-expectedlabel="alt-before label alt-after" data-testname="button name from fallback content with ::before and ::after" class="ex fallback-before fallback-after">label</button><br>
+<h3 data-expectedlabel="alt-before label alt-after" data-testname="heading name from fallback content with ::before and ::after" class="ex fallback-before fallback-after">label</h3>
+<a href="#" data-expectedlabel="alt-before label alt-after" data-testname="link name from fallback content with ::before and ::after" class="ex fallback-before fallback-after">label</a><br>
+<br>
+
+<h1><a href="https://drafts.csswg.org/css-content/#alt">Mixed Alternative Text (attr() and strings) for  CSS content (previously `alt:`)</a> in pseudo-elements</h1>
+<p>rendered text should be "before label after"</p>
+<p>accessibility label should be "start alt-before end label start alt-after end"</p>
+<button data-alt-text-before="alt-before" data-alt-text-after="alt-after" data-expectedlabel="start alt-before end label start alt-after end" data-testname="button name from fallback content mixing attr() and strings with ::before and ::after" class="ex fallback-before-mixed fallback-after-mixed">label</button><br>
+<h3 data-alt-text-before="alt-before" data-alt-text-after="alt-after" data-expectedlabel="start alt-before end label start alt-after end" data-testname="heading name from fallback content mixing attr() and strings with ::before and ::after" class="ex fallback-before-mixed fallback-after-mixed">label</h3>
+<a href="#" data-alt-text-before="alt-before" data-alt-text-after="alt-after" data-expectedlabel="start alt-before end label start alt-after end" data-testname="link name from fallback content mixing attr() and strings with ::before and ::after" class="ex fallback-before-mixed fallback-after-mixed">label</a><br>
+<br>
+
+<h1>Empty alternative text for CSS content in pseudo-elements when applied to primitive appearance form controls</h1>
+<p><input data-expectedlabel="" data-testname="primitive radio input with ::before containing empty alternative text" class="ex fallback-before-empty" type=radio style=appearance:none>
+<p><input data-expectedlabel="" data-testname="primitive radio input with ::before containing empty alternative text for an image" class="ex fallback-before-image-empty" type=radio style=appearance:none>
+
+<h1>simple w/ for each child</h1>
+<button data-expectedlabel="one two three" data-testname="button name from content for each child" class="ex"><span>one</span> <span>two</span> <span>three</span></button><br>
+<h3 data-expectedlabel="one two three" data-testname="heading name from content for each child" class="ex"><span>one</span> <span>two</span> <span>three</span></h3>
+<a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child" class="ex"><span>one</span> <span>two</span> <span>three</span></a><br>
+<br>
+
+<h1>simple for each child with image</h1>
+<button data-expectedlabel="one two three" data-testname="button name from content for each child including image" class="ex"><span>one</span> <img alt="two" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> <span>three</span></button><br>
+<h3 data-expectedlabel="one two three" data-testname="heading name from content for each child including image" class="ex"><span>one</span> <img alt="two" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> <span>three</span></h3>
+<a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child including image" class="ex"><span>one</span> <img alt="two" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> <span>three</span></a><br>
+<br>
+
+
+<h1>simple for each child with extra nesting containing image</h1>
+<button data-expectedlabel="one two three four" data-testname="button name from content for each child including nested image" class="ex"><span>one</span> <span>two <img alt="three" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></span> <span>four</span></button><br>
+<h3 data-expectedlabel="one two three four" data-testname="heading name from content for each child including nested image" class="ex"><span>one</span> <span>two <img alt="three" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></span> <span>four</span></h3>
+<a href="#" data-expectedlabel="one two three four" data-testname="link name from content for each child including nested image" class="ex"><span>one</span> <span>two <img alt="three" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></span> <span>four</span></a><br>
+<br>
+
+<h1>heading with nested button with nested image</h1>
+<h3 data-expectedlabel="heading button image button heading" data-testname="heading name from content for each child including nested button with nested image" class="ex">
+  heading
+  <button>
+    button
+    <img alt="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
+    button
+  </button>
+  heading
+</h3>
+
+<h1>heading with nested link with nested image</h1>
+<h3 data-expectedlabel="heading link image link heading" data-testname="heading name from content for each child including nested link with nested image" class="ex">
+  heading
+  <a href="#">
+    link
+    <img alt="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
+    link
+  </a>
+  heading
+</h3>
+
+<h1>heading with nested link with nested image using aria-label</h1>
+<h3 data-expectedlabel="heading link aria-label heading" data-testname="heading name from content for each child including nested link using aria-label with nested image" class="ex">
+  heading
+  <a href="#" aria-label="link aria-label"><!-- should skip the other link text -->
+    ignored link text
+    <img id="nested_image_label_1" alt="ignored image alt" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
+    ignored link text
+  </a>
+  heading
+</h3>
+
+<h1>heading with nested link with nested image using aria-labelledby</h1>
+<h3 data-expectedlabel="heading image heading" data-testname="heading name from content for each child including nested link using aria-labelledby with nested image" class="ex">
+  heading
+  <a href="#" aria-labelledby="nested_image_label1"><!-- should skip the other link text -->
+    ignored link text
+    <img id="nested_image_label1" alt="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
+    ignored link text
+  </a>
+  heading
+</h3>
+
+<h1>heading with two nested links referencing image using aria-labelledby</h1>
+<h3 data-expectedlabel="image link2 link3" data-testname="heading name from content for each child including two nested links using aria-labelledby with nested image" class="ex">
+  <a href="#" aria-labelledby="nested_image_label2">
+    link1<!-- this text is skipped because of aria-labelledby -->
+  </a>
+  <a href="#" data-expectedlabel="link2 image link3" data-testname="link name from content for each child including nested image (referenced elsewhere via labelledby)" class="ex">
+    link2
+    <img id="nested_image_label2" alt="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
+    <!-- image skipped in this link (when computing heading text) because it was already referenced by the first link within this heading label recursion cycle. -->
+    <!-- but image not skipped when computing the text of the link itself since it has not been referenced in that context -->
+    link3
+  </a>
+</h3>
+
+
+<!-- Note: The following test is out of line with the spec, but matching two out of three implementations at the time of writing, and spec changes are expeected. -->
+<!-- See details in https://github.com/w3c/accname/issues/205 -->
+<!-- Final spec resolution will be addressed in AccName Whitespace Project: https://github.com/w3c/accname/projects/1#card-42288231 -->
+<h1>simple w/ for each child (w/o spaces and display:inline)</h1>
+<button data-expectedlabel="onetwothree" data-testname="button name from content for each child (no space, inline)" class="ex"><span>one</span><span>two</span><span>three</span></button><br>
+<h3 data-expectedlabel="onetwothree" data-testname="heading name from content for each child (no space, inline)" class="ex"><span>one</span><span>two</span><span>three</span></h3>
+<a href="#" data-expectedlabel="onetwothree" data-testname="link name from content for each child (no space, inline)" class="ex"><span>one</span><span>two</span><span>three</span></a><br>
+<br>
+
+<h1>simple w/ for each child (w/o spaces and display:block)</h1>
+<button data-expectedlabel="one two three" data-testname="button name from content for each child (no space, display:block)" class="ex block"><span>one</span><span>two</span><span>three</span></button><br>
+<h3 data-expectedlabel="one two three" data-testname="heading name from content for each child (no space, display:block)" class="ex block"><span>one</span><span>two</span><span>three</span></h3>
+<a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child (no space, display:block)" class="ex block"><span>one</span><span>two</span><span>three</span></a><br>
+<br>
+
+<h1>simple w/ for each child (w/o spaces and display:inline block)</h1>
+<button data-expectedlabel="one two three" data-testname="button name from content for each child (no space, display:inline-block)" class="ex iblock"><span>one</span><span>two</span><span>three</span></button><br>
+<h3 data-expectedlabel="one two three" data-testname="heading name from content for each child (no space, display:inline-block)" class="ex iblock"><span>one</span><span>two</span><span>three</span></h3>
+<a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child (no space, display:inline-block)" class="ex iblock"><span>one</span><span>two</span><span>three</span></a><br>
+<br>
+
+<h1 data-expectedlabel="Call us" data-testname="heading name from content with text-transform:none" class="ex" style="text-transform:none;">Call us</h1>
+<h1 data-expectedlabel="CALL US" data-testname="heading name from content with text-transform:uppercase" class="ex" style="text-transform:uppercase;">Call us</h1>
+<h1 data-expectedlabel="Call Us" data-testname="heading name from content with text-transform:capitalize" class="ex" style="text-transform:capitalize;">Call us</h1>
+<h1 data-expectedlabel="call us" data-testname="heading name from content with text-transform:lowercase" class="ex" style="text-transform:lowercase;">Call us</h1>
+
+<script>
+AriaUtils.verifyLabelsBySelector(".ex");
+</script>
+</body>
+</html>