third_party/WebKit/LayoutTests/svg/text/bbox-with-glyph-overflow.html - Issue 1505713002: Include glyph overflow in SVG text bounding boxes

Side by Side Diff

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Keyboard Shortcuts

	File
u :	up to issue
j / k :	jump to file after / before current file
J / K :	jump to next file with a comment after / before current file
	Side-by-side diff
i :	toggle intra-line diffs
e :	expand all comments
c :	collapse all comments
s :	toggle showing all comments
n / p :	next / previous diff chunk or comment
N / P :	next / previous comment
<Up> / <Down> :	next / previous line

	Issue
u :	up to list of issues
j / k :	jump to patch after / before current patch
o / <Enter> :	open current patch in side-by-side view
i :	open current patch in unified diff view

	Issue List
j / k :	jump to issue after / before current issue
o / <Enter> :	open current issue

Side by Side Diff: third_party/WebKit/LayoutTests/svg/text/bbox-with-glyph-overflow.html

Issue 1505713002: Include glyph overflow in SVG text bounding boxes (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Compute and store glyph overflow per-fragment Created 5 years ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <style>

	3 text {

	4 font-size: 50px;

	5 font-style: italic;

	6 }

	7 rect {

	8 stroke-width: 1px;

	9 stroke: green;

	10 fill: transparent;

	11 }

	12 #middleGlyphOverhang {

	13 font-family: cursive;

	14 }

	15 </style>

	16 No glyphs should extend outside the rects.<br>

	17 <svg id="svg" width="700" height="500">

	18 <text id="simpleText" x="50" y="50">ffffffff</text>

	19 <text id="textWithSpan" x="50" y="150">ffffff<tspan>ffffff</tspan></text>

	20 <text id="textWithDifferentSizes" x="50" y="250"><tspan font-size="30px">fffff f</tspan><tspan font-size="80px">ffffff</tspan></text>

	21 <text id="rotatedText" x="50" y="350" rotate="20, 40, 60, 80, 100, 120, 140, 1 60, 180, 200, 220, 240, 260, 280, 300, 320, 340, 360, 380">fffffffffffffffffff</ text>

	22 <text id="middleGlyphOverhang" x="50" y="475">'faQ'</text>

	23 </svg>

	24 <script>

	25 [simpleText, textWithSpan, textWithDifferentSizes, rotatedText, middleGlyphOve rhang].forEach(function (textElement) {

	26 var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

	27 rect.setAttribute('x', textElement.getBBox().x);

	28 rect.setAttribute('y', textElement.getBBox().y);

	29 rect.setAttribute('width', textElement.getBBox().width);

	30 rect.setAttribute('height', textElement.getBBox().height);

	31 document.getElementById('svg').appendChild(rect);

	32 });

	33 </script>

OLD	NEW