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

Side by Side Diff: third_party/WebKit/LayoutTests/svg/text/combining-character-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/bidi-text-query.svg ('k') | third_party/WebKit/LayoutTests/svg/text/ligature-queries.html » ('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 .testTextRun {	4 .testTextRun {

5 font-size: 35px;	5 font-size: 35px;

6 }	6 }

7 .description {	7 #highlightContainer rect {

8 font-size: 12px;	8 fill-opacity: 0.3;

9 text-anchor: middle;

10 }

11 #highlightContainer text {

12 text-anchor: middle;

13 font-size: 8px;

14 -webkit-user-select: none;

15 user-select: none;

16 }	9 }

17 </style>	10 </style>

18 <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">

19 <g id="highlightContainer"/>	12 <g id="highlightContainer"/>

20 <g>

21 <!-- multiple combining diacritics in LTR -->

22 <text x="50" y="50" class="testTextRun" font-family="cursive">ab̌ č̌</text>

23 <text x="200" y="50" class="testTextRun" font-family="serif">ab̌c ̌̌</text>

24 <text x="350" y="50" class="testTextRun" font-family="sans-serif">ab&#x0 30c;č̌</text>

25	13

26 <!-- multiple combining diacritics in RTL -->	14 <!-- multiple combining diacritics in LTR -->

27 <text x="100" y="125" class="testTextRun" font-family="cursive" directio n="rtl">‏a‏b̌‏č̌</text>	15 <text x="50" y="50" class="testTextRun" font-family="cursive">ab̌c&#x 030c;̌</text>

28 <text x="250" y="125" class="testTextRun" font-family="serif" direction= "rtl">‏a‏b̌‏č̌</text>	16 <text x="200" y="50" class="testTextRun" font-family="serif">ab̌c&#x0 30c;̌</text>

29 <text x="400" y="125" class="testTextRun" font-family="sans-serif" direc tion="rtl">‏a‏b̌‏č̌</text>	17 <text x="350" y="50" class="testTextRun" font-family="sans-serif">ab̌ č̌</text>

30	18

31 <!-- multiple combining diacritics on ligatures in LTR -->	19 <!-- multiple combining diacritics in RTL -->

32 <text x="50" y="200" class="testTextRun" font-family="cursive">fi&#x030c ; ffǐ̌</text>	20 <text x="100" y="125" class="testTextRun" font-family="cursive" direction="r tl">‏a‏b̌‏č̌</text>

33 <text x="200" y="200" class="testTextRun" font-family="serif">fǐ ffǐ̌</text>	21 <text x="250" y="125" class="testTextRun" font-family="serif" direction="rtl ">‏a‏b̌‏č̌</text>

34 <text x="350" y="200" class="testTextRun" font-family="sans-serif">fi&#x 030c; ffǐ̌</text>	22 <text x="400" y="125" class="testTextRun" font-family="sans-serif" direction ="rtl">‏a‏b̌‏č̌</text>

35	23

36 <!-- combining diacritics on ligatures in mixed bidi runs -->	24 <!-- multiple combining diacritics on ligatures in LTR -->

37 <text x="50" y="275" class="testTextRun" font-family="cursive">ff&#x030c ;ــلاff̌</text>	25 <text x="50" y="200" class="testTextRun" font-family="cursive">fǐ ff ǐ̌</text>

38 <text x="200" y="275" class="testTextRun" font-family="serif">ff̌ ــلاff̌</text>	26 <text x="200" y="200" class="testTextRun" font-family="serif">fǐ ffi ̌̌</text>

39 <text x="350" y="275" class="testTextRun" font-family="sans-serif">ff&#x 030c;ــلاff̌</text>	27 <text x="350" y="200" class="testTextRun" font-family="sans-serif">fi&#x030c ; ffǐ̌</text>

40	28

41 <!-- combining diacritics which are wider than characters in mixed bidi runs -->	29 <!-- combining diacritics on ligatures in mixed bidi runs -->

42 <text x="50" y="350" class="testTextRun" font-family="cursive"> ̌ ﶰi̳</text>	30 <text x="50" y="275" class="testTextRun" font-family="cursive">ff̌&#1 600;ـلاff̌</text>

43 <text x="200" y="350" class="testTextRun" font-family="serif"> ̌& #64944;i̳</text>	31 <text x="200" y="275" class="testTextRun" font-family="serif">ff̌&#16 00;ـلاff̌</text>

44 <text x="350" y="350" class="testTextRun" font-family="sans-serif"> &#x0 30c;ﶰi̳</text>	32 <text x="350" y="275" class="testTextRun" font-family="sans-serif">ff&#x030c ;ــلاff̌</text>

45 </g>	33

	34 <!-- combining diacritics which are wider than characters in mixed bidi runs -->

	35 <text x="50" y="350" class="testTextRun" font-family="cursive"> ̌&#64 944;i̳</text>

	36 <text x="200" y="350" class="testTextRun" font-family="serif"> ̌&#649 44;i̳</text>

	37 <text x="350" y="350" class="testTextRun" font-family="sans-serif"> ̌ ﶰi̳</text>

46 </svg>	38 </svg>

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

47 <script>	40 <script>

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

49 var extent = text.getExtentOfChar(index);

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

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

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

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

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

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

56 rectElement.setAttribute("fill-opacity", "0.3");

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

58 document.getElementById("highlightContainer").appendChild(rectElement);

59 // Output the start offset

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

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

62 textElement.setAttribute("y", extent.y + extent.height + 7);

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

64 document.getElementById("highlightContainer").appendChild(textElement);

65 }

66

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

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

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

70 var textElements = document.querySelectorAll(".testTextRun");

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

72 var text = textElements[elemNum];

73 var charCount = text.getNumberOfChars();

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

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

76 }

77 </script>	42 </script>

OLD	NEW