text-combine-upright-gen-con-001.html (1330B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="utf-8"/> 4 <title>CSS Writing Modes test: text-combine-upright with generated content</title> 5 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"/> 6 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-upright"/> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1604327"/> 8 <link rel="match" href="text-combine-upright-gen-con-001-ref.html"/> 9 <meta name="assert" content="text-combine-upright renders multipe generated content items"/> 10 11 <style> 12 div { 13 writing-mode: vertical-rl; 14 font: 32px serif; 15 margin: 1em; 16 padding: .25em; 17 border: 1px solid gray; 18 } 19 div#test { 20 counter-set: a 3 b 1; 21 } 22 p#a::before { 23 text-combine-upright: all; 24 content: '1'; 25 } 26 p#b::before { 27 text-combine-upright: all; 28 content: '(' '2' ')'; 29 } 30 p#c::before { 31 text-combine-upright: all; 32 content: '(' counter(a, decimal) '.' counter(b, lower-alpha) ')'; 33 } 34 p#d::after { 35 text-combine-upright: all; 36 content: 'h' 'e' 'll' 'o'; 37 } 38 span { 39 text-combine-upright: all; 40 } 41 </style> 42 43 Both boxes should render the same: 44 45 <div> 46 <p><span>1</span>test</p> 47 <p><span>(2)</span>test</p> 48 <p><span>(3.a)</span>test</p> 49 <p>你好<span>hello</span></p> 50 </div> 51 52 <div id=test> 53 <p id=a>test</p> 54 <p id=b>test</p> 55 <p id=c>test</p> 56 <p id=d>你好</p> 57 </div>