third_party/WebKit/LayoutTests/svg/text/ligature-queries.html - Issue 1773403002: Update SVG text layout to use shaped glyph data & go fast (O(n^2)->O(n))

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/ligature-queries.html

Issue 1773403002: Update SVG text layout to use shaped glyph data & go fast (O(n^2)->O(n)) (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@1773353003

Patch Set: Fix TestExpectations collision Created 4 years, 9 months ago

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

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/svg/text/lengthAdjust-text-metrics-expected.txt ('k') | third_party/WebKit/Source/core/layout/svg/SVGTextMetrics.h » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE HTML>

	2 <meta charset="utf8">

	3 <style>

	4 .commonLigatures {

	5 font-variant-ligatures: common-ligatures;

	6 }

	7 .noselect {

	8 -webkit-user-select: none;

	9 user-select: none;

	10 }

	11 </style>

	12 <svg width="600px" height="500px" xmlns="http://www.w3.org/2000/svg">

	13 <defs>

	14 <path id="path" d="M 25 400 C 300 400 200 200 500 450" />

	15 </defs>

	16 <g id="container"/>

	17 <g font-family="Arial" font-size="50px">

	18 <text x="25" y="50" class="commonLigatures" font-family="cursive">öh &#x 443;̌eah! fi ffi abcffidef</text>

	19 <text x="25" y="150" class="commonLigatures" font-family="serif">öh &#x4 43;̌eah! fi ffi abcffidef</text>

	20 <text x="25" y="250" class="commonLigatures" font-family="sans-serif">öh у̌eah! fi ffi abcffidef</text>

	21 <use xlink:href="#path" stroke-width="2" stroke="black" fill="transparen t"/>

	22 <text x="25" y="350" class="commonLigatures" font-family="cursive">

	23 <textPath xlink:href="#path">ffiffiffiffiffiffiffiffiffiffiffi</text Path>

	24 </text>

	25 </text>

	26 </g>

	27 </svg>

	28 <script>

	29 function highlightGlyph(text, index, color) {

	30 var extent = text.getExtentOfChar(index);

	31

	32 // Highlight rect that we've selected using the extent information

	33 var rectElement = document.createElementNS("http://www.w3.org/2000/svg", "rect");

	34 rectElement.setAttribute("x", extent.x);

	35 rectElement.setAttribute("y", extent.y);

	36 rectElement.setAttribute("width", extent.width);

	37 rectElement.setAttribute("height", extent.height);

	38 rectElement.setAttribute("fill-opacity", "0.5");

	39 rectElement.setAttribute("fill", color);

	40 document.getElementById("container").appendChild(rectElement);

	41 // Output the start offset

	42 var textElement = document.createElementNS("http://www.w3.org/2000/svg", "text");

	43 textElement.setAttribute("x", extent.x + extent.width / 2);

	44 textElement.setAttribute("y", extent.y + extent.height + 5);

	45 textElement.setAttribute("text-anchor", "middle");

	46 textElement.setAttribute("font-size", 10);

	47 textElement.setAttribute("class", "noselect");

	48 textElement.appendChild(document.createTextNode(index));

	49 document.getElementById("container").appendChild(textElement);

	50 }

	51

	52 var colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet" ];

	53 // Highlight each glyph with a semi-transparent rectangle and

	54 // a number corresponding to the queried character index.

	55 var textElements = document.querySelectorAll("text");

	56 for (var elemNum = 0; elemNum < textElements.length; ++elemNum) {

	57 var text = textElements[elemNum];

	58 var charCount = text.getNumberOfChars();

	59 for (var index = 0; index < charCount; ++index)

	60 highlightGlyph(text, index, colors[index % colors.length]);

	61 }

	62 </script>

OLD	NEW