| OLD | NEW |
|---|
| (Empty) |
| 1 <!doctype html> | |
| 2 <head> | |
| 3 <title>line-box-contain: block glyphs replaced</title> | |
| 4 <style> | |
| 5 .test { | |
| 6 -webkit-line-box-contain: block glyphs replaced; | |
| 7 line-box-contain: block glyphs replaced; | |
| 8 font: 64px/1em Ahem; | |
| 9 background-color:red; | |
| 10 width:6em; | |
| 11 overflow:hidden; | |
| 12 } | |
| 13 .goodline { color: green; } | |
| 14 </style> | |
| 15 </head> | |
| 16 <body> | |
| 17 You should see a green rectangle below. If you see any red other than anti-alia
sing, the test has failed. | |
| 18 | |
| 19 <div class="test"> | |
| 20 <!-- | |
| 21 Ahem has 0.2em descent and 0.8em ascent, so 64px Ahem has 12.8px descent and
51.2px ascent. | |
| 22 Since we expand to enclosing integer points, the integer glyph bounds will b
e 65px tall. | |
| 23 As a result, we need 64px of text + 1px of extra border to fill the line box
. | |
| 24 This is not an elegant hack; sorry. | |
| 25 | |
| 26 Warning: this is very sensitive to changes in font code and may need adjustm
ent later. | |
| 27 --> | |
| 28 <span class="goodline" style="border-top: 1px solid green">xxxxx</span><span sty
le="background-color:green; font-size:128px; padding-left:0.5em;"></span><br> | |
| 29 | |
| 30 <span class="goodline" style="font-size:128px; letter-spacing:-0.5em">xxxxx</spa
n><div style="display:inline-block; width:1em;height:2em;vertical-align:bottom;b
ackground-color:green"></div> | |
| 31 </div> | |
| 32 | |
| 33 <p style="-webkit-line-box-contain:block glyphs;line-box-contain: block glyphs;
border:1px solid black">This line should look normal.</p> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1328673003:
Remove -webkit-line-box-contain implementation. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master