Skip to main content

Browse the archive

https://github.com/web-platform-tests/wpt
26 December 2018, 22:31:15 UTC
Raw File
Tip revision: 52900e8f91575e90ed01bfeacaf8f2ad7c55529d authored by James Graham on 21 March 2018, 15:54:47 UTC
commit f712edbaad27ef27fde23681673a8e7b2e4b8534
Tip revision: 52900e8
ch-units-vrl-006.html 
<!DOCTYPE html>
<meta charset="utf-8">
<title>sideways vertical writing mode and ch unit on table row groups</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#placement">
<link rel="match" href="reference/ch-units-vrl-005-ref.html"
<meta name="assert" content="The font-metric dependent ch unit on table row groups takes the writing mode (with a sideways text-orientation) into account,
                            even though these properties do not apply to that element.">
<style>
table {
  font-size: 20px;
  border-collapse: collapse;
  border: none;
}
td {
  padding: 0;
  background: green;
  height: 5ch;
}
tbody {
  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: orange;
  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>
back to top