зеркало из https://github.com/mozilla/gecko-dev.git
76 строки
2.3 KiB
HTML
76 строки
2.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset=utf-8>
|
||
|
|
<style>
|
||
|
|
@font-face {
|
||
|
|
font-family: test;
|
||
|
|
src: url(../fonts/NotoSansCJKjp-Regular.subset.otf);
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
font-family: test, serif;
|
||
|
|
line-height: 2em;
|
||
|
|
}
|
||
|
|
p {
|
||
|
|
margin: 1em;
|
||
|
|
}
|
||
|
|
span {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.v {
|
||
|
|
writing-mode: vertical-rl;
|
||
|
|
}
|
||
|
|
.halt {
|
||
|
|
font-feature-settings: "halt";
|
||
|
|
/* there are 3 characters in the text that should be affected by 'halt',
|
||
|
|
so if we add 1.5em of padding, the overall width will be the same */
|
||
|
|
padding-inline-end: 1.5em;
|
||
|
|
}
|
||
|
|
.palt {
|
||
|
|
font-feature-settings: "palt";
|
||
|
|
/* 'palt' results in even tighter spacing than 'halt', so we can add a
|
||
|
|
little more padding and the result should still be obscured by the
|
||
|
|
overlaid 'halt' span. (We don't try for an exact match as this involves
|
||
|
|
fractional pixel widths and would be very fragile.) */
|
||
|
|
padding-inline-end: 1.6em;
|
||
|
|
}
|
||
|
|
.vhal {
|
||
|
|
font-feature-settings: "vhal";
|
||
|
|
padding-inline-end: 1.5em;
|
||
|
|
}
|
||
|
|
.vpal {
|
||
|
|
font-feature-settings: "vpal";
|
||
|
|
padding-inline-end: 1.6em;
|
||
|
|
}
|
||
|
|
.red {
|
||
|
|
color: red;
|
||
|
|
background: red;
|
||
|
|
}
|
||
|
|
.green {
|
||
|
|
color: green;
|
||
|
|
background: green;
|
||
|
|
}
|
||
|
|
.overlay {
|
||
|
|
position: relative;
|
||
|
|
offset-block-start: -3em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
There should be no red:
|
||
|
|
<div>
|
||
|
|
<!-- check that the red 'halt' span is entirely hidden by the green default span -->
|
||
|
|
<p><span class="halt red">やっほう、「世界」</p>
|
||
|
|
<p class="overlay"><span class="green">やっほう、「世界」</p>
|
||
|
|
<!-- check that the red 'palt' span is entirely hidden by the green default span -->
|
||
|
|
<p><span class="palt red">やっほう、「世界」</p>
|
||
|
|
<p class="overlay"><span class="green">やっほう、「世界」</p>
|
||
|
|
</div>
|
||
|
|
<div class="v">
|
||
|
|
<!-- check the equivalent vertical-mode features -->
|
||
|
|
<p><span class="vhal red">やっほう、「世界」</p>
|
||
|
|
<p class="overlay"><span class="green">やっほう、「世界」</p>
|
||
|
|
<p><span class="vpal red">やっほう、「世界」</p>
|
||
|
|
<p class="overlay"><span class="green">やっほう、「世界」</p>
|
||
|
|
</div>
|