Skip to content

Commit

Permalink
Add tests for ::first-letter and ::first-line with MathML (#43334)
Browse files Browse the repository at this point in the history
* Add tests for ::first-letter and ::first-line with MathML

This is related to w3c/mathml-core#211

Note that this does not necessarily aligned with current browser implementations.

* fix indent

* Correct tests as display math elements _should_ apply first-letter/line for non-mathml elements.  Make the 'do not contribute to parents' test use MathML elements

* resolve fred's comments about style consistency and using math elements

* remove space before period nit

---------

Co-authored-by: Brian Kardell <bkardell@gmail.com>
  • Loading branch information
fred-wang and bkardell committed Apr 11, 2024
1 parent 7ffd4f1 commit 58bd6e4
Show file tree
Hide file tree
Showing 8 changed files with 212 additions and 0 deletions.
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>MathML and ::first-line/::first-letter pseudo-elements (reference)</title>
<p>PASS if there is no red.</p>
<ol>
<li>
<math>
<mtext class="firstline"><span>Hello,<br/>World!</span></mtext>
</math>
</li>
<li>
<math>
<mtext class="firstletter">Hello, World!</mtext>
</math>
</li>
</ol>
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>MathML and ::first-line/::first-letter pseudo-elements</title>
<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
<link rel="match" href="first-line-first-letter-pseudo-elements-001-ref.html"/>
<meta name="assert" content="::first-line and ::first-letter do not apply to MathML elements.">
<style>
.firstline::first-line { background: red; }
.firstletter::first-letter { background: red; }
</style>
<p>PASS if there is no red.</p>
<ol>
<li>
<math>
<mtext class="firstline"><span>Hello,<br/>World!</span></mtext>
</math>
</li>
<li>
<math>
<mtext class="firstletter">Hello, World!</mtext>
</math>
</li>
</ol>
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>MathML and ::first-line/::first-letter pseudo-elements (reference)</title>
<style>
.firstline > span { background: lime; }
.firstletter > span { background: lime; }
</style>
<p>PASS if the first line or letter is green.</p>
<ol>
<li>
<div style="display: inline math" class="firstline">
<span>Hello,</span><br/>World!
</div>
</li>
<li>
<div style="display: inline math" class="firstletter">
<span>H</span>ello, World!
</div>
</li>
<li>
<div style="display: block math" class="firstline">
<span>Hello,</span><br/>World!
</div>
</li>
<li>
<div style="display: block math" class="firstletter">
<span>H</span>ello, World!
</div>
</li>
</ol>
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>MathML and ::first-line/::first-letter pseudo-elements</title>
<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
<link rel="match" href="first-line-first-letter-pseudo-elements-002-ref.html"/>
<meta name="assert" content="::first-line and ::first-letter do apply to non-MathML specified display math elements, because their computed values are block/inline flow.">
<style>
.firstline::first-line { background: lime; }
.firstletter::first-letter { background: lime; }
</style>
<p>PASS if the first line or letter is green.</p>
<ol>
<li>
<div style="display: inline math" class="firstline">
Hello,<br/>World!
</div>
</li>
<li>
<div style="display: inline math" class="firstletter">
Hello, World!
</div>
</li>
<li>
<div style="display: block math" class="firstline">
Hello,<br/>World!
</div>
</li>
<li>
<div style="display: block math" class="firstletter">
Hello, World!
</div>
</li>
</ol>
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>MathML and ::first-line/::first-letter pseudo-elements (reference)</title>
<p>PASS if there is no red.</p>
<ol>
<li>
<div class="firstline">
<math style="display: inline math"><mtext>Hello<br>World!</mtext></math>
</li>
<li>
<div class="firstletter">
<math>
<mtext style="display: inline math">Hello<br>World!</mtext>
</math>
</div>
</li>
<li>
<div class="firstline">
<math>
<mtext style="display: block math">Hello<br>World!</mtext>
</math>
</div>
</li>
<li>
<div class="firstletter">
<math>
<mtext style="display: block math">Hello<br>World!</mtext>
</math>
</div>
</li>
</ol>
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>MathML and ::first-line/::first-letter pseudo-elements</title>
<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
<link rel="match" href="first-line-first-letter-pseudo-elements-003-ref.html"/>
<meta name="assert" content="display math elements do not contribute a first formatted line/letter to ancestors.">
<style>
.firstline::first-line { background: red; }
.firstletter::first-letter { background: red; }
</style>
<p>PASS if there is no red.</p>
<ol>
<li>
<div class="firstline">
<math style="display: inline math"><mtext>Hello<br>World!</mtext></math>
</li>
<li>
<div class="firstletter">
<math>
<mtext style="display: inline math">Hello<br>World!</mtext>
</math>
</div>
</li>
<li>
<div class="firstline">
<math>
<mtext style="display: block math">Hello<br>World!</mtext>
</math>
</div>
</li>
<li>
<div class="firstletter">
<math>
<mtext style="display: block math">Hello<br>World!</mtext>
</math>
</div>
</li>
</ol>
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>MathML and ::first-line/::first-letter pseudo-elements (reference)</title>
<style>
.firstline > span { background: lime; }
.firstletter > span { background: lime; }
</style>
<ol>
<li>PASS if first line is green:
<math>
<mtext><span class="firstline"><span>Hello,</span><br/>World!</span></mtext>
</math>
</li>
<li>PASS if first letter is green:
<math>
<mtext><span class="firstletter"><span>H</span>ello, World!</span></mtext>
</math>
</li>
</ol>
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>MathML and ::first-line/::first-letter pseudo-elements</title>
<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
<link rel="match" href="first-line-first-letter-pseudo-elements-004-ref.html"/>
<meta name="assert" content="::first-letter/::first-line works for HTML elements inside MathML.">
<style>
.firstline::first-line { background: lightgreen; }
.firstletter::first-letter { background: lightgreen; }
</style>
<ol>
<li>PASS if first line is green:
<math>
<mtext><span class="firstline">Hello,<br/>World!</span></mtext>
</math>
</li>
<li>PASS if first letter is green:
<math>
<mtext><span class="firstletter">Hello, World!</span></mtext>
</math>
</li>
</ol>

0 comments on commit 58bd6e4

Please sign in to comment.