test-synthetic-italic-2.html (2564B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: Test for synthetic italics in vertical upright mode</title> 5 <meta charset="utf-8" /> 6 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com" /> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <link rel="match" href="test-synthetic-italic-2-ref.html"> 9 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2869#issuecomment-402034497"/> 10 <meta name="assert" content="Synthetic italics in vertical upright mode should skew vertically" /> 11 <style type="text/css"> 12 div { 13 /* use Ahem font which has no italic/oblique face, so that the oblique 14 will be synthesized with the given angle */ 15 font: 50px/1 Ahem; 16 position: absolute; 17 } 18 /* test elements will use Ahem with various values of obliqueness */ 19 .test { 20 writing-mode: vertical-rl; 21 -webkit-text-orientation: upright; 22 text-orientation: upright; 23 color: green; 24 } 25 #test1 { 26 font-style: oblique 14deg; 27 top: 100px; 28 left: 100px; 29 } 30 #test2 { 31 font-style: oblique -45deg; 32 top: 100px; 33 left: 200px; 34 } 35 /* create a set of background shapes that should be entirely covered by the 36 appropriately sheared Ahem glyphs in the test elements */ 37 .bg { 38 width: 50px; 39 height: 150px; 40 } 41 .inner { 42 /* we shrink the inner red shape slightly to try and avoid pixels 43 "bleeding through" around antialiased glyph edges */ 44 margin: 2px; 45 width: calc(100% - 4px); 46 height: calc(100% - 4px); 47 background-color: red; 48 } 49 #bg1 { 50 top: 100px; 51 left: 100px; 52 transform: skewY(14deg); 53 } 54 #bg2 { 55 top: 100px; 56 left: 200px; 57 transform: skewY(-45deg); 58 } 59 </style> 60 </head> 61 <body> 62 <p>Test passes if no red shows, just two sheared green blocks:</p> 63 <div id=bg1 class=bg><div class=inner></div></div> 64 <div id=bg2 class=bg><div class=inner></div></div> 65 <div id=test1 class=test>ABC</div> 66 <div id=test2 class=test>ABC</div> 67 </body> 68 </html>