Bug 1800437 - Add reftest for text-overflow:ellipsis vs emoji in RTL. r=emilio

Depends on D162095

Differential Revision: https://phabricator.services.mozilla.com/D162096
This commit is contained in:
Jonathan Kew 2022-11-15 14:24:59 +00:00
Родитель 5ff7d28400
Коммит 742ebfab8a
3 изменённых файлов: 73 добавлений и 0 удалений

Просмотреть файл

@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset=utf-8>
<style>
.test {
width: 10em; /* Script below will adjust this. */
}
#measure {
color: transparent;
border: 1px solid transparent;
display: inline-block;
}
p {
border: 1px solid gray;
margin: 10px;
font: 100px/1.5 serif;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
direction: rtl;
}
</style>
<div>
<p class=test>&#x1f310;&#x1f310;&#x1f310;&#x1f310;</p>
<p class=test>&#x1f310;&#x1f310;&#x1f310;&#x2026;</p>
<p class=test>&#x1f310;&#x1f310;&#x1f310;&#x2026;</p>
<p class=test>&#x1f310;&#x1f310;&#x1f310;&#x2026;</p>
<p class=test>&#x1f310;&#x1f310;&#x1f310;&#x2026;</p>
<p id=measure>&#x1f310;</p>
</div>
<script>
/* Set width of the "test" elements to ensure it can fit 4 globe glyphs,
plus half a glyph of extra space. */
measure = document.getElementById("measure");
globeWidth = window.getComputedStyle(measure).width.replace("px", "");
document.styleSheets[0].cssRules[0].style.width = 4.5 * globeWidth + "px";
</script>

Просмотреть файл

@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset=utf-8>
<style>
.test {
width: 10em; /* Script below will adjust this. */
}
#measure {
color: transparent;
border: 1px solid transparent;
display: inline-block;
}
p {
border: 1px solid gray;
margin: 10px;
font: 100px/1.5 serif;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
direction: rtl;
}
</style>
<div>
<p class=test>&#x1f310;&#x1f310;&#x1f310;&#x1f310;</p>
<p class=test>&#x1f310;&#x1f310;&#x1f310;&#x1f310;&#x1f310;</p>
<p class=test>&#x1f310;&#x1f310;&#x1f310;&#x1f310;&#x1f310;&#x1f310;</p>
<p class=test>&#x1f310;&#x1f310;&#x1f310;&#x1f310;&#x1f310;&#x1f310;&#x1f310;</p>
<p class=test>&#x1f310;&#x1f310;&#x1f310;&#x1f310;&#x1f310;&#x1f310;&#x1f310;&#x1f310;</p>
<p id=measure>&#x1f310;</p>
</div>
<script>
/* Set width of the "test" elements to ensure it can fit 4 globe glyphs,
plus half a glyph of extra space. */
measure = document.getElementById("measure");
globeWidth = window.getComputedStyle(measure).width.replace("px", "");
document.styleSheets[0].cssRules[0].style.width = 4.5 * globeWidth + "px";
</script>

Просмотреть файл

@ -2132,3 +2132,4 @@ pref(layout.css.prefers-color-scheme.content-override,2) == 1787127.html 1787127
== 1792643-1.html 1792643-1-ref.html
skip-if(!/^Windows\x20NT\x2010\.0/.test(http.oscpu)) == 1798297-1.html 1798297-1-ref.html
skip-if(!/^Windows\x20NT\x2010\.0/.test(http.oscpu)) != 1798297-1.html 1798297-1-notref.html
== 1800437-1.html 1800437-1-ref.html