third_party/WebKit/LayoutTests/svg/text/ligature-queries.html - Issue 1847763002: Only synthesize grapheme widths once for surrogate pair characters

Side by Side Diff: third_party/WebKit/LayoutTests/svg/text/ligature-queries.html

Issue 1847763002: Only synthesize grapheme widths once for surrogate pair characters (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Address reviewer comments Created 4 years, 8 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/combining-character-queries.html ('k') | third_party/WebKit/LayoutTests/svg/text/resources/highlightGlyphs.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE HTML>	1 <!DOCTYPE HTML>

2 <meta charset="utf8">	2 <meta charset="utf8">

3 <style>	3 <style>

4 .commonLigatures {	4 .testTextRun {

5 font-variant-ligatures: common-ligatures;	5 font-size: 50px;

6 }	6 }

7 .noselect {	7 #highlightContainer text {

8 -webkit-user-select: none;	8 font-size: 10px;

9 user-select: none;

10 }	9 }

11 </style>	10 </style>

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

13 <defs>	12 <defs>

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

15 </defs>	14 </defs>

16 <g id="container"/>	15 <g id="highlightContainer"/>

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

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

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

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

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

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

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

24 </text>	23 </text>

25 </text>

26 </g>

27 </svg>	24 </svg>

	25 <script src="resources/highlightGlyphs.js"></script>

28 <script>	26 <script>

29 function highlightGlyph(text, index, color) {	27 highlightGlyphs(document.querySelectorAll('.testTextRun'), highlightContaine r);

30 var extent = text.getExtentOfChar(index);	28 </script>

31	29

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