test-synthetic-italic-3.html (2502B)
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-3-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 /* check that the sheared glyphs are still correct when transforms are 26 also in effect */ 27 #test3 { 28 font-style: oblique 25deg; 29 top: 150px; 30 left: 100px; 31 transform: scale(1.5) rotate(45deg) skew(30deg); 32 } 33 /* create a set of background shapes that should be entirely covered by the 34 appropriately sheared Ahem glyphs in the test elements */ 35 .bg { 36 width: 50px; 37 height: 150px; 38 } 39 .inner { 40 /* we shrink the inner red shape slightly to try and avoid pixels 41 "bleeding through" around antialiased glyph edges */ 42 margin: 2px; 43 width: calc(100% - 4px); 44 height: calc(100% - 4px); 45 background-color: red; 46 } 47 #bg3 { 48 top: 150px; 49 left: 100px; 50 /* same transform as the test element, plus skewY for the oblique */ 51 transform: scale(1.5) rotate(45deg) skew(30deg) skewY(25deg); 52 } 53 </style> 54 </head> 55 <body> 56 <p>Test passes if no red shows, just a sheared green block:</p> 57 <div id=bg3 class=bg><div class=inner></div></div> 58 <div id=test3 class=test>ABC</div> 59 </body> 60 </html>