viewport-units-writing-mode-font-size.html (899B)
1 <!doctype html> 2 <title>font-size depends on writing-mode</title> 3 <meta charset="utf-8"> 4 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 5 <link rel="author" href="https://mozilla.org" title="Mozilla"> 6 <link rel="match" href="viewport-units-writing-mode-font-size-ref.html"> 7 <link rel="help" href="https://drafts.csswg.org/css-values-4/#viewport-relative-lengths"> 8 <style> 9 .test { 10 width: 1em; 11 height: 1em; 12 background-color: green; 13 display: inline-block; 14 } 15 #t1 { 16 writing-mode: vertical-lr; 17 font-size: 1vi; 18 } 19 #t2 { 20 writing-mode: vertical-lr; 21 font-size: 1vb; 22 } 23 #t3 { 24 font-size: 1vi; 25 writing-mode: vertical-lr; 26 } 27 #t4 { 28 font-size: 1vb; 29 writing-mode: vertical-lr; 30 } 31 </style> 32 <div class="test" id="t1"></div> 33 <div class="test" id="t2"></div> 34 <div class="test" id="t3"></div> 35 <div class="test" id="t4"></div>