[css-text] Added 2 hanging-punctuation tests

[TalbotG]

/css/css-text/hanging-punctuation/hanging-punctuation-block-bound-001.html
/css/css-text/hanging-punctuation/reference/hanging-punctuation-block-bound-001-ref.html
/css/css-text/hanging-punctuation/hanging-punctuation-inline-bound-001.html
/css/css-text/hanging-punctuation/reference/hanging-punctuation-inline-bound-001-ref.html

These 2 tests spun from
Issue 4222: [css-text-3] hanging-punctuation effect on inline/block bounds

Credits must go to @stantonma for creating those tests.

At my website, the files are:

http://www.gtalbot.org/BrowserBugsSection/CSS3Text/hanging-punctuation/hanging-punctuation-block-bound-001.html

http://www.gtalbot.org/BrowserBugsSection/CSS3Text/hanging-punctuation/reference/hanging-punctuation-block-bound-001-ref.html

http://www.gtalbot.org/BrowserBugsSection/CSS3Text/hanging-punctuation/hanging-punctuation-inline-bound-001.html

http://www.gtalbot.org/BrowserBugsSection/CSS3Text/hanging-punctuation/reference/hanging-punctuation-inline-bound-001-ref.html

Epiphany 3.32.1.2 (WebKitGTK+ 2.30.3) pass these 2 tests perfectly on my system.

[fantasai]

I have slightly different fonts, I think, and hanging-punctuation-block-bound-001-ref.html does not render as expected on my system. This is because in the test, “す。” are part of the same inline context, whereas in the reference they are not.

The way to fix this is the following:

   <div style="background: lime; border: solid black 3px; color: transparent; position: absolute; z-index: -1; width: 240px">まだよく<br>ています。<br>しかし特</div>
   <div style="border: solid 3px transparent; width: 300px">まだよく<br>ています。<br>しかし特</div>

In the first case, we draw the box (perfectly fitted to the content in the block axis, because it has the same content) but not the text.
In the second case, we draw the text, but into a wider box so the period will fit, and overlap it with the previously-drawn box.

[TalbotG]

In the first case, we draw the box (perfectly fitted to the content in the block axis, because it has the same content) but not the text.
In the second case, we draw the text, but into a wider box so the period will fit, and overlap it with the previously-drawn box.

Here's how it looks (height: 270px and white-space: nowrap have been commented deliberately):
http://www.gtalbot.org/BrowserBugsSection/CSS3Text/hanging-punctuation/reference/hanging-punctuation-block-bound-001.2-ref.html

Another possibility: to force a .woff resource to overcome the font selection issue:

http://www.gtalbot.org/BrowserBugsSection/CSS3Text/hanging-punctuation/hanging-punctuation-block-bound-001-Mplus1p.html

http://www.gtalbot.org/BrowserBugsSection/CSS3Text/hanging-punctuation/reference/hanging-punctuation-block-bound-001-Mplus1p-ref.html

We have already used
src: url("/fonts/mplus-1p-regular.woff") format("woff");
in many css-writing-modes tests so far.

I have decided to go with the update of the test and reference with the Mplus1p variation. If block-bound with Mplus1p variation is okay with you, then I will also use Mplus1p .woff font resource with the inline-bound test and reference.

[TalbotG]

Okay. I have adjusted the reference according to our phone call.

On my website, the new reference is:

http://www.gtalbot.org/BrowserBugsSection/CSS3Text/hanging-punctuation/reference/hanging-punctuation-block-bound-001.4-ref.html

I will adjust the block-bound test and the block-bound reference in the PR in a few min. by removing the .woff font resource idea.

[TalbotG]

https://wpt.fyi/results/css/css-text/hanging-punctuation/hanging-punctuation-block-bound-001.html?label=master

https://wpt.fyi/results/css/css-text/hanging-punctuation/hanging-punctuation-inline-bound-001.html?label=master

There is a font loading problem in Chrome 97 and Firefox 95 but there is no such problem in Edge 97 (although Edge 97 can fails both tests). I do not believe I can do anything about such problem ... otherwise I am not aware of appropriate code addition to overcome this font loading problem at this moment.

[TalbotG]

The font loading problem could be a lack of Japanese fonts on the machines running the tests... Credits to @upsuper

[TalbotG]

Note to myself and adding to my to-do-list:

I should at least add lang="ja" in the <body> of both 2 tests and 2 references.