mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision e45156b5e558c062a609356905c83a0258c516e3
This commit is contained in:
WPT Sync Bot
parent
9f6005be16
commit
5fcf52d946
199 changed files with 4430 additions and 530 deletions
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: hyphenation and text-shaping</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-shaping">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphens-property">
|
||||
<link rel="match" href="reference/hyphens-shaping-001-ref.html">
|
||||
<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when the word is hyphenated.">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'csstest_noto';
|
||||
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
|
||||
}
|
||||
div {
|
||||
font-family: 'csstest_noto';
|
||||
font-size: 3em;
|
||||
line-height: 1; /* Not strictly needed, but it gets quite tall otherwise, so this helps fit the screen. */
|
||||
width: 0;
|
||||
hyphens: manual;
|
||||
margin: 1em auto;
|
||||
}
|
||||
.ref { color: orange; }
|
||||
span { color: transparent; }
|
||||
</style>
|
||||
|
||||
<p>Test passes if the black text is identical to the orange text (except the color).
|
||||
|
||||
<div dir=rtl lang=ug class=ref>ﺩﺍﻣﻴ<br>ﺪﻯ</div>
|
||||
|
||||
<div dir=rtl lang=ug id=test>دامي<span>­</span>دى</div>
|
||||
<!--
|
||||
Using an invisible hyphen because it isn't certain what character the UA will actually use,
|
||||
and we shouldn't fail the reftest because of a mismatch there.
|
||||
See also hyphens-shaping-002.html to check that some character is inserted.
|
||||
-->
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: hyphenation and text-shaping</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-shaping">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphens-property">
|
||||
<link rel="mismatch" href="reference/hyphens-shaping-002-ref.html">
|
||||
<meta name="assert" content="Checks that some kind of hyphen does get inserted in Uyghur. (Complement fo hyphens-shaping-001.html)">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'csstest_noto';
|
||||
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
|
||||
}
|
||||
/* The main text is invisible,
|
||||
but we want to give the UA a chance to use the right hyphen,
|
||||
which may be font dependent.
|
||||
*/
|
||||
div {
|
||||
font-family: 'csstest_noto';
|
||||
font-size: 4em;
|
||||
hyphens: manual;
|
||||
margin: auto;
|
||||
width: 0;
|
||||
}
|
||||
#test { color: transparent; }
|
||||
span { color: black; }
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is something below:
|
||||
|
||||
<div dir=rtl lang=ug id=test>دامي<span>­</span>دى</div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: manual hyphen and span</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||
<meta name="flags" content="">
|
||||
<link rel="match" href="reference/hyphens-span-001-ref.html">
|
||||
<meta name="assert" content="the presence of an unstyled inline element has no effect on text in general and on manual hyhenation in particular">
|
||||
<style>
|
||||
div {
|
||||
border: solid orange;
|
||||
margin: 5px;
|
||||
width: 6ch;
|
||||
hyphens: manual;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
|
||||
|
||||
<div>high­way</div>
|
||||
<div><span>high</span>­way</div>
|
||||
<div><span>high­</span>way</div>
|
||||
<div>high<span>­</span>way</div>
|
||||
<div>high<span>­way</span></div>
|
||||
<div>high­<span>way</span></div>
|
||||
<div><span>high</span>­<span>way</span></div>
|
||||
<div><span>high­wa</span>y</div>
|
||||
<div><span>hi</span>gh­way</div>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: auto hyphen and span</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||
<meta name="flags" content="">
|
||||
<link rel="match" href="reference/hyphens-span-002-ref.html">
|
||||
<meta name="assert" content="the presence of an unstyled inline element has no effect on text in general and on manual hyhenation in particular">
|
||||
<style>
|
||||
div {
|
||||
border: solid orange;
|
||||
margin: 5px;
|
||||
width: 6ch;
|
||||
hyphens: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
|
||||
|
||||
<div lang=en>highway</div>
|
||||
<div lang=en><span>high</span>way</div>
|
||||
<div lang=en>high<span></span>way</div>
|
||||
<div lang=en>high<span>way</span></div>
|
||||
<div lang=en><span>high</span><span>way</span></div>
|
||||
<div lang=en><span>highwa</span>y</div>
|
||||
<div lang=en><span>hi</span>ghway</div>
|
||||
|
||||
<!--
|
||||
This test assumes the presence of "highway"
|
||||
with a hyphenation point between "high" and "way"
|
||||
in the hyphenation dictionary for English
|
||||
in order to be useful,
|
||||
but that assumption is not necessary for the test to be correct:
|
||||
if the word doesn't hyphenate,
|
||||
it will not hyphenate in any of the cases.
|
||||
-->
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'csstest_noto';
|
||||
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
|
||||
}
|
||||
div {
|
||||
font-family: 'csstest_noto';
|
||||
font-size: 3em;
|
||||
line-height: 1; /* Not strictly needed, but it gets quite tall otherwise, so this helps fit the screen. */
|
||||
width: 0;
|
||||
hyphens: manual;
|
||||
margin: 1em auto;
|
||||
}
|
||||
.ref { color: orange; }
|
||||
</style>
|
||||
|
||||
<p>Test passes if the black text is identical to the orange text (except the color).
|
||||
|
||||
<div dir=rtl lang=ug class=ref>ﺩﺍﻣﻴ<br>ﺪﻯ</div>
|
||||
|
||||
<div dir=rtl lang=ug>ﺩﺍﻣﻴ<br>ﺪﻯ</div>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
|
||||
<p>Test passes if there is something below:
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
border: solid orange;
|
||||
margin: 5px;
|
||||
width: 6ch;
|
||||
hyphens: manual;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
|
||||
|
||||
<div>high­way</div>
|
||||
<div>high­way</div>
|
||||
<div>high­way</div>
|
||||
<div>high­way</div>
|
||||
<div>high­way</div>
|
||||
<div>high­way</div>
|
||||
<div>high­way</div>
|
||||
<div>high­way</div>
|
||||
<div>high­way</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
border: solid orange;
|
||||
margin: 5px;
|
||||
width: 6ch;
|
||||
hyphens: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
|
||||
|
||||
<div lang=en>highway</div>
|
||||
<div lang=en>highway</div>
|
||||
<div lang=en>highway</div>
|
||||
<div lang=en>highway</div>
|
||||
<div lang=en>highway</div>
|
||||
<div lang=en>highway</div>
|
||||
<div lang=en>highway</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<style>
|
||||
span {
|
||||
font-size: 3em;
|
||||
color: red;
|
||||
text-shadow: 3px 3px 3px black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the word “example” below is hyphenated, and the hyphen is large, red, and has a shadow
|
||||
|
||||
<div>ex<span>‐</span><br>ample</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<style>
|
||||
span {
|
||||
font-size: 3em;
|
||||
color: red;
|
||||
text-shadow: 3px 3px 3px black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the word “example” below is hyphenated, and the hyphen is large, red, and has a shadow
|
||||
|
||||
<div>ex<span>-</span><br>ample</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: soft hyphen styling</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||
<meta name="flags" content="">
|
||||
<link rel="match" href="reference/shy-styling-001-ref.html">
|
||||
<link rel="match" href="reference/shy-styling-001-alt-ref.html">
|
||||
<meta name="assert" content="hypens inserted where there was a soft-hyphen take on the styles that would have applied to the soft hyphen">
|
||||
<style>
|
||||
div {
|
||||
width: 0ch;
|
||||
hyphens: manual;
|
||||
}
|
||||
span {
|
||||
font-size: 3em;
|
||||
color: red;
|
||||
text-shadow: 3px 3px 3px black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the word “example” below is hyphenated, and the hyphen is large, red, and has a shadow
|
||||
|
||||
<div>ex<span>­</span>ample</div>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: line-break:anywhere and text-shaping</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-shaping">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#line-break-property">
|
||||
<link rel="match" href="reference/line-break-shaping-001-ref.html">
|
||||
<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when a line is broken by line-break:anywhere">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'csstest_noto';
|
||||
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
|
||||
}
|
||||
div {
|
||||
font-family: 'csstest_noto';
|
||||
font-size: 4em;
|
||||
}
|
||||
section {
|
||||
float: left; /* to sizing to the intrinsic min of the ref box*/
|
||||
position: relative;
|
||||
}
|
||||
#ref {
|
||||
border: solid orange;
|
||||
margin: 1rem;
|
||||
}
|
||||
#test {
|
||||
border: solid blue;
|
||||
position: absolute; /* to avoid influencing the size of the section */
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line.
|
||||
<section>
|
||||
<div dir=rtl lang=ar id=ref>ﻋﺎﺋﻠ<br>ﺔ</div>
|
||||
<div dir=rtl lang=ar id=test>عائلة</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test ref</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'csstest_noto';
|
||||
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
|
||||
}
|
||||
div {
|
||||
font-family: 'csstest_noto';
|
||||
font-size: 4em;
|
||||
margin: 1rem;
|
||||
}
|
||||
section {
|
||||
float: left; /* to sizing to the intrinsic min of the ref box*/
|
||||
}
|
||||
#ref { border: solid orange; }
|
||||
#test { border: solid blue; }
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line.
|
||||
<section>
|
||||
<div dir=rtl lang=ar id=ref>ﻋﺎﺋﻠ<br>ﺔ</div>
|
||||
<div dir=rtl lang=ar id=test>ﻋﺎﺋﻠ<br>ﺔ</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: overflow-wrap:break-word and text-shaping</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#word-break-shaping">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property">
|
||||
<link rel="match" href="reference/overflow-wrap-shaping-001-ref.html">
|
||||
<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when a line is broken by overflow-wrap:break-word">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'csstest_noto';
|
||||
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
|
||||
}
|
||||
div {
|
||||
font-family: 'csstest_noto';
|
||||
font-size: 4em;
|
||||
}
|
||||
section {
|
||||
float: left; /* to sizing to the intrinsic min of the ref box*/
|
||||
position: relative;
|
||||
}
|
||||
#ref {
|
||||
border: solid orange;
|
||||
margin: 1rem;
|
||||
}
|
||||
#test {
|
||||
border: solid blue;
|
||||
position: absolute; /* to avoid influencing the size of the section */
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line.
|
||||
<section>
|
||||
<div dir=rtl lang=ar id=ref>ﻋﺎﺋﻠ<br>ﺔ</div>
|
||||
<div dir=rtl lang=ar id=test>عائلة</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: overflow-wrap:anywhere and text-shaping</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#word-break-shaping">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property">
|
||||
<link rel="match" href="reference/overflow-wrap-shaping-001-ref.html">
|
||||
<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when a line is broken by overflow-wrap:anywhere">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'csstest_noto';
|
||||
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
|
||||
}
|
||||
div {
|
||||
font-family: 'csstest_noto';
|
||||
font-size: 4em;
|
||||
}
|
||||
section {
|
||||
float: left; /* to sizing to the intrinsic min of the ref box*/
|
||||
position: relative;
|
||||
}
|
||||
#ref {
|
||||
border: solid orange;
|
||||
margin: 1rem;
|
||||
}
|
||||
#test {
|
||||
border: solid blue;
|
||||
position: absolute; /* to avoid influencing the size of the section */
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line.
|
||||
<section>
|
||||
<div dir=rtl lang=ar id=ref>ﻋﺎﺋﻠ<br>ﺔ</div>
|
||||
<div dir=rtl lang=ar id=test>عائلة</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test ref</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'csstest_noto';
|
||||
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
|
||||
}
|
||||
div {
|
||||
font-family: 'csstest_noto';
|
||||
font-size: 4em;
|
||||
margin: 1rem;
|
||||
}
|
||||
section {
|
||||
float: left; /* to sizing to the intrinsic min of the ref box*/
|
||||
}
|
||||
#ref { border: solid orange; }
|
||||
#test { border: solid blue; }
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line.
|
||||
<section>
|
||||
<div dir=rtl lang=ar id=ref>ﻋﺎﺋﻠ<br>ﺔ</div>
|
||||
<div dir=rtl lang=ar id=test>ﻋﺎﺋﻠ<br>ﺔ</div>
|
||||
</section>
|
||||
|
|
@ -3,20 +3,16 @@
|
|||
<title>test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<style>
|
||||
aside {
|
||||
float: left;
|
||||
background: blue;
|
||||
}
|
||||
div {
|
||||
color: transparent;
|
||||
font-family: Ahem;
|
||||
font-size: 50px;
|
||||
width: 5ch;
|
||||
width: 3ch;
|
||||
height: 2ch;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a single blue rectangle below.
|
||||
<p>Test passes if there is a single green rectangle below and no red.
|
||||
<div>
|
||||
<aside class=own>X</aside>
|
||||
<aside class=owbw>X</aside>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@
|
|||
<title>CSS test Reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
|
||||
<p>This test passes if you can see the word PASS below, without any extra spaces.
|
||||
<p>This test passes if the letters below are spaced equally.
|
||||
|
||||
<div>PASS</div>
|
||||
<div>X X X X</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS test Reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if there is a green rectangle and no red.
|
||||
|
||||
<div>X<br>X<br>X<br>X</div>
|
||||
|
|
@ -6,25 +6,25 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<meta name="flags" content="">
|
||||
<link rel="match" href="reference/white-space-intrinsic-size-004-ref.html">
|
||||
<meta name="assert" content="Preserved spaces at the end of the line do not affect the intrinsic max-content size when white-space is pre-wrap. The value of overflow-wrap makes no difference.">
|
||||
<meta name="assert" content="Preserved spaces at the end of the line do affect the intrinsic max-content size when white-space is pre-wrap, as hanging does not prevent contributing to the max-content size. The value of overflow-wrap makes no difference.">
|
||||
<style>
|
||||
aside {
|
||||
float: left;
|
||||
white-space: pre-wrap;
|
||||
background: blue;
|
||||
margin-bottom: 1em;
|
||||
background: green;
|
||||
}
|
||||
aside:last-of-type { overflow-wrap: break-word; }
|
||||
div {
|
||||
background: red;
|
||||
color: transparent;
|
||||
font-family: Ahem;
|
||||
font-size: 50px;
|
||||
width: 3ch; /* enough room for both floats if their max-content size does not include the preserved spaces,
|
||||
but not enough if they do, causing a line break in that case. */
|
||||
width: 3ch;
|
||||
height: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a single blue rectangle below.
|
||||
<p>Test passes if there is a single green rectangle below and no red.
|
||||
<div>
|
||||
<aside>X </aside>
|
||||
<aside>X </aside>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-002-ref.html">
|
||||
<meta name="assert" content="Preserved white space at the end of the line is hanged when white-space is pre-wrap, and therefore does not count when computing the (maximum) intrinsic size.">
|
||||
<meta name="assert" content="Hanging preserved white space at the end of the line when white-space is pre-wrap has no effect on the max-content size.">
|
||||
|
||||
<style>
|
||||
span {
|
||||
|
|
@ -15,6 +15,6 @@ span {
|
|||
#s2 { text-align: center; }
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below, without any extra spaces.
|
||||
<p>This test passes if the letters below are spaced equally.
|
||||
|
||||
<div><span id=s1>P </span><span id=s2>A </span>SS</div>
|
||||
<div><span id=s1>X </span><span id=s2>X </span>X X</div>
|
||||
|
|
|
|||
|
|
@ -3,25 +3,19 @@
|
|||
<title>CSS Text test: intrinsic minimum sizing of trailing spaces with white-space:pre-wrap</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-002-ref.html">
|
||||
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-003-ref.html">
|
||||
<meta name="assert" content="Preserved white space at the end of the line is hanged when white-space is pre-wrap, and therefore does not count when computing the (minimum) intrinsic size.">
|
||||
|
||||
<style>
|
||||
/* Make the table invisible */
|
||||
table { border-collapse: collapse; }
|
||||
td { padding: 0; }
|
||||
|
||||
/* for the content of the table to be sized to their mininum intrinsic size */
|
||||
table { width: 0; }
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
white-space: pre-wrap;
|
||||
width: min-content;
|
||||
color: green;
|
||||
background: red;
|
||||
}
|
||||
#s1 { text-align: right; }
|
||||
#s2 { text-align: center; }
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below, without any extra spaces.
|
||||
<p>This test passes if there is a green rectangle and no red.
|
||||
|
||||
<table><td><span id=s1>P </span><td><span id=s2>A </span><td>SS</table>
|
||||
<div>X X X X</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue