testing/web-platform/tests/css/css-writing-modes/ch-units-vrl-005.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<!DOCTYPE html>
<meta charset="utf-8">
<title>sideways vertical writing mode and ch unit on table rows</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#placement">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
<link rel="match" href="reference/ch-units-vrl-005-ref.html">
<meta name="assert" content="The font-metric dependent ch unit on table rows takes the writing mode (with a sideways text-orientation) into account,
                            even though theese properties do not apply to that element.">
<style>
table {
  font-size: 20px;
  border-collapse: collapse;
  border: none;
}
td {
  padding: 0;
  background: green;
  height: 5ch;
}
tr {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  line-height: 5ch; /* using the inherited line-height (which the affects the content of the td)
                       instead of directly using the height property,
                       because sizing on table cells is complicated and out of scope for this. */
}

div {
  font-size: 20px;
  color: transparent;
}

/* Sizing the reference divs using the actual 0 (after which the ch unit is based) in the inline dimensions,
   and using the ch unit in the block dimension,
   to make sure that the ch unit itself works well in the general case.
   If it doesn't, or if writing modes don't work, the divs won't be square.
 */
div:nth-of-type(2) {
  background: orange;
  writing-mode: vertical-rl;
  text-orientation: upright;
  width: 5ch;
}
div:nth-of-type(1) {
  background: blue;
  height: 5ch;
  display: inline-block; /* shrinkwrap */
}
</style>
<body>
  <p>Test passes if there is a <strong>green square</strong> below, and if it is the <strong>same size as the blue</strong> one, not the orange one.
  <p>If any of the 3 colored shapes is not a square, or if the orange and blue squares are the same size, the test fails.
  <table><tbody><tr><td>&nbsp;</td></tr></tbody></table>
  <div>00000</div>
  <div>00000</div>
</body>