OLD | NEW |
1 Some Text | 1 Some Text |
2 And More Text | 2 And More Text |
3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet e
st sem. Aenean ut neque volutpat, posuere odio at, mollis nibh. Aenean sodales n
ulla et ligula efficitur sollicitudin blandit sed lectus. Duis orci enim, sodale
s ac lectus sed, hendrerit efficitur est. Quisque gravida facilisis viverra. | 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet e
st sem. Aenean ut neque volutpat, posuere odio at, mollis nibh. Aenean sodales n
ulla et ligula efficitur sollicitudin blandit sed lectus. Duis orci enim, sodale
s ac lectus sed, hendrerit efficitur est. Quisque gravida facilisis viverra. |
4 | 4 |
5 Lets have a span | 5 Lets have a span |
6 Rotated text! | 6 Rotated text! |
7 | 7 |
8 | 8 |
9 LayoutTreeNodes result: | 9 LayoutTreeNodes result: |
10 { | 10 { |
11 "layoutTreeNodes": [ | 11 "layoutTreeNodes": [ |
12 { | 12 { |
13 "backendNodeId": 1, | 13 "nodeId": 1, |
14 "boundingBox": { | 14 "boundingBox": { |
15 "x": 0, | 15 "x": 0, |
16 "y": 0, | 16 "y": 0, |
17 "width": 785, | 17 "width": 785, |
18 "height": 600 | 18 "height": 600 |
19 }, | 19 }, |
20 "styleIndex": 0 | 20 "styleIndex": 0 |
21 }, | 21 }, |
22 { | 22 { |
23 "backendNodeId": 2, | 23 "nodeId": 2, |
24 "boundingBox": { | 24 "boundingBox": { |
25 "x": 0, | 25 "x": 0, |
26 "y": 0, | 26 "y": 0, |
27 "width": 785, | 27 "width": 785, |
28 "height": 911 | 28 "height": 911 |
29 }, | 29 }, |
30 "styleIndex": 1 | 30 "styleIndex": 1 |
31 }, | 31 }, |
32 { | 32 { |
33 "backendNodeId": 3, | 33 "nodeId": 9, |
34 "boundingBox": { | 34 "boundingBox": { |
35 "x": 8, | 35 "x": 8, |
36 "y": 8, | 36 "y": 8, |
37 "width": 769, | 37 "width": 769, |
38 "height": 882 | 38 "height": 882 |
39 }, | 39 }, |
40 "styleIndex": 2 | 40 "styleIndex": 2 |
41 }, | 41 }, |
42 { | 42 { |
43 "backendNodeId": 4, | 43 "nodeId": 10, |
44 "boundingBox": { | 44 "boundingBox": { |
45 "x": 8, | 45 "x": 8, |
46 "y": 8, | 46 "y": 8, |
47 "width": 769, | 47 "width": 769, |
48 "height": 882 | 48 "height": 882 |
49 }, | 49 }, |
50 "styleIndex": 2 | 50 "styleIndex": 2 |
51 }, | 51 }, |
52 { | 52 { |
53 "backendNodeId": 5, | 53 "nodeId": 11, |
54 "boundingBox": { | 54 "boundingBox": { |
55 "x": 8, | 55 "x": 8, |
56 "y": 8, | 56 "y": 8, |
57 "width": 769, | 57 "width": 769, |
58 "height": 16 | 58 "height": 16 |
59 }, | 59 }, |
60 "styleIndex": 3 | 60 "styleIndex": 3 |
61 }, | 61 }, |
62 { | 62 { |
63 "backendNodeId": 6, | 63 "nodeId": 12, |
64 "boundingBox": { | 64 "boundingBox": { |
65 "x": 8, | 65 "x": 8, |
66 "y": 8, | 66 "y": 8, |
67 "width": 144, | 67 "width": 144, |
68 "height": 16 | 68 "height": 16 |
69 }, | 69 }, |
70 "layoutText": "Some Text", | 70 "layoutText": "Some Text", |
71 "inlineTextNodes": [ | 71 "inlineTextNodes": [ |
72 { | 72 { |
73 "boundingBox": { | 73 "boundingBox": { |
74 "x": 8, | 74 "x": 8, |
75 "y": 8, | 75 "y": 8, |
76 "width": 144, | 76 "width": 144, |
77 "height": 16 | 77 "height": 16 |
78 }, | 78 }, |
79 "startCharacterIndex": 0, | 79 "startCharacterIndex": 0, |
80 "numCharacters": 9 | 80 "numCharacters": 9 |
81 } | 81 } |
82 ], | 82 ], |
83 "styleIndex": 4 | 83 "styleIndex": 4 |
84 }, | 84 }, |
85 { | 85 { |
86 "backendNodeId": 7, | 86 "nodeId": 13, |
87 "boundingBox": { | 87 "boundingBox": { |
88 "x": 8, | 88 "x": 8, |
89 "y": 568, | 89 "y": 568, |
90 "width": 224, | 90 "width": 224, |
91 "height": 16 | 91 "height": 16 |
92 }, | 92 }, |
93 "layoutText": " And More Text\n ", | 93 "layoutText": " And More Text\n ", |
94 "inlineTextNodes": [ | 94 "inlineTextNodes": [ |
95 { | 95 { |
96 "boundingBox": { | 96 "boundingBox": { |
97 "x": 8, | 97 "x": 8, |
98 "y": 568, | 98 "y": 568, |
99 "width": 224, | 99 "width": 224, |
100 "height": 16 | 100 "height": 16 |
101 }, | 101 }, |
102 "startCharacterIndex": 1, | 102 "startCharacterIndex": 1, |
103 "numCharacters": 14 | 103 "numCharacters": 14 |
104 } | 104 } |
105 ], | 105 ], |
106 "styleIndex": 4 | 106 "styleIndex": 4 |
107 }, | 107 }, |
108 { | 108 { |
109 "backendNodeId": 8, | 109 "nodeId": 14, |
110 "boundingBox": { | 110 "boundingBox": { |
111 "x": 232, | 111 "x": 232, |
112 "y": 24, | 112 "y": 24, |
113 "width": 200, | 113 "width": 200, |
114 "height": 576 | 114 "height": 576 |
115 }, | 115 }, |
116 "styleIndex": 5 | 116 "styleIndex": 5 |
117 }, | 117 }, |
118 { | 118 { |
119 "backendNodeId": 9, | 119 "nodeId": 15, |
120 "boundingBox": { | 120 "boundingBox": { |
121 "x": 232, | 121 "x": 232, |
122 "y": 40, | 122 "y": 40, |
123 "width": 200, | 123 "width": 200, |
124 "height": 480 | 124 "height": 480 |
125 }, | 125 }, |
126 "styleIndex": 6 | 126 "styleIndex": 6 |
127 }, | 127 }, |
128 { | 128 { |
129 "backendNodeId": 10, | 129 "nodeId": 16, |
130 "boundingBox": { | 130 "boundingBox": { |
131 "x": 232, | 131 "x": 232, |
132 "y": 40, | 132 "y": 40, |
133 "width": 192, | 133 "width": 192, |
134 "height": 480 | 134 "height": 480 |
135 }, | 135 }, |
136 "layoutText": "\n Lorem ipsum dolor sit amet, consectetur adipiscin
g elit. Pellentesque sit amet est sem.\n Aenean ut neque volutpat, posuer
e odio at, mollis nibh. Aenean sodales nulla et\n ligula efficitur sollic
itudin blandit sed lectus. Duis orci enim, sodales ac lectus sed,\n hendr
erit efficitur est. Quisque gravida facilisis viverra.\n ", | 136 "layoutText": "\n Lorem ipsum dolor sit amet, consectetur adipiscin
g elit. Pellentesque sit amet est sem.\n Aenean ut neque volutpat, posuer
e odio at, mollis nibh. Aenean sodales nulla et\n ligula efficitur sollic
itudin blandit sed lectus. Duis orci enim, sodales ac lectus sed,\n hendr
erit efficitur est. Quisque gravida facilisis viverra.\n ", |
137 "inlineTextNodes": [ | 137 "inlineTextNodes": [ |
138 { | 138 { |
139 "boundingBox": { | 139 "boundingBox": { |
(...skipping 302 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
442 "width": 128, | 442 "width": 128, |
443 "height": 16 | 443 "height": 16 |
444 }, | 444 }, |
445 "startCharacterIndex": 341, | 445 "startCharacterIndex": 341, |
446 "numCharacters": 8 | 446 "numCharacters": 8 |
447 } | 447 } |
448 ], | 448 ], |
449 "styleIndex": 4 | 449 "styleIndex": 4 |
450 }, | 450 }, |
451 { | 451 { |
452 "backendNodeId": 11, | 452 "nodeId": 17, |
453 "boundingBox": { | 453 "boundingBox": { |
454 "x": 232, | 454 "x": 232, |
455 "y": 536, | 455 "y": 536, |
456 "width": 200, | 456 "width": 200, |
457 "height": 48 | 457 "height": 48 |
458 }, | 458 }, |
459 "styleIndex": 7 | 459 "styleIndex": 7 |
460 }, | 460 }, |
461 { | 461 { |
462 "backendNodeId": 12, | 462 "nodeId": 18, |
463 "boundingBox": { | 463 "boundingBox": { |
464 "x": 272, | 464 "x": 272, |
465 "y": 536, | 465 "y": 536, |
466 "width": 160, | 466 "width": 160, |
467 "height": 16 | 467 "height": 16 |
468 }, | 468 }, |
469 "styleIndex": 8 | 469 "styleIndex": 8 |
470 }, | 470 }, |
471 { | 471 { |
472 "backendNodeId": 13, | 472 "nodeId": 19, |
473 "boundingBox": { | 473 "boundingBox": { |
474 "x": 272, | 474 "x": 272, |
475 "y": 552, | 475 "y": 552, |
476 "width": 144, | 476 "width": 144, |
477 "height": 32 | 477 "height": 32 |
478 }, | 478 }, |
479 "styleIndex": 9 | 479 "styleIndex": 9 |
480 }, | 480 }, |
481 { | 481 { |
482 "backendNodeId": 14, | 482 "nodeId": 20, |
483 "boundingBox": { | 483 "boundingBox": { |
484 "x": 272, | 484 "x": 272, |
485 "y": 552, | 485 "y": 552, |
486 "width": 144, | 486 "width": 144, |
487 "height": 32 | 487 "height": 32 |
488 }, | 488 }, |
489 "layoutText": "Lets have a span", | 489 "layoutText": "Lets have a span", |
490 "inlineTextNodes": [ | 490 "inlineTextNodes": [ |
491 { | 491 { |
492 "boundingBox": { | 492 "boundingBox": { |
(...skipping 12 matching lines...) Expand all Loading... |
505 "width": 96, | 505 "width": 96, |
506 "height": 16 | 506 "height": 16 |
507 }, | 507 }, |
508 "startCharacterIndex": 10, | 508 "startCharacterIndex": 10, |
509 "numCharacters": 6 | 509 "numCharacters": 6 |
510 } | 510 } |
511 ], | 511 ], |
512 "styleIndex": 9 | 512 "styleIndex": 9 |
513 }, | 513 }, |
514 { | 514 { |
515 "backendNodeId": 15, | 515 "nodeId": 21, |
516 "boundingBox": { | |
517 "x": 0, | |
518 "y": 0, | |
519 "width": 0, | |
520 "height": 0 | |
521 }, | |
522 "layoutText": "\n ", | |
523 "styleIndex": 4 | |
524 }, | |
525 { | |
526 "backendNodeId": 16, | |
527 "boundingBox": { | |
528 "x": 0, | |
529 "y": 0, | |
530 "width": 0, | |
531 "height": 0 | |
532 }, | |
533 "layoutText": "\n ", | |
534 "styleIndex": 4 | |
535 }, | |
536 { | |
537 "backendNodeId": 17, | |
538 "boundingBox": { | 516 "boundingBox": { |
539 "x": 92, | 517 "x": 92, |
540 "y": 516, | 518 "y": 516, |
541 "width": 32, | 519 "width": 32, |
542 "height": 200 | 520 "height": 200 |
543 }, | 521 }, |
544 "styleIndex": 10 | 522 "styleIndex": 10 |
545 }, | 523 }, |
546 { | 524 { |
547 "backendNodeId": 18, | 525 "nodeId": 22, |
548 "boundingBox": { | 526 "boundingBox": { |
549 "x": 92, | 527 "x": 92, |
550 "y": 516, | 528 "y": 516, |
551 "width": 32, | 529 "width": 32, |
552 "height": 112 | 530 "height": 112 |
553 }, | 531 }, |
554 "layoutText": "Rotated text!", | 532 "layoutText": "Rotated text!", |
555 "inlineTextNodes": [ | 533 "inlineTextNodes": [ |
556 { | 534 { |
557 "boundingBox": { | 535 "boundingBox": { |
(...skipping 12 matching lines...) Expand all Loading... |
570 "width": 16, | 548 "width": 16, |
571 "height": 80 | 549 "height": 80 |
572 }, | 550 }, |
573 "startCharacterIndex": 8, | 551 "startCharacterIndex": 8, |
574 "numCharacters": 5 | 552 "numCharacters": 5 |
575 } | 553 } |
576 ], | 554 ], |
577 "styleIndex": 11 | 555 "styleIndex": 11 |
578 }, | 556 }, |
579 { | 557 { |
580 "backendNodeId": 19, | 558 "nodeId": 23, |
581 "boundingBox": { | |
582 "x": 10, | |
583 "y": 634, | |
584 "width": 400, | |
585 "height": 200 | |
586 }, | |
587 "styleIndex": 12 | |
588 }, | |
589 { | |
590 "backendNodeId": 20, | |
591 "boundingBox": { | |
592 "x": 18, | |
593 "y": 642, | |
594 "width": 384, | |
595 "height": 184 | |
596 }, | |
597 "styleIndex": 13 | |
598 }, | |
599 { | |
600 "backendNodeId": 21, | |
601 "boundingBox": { | |
602 "x": 18, | |
603 "y": 642, | |
604 "width": 384, | |
605 "height": 16 | |
606 }, | |
607 "styleIndex": 14 | |
608 }, | |
609 { | |
610 "backendNodeId": 22, | |
611 "boundingBox": { | |
612 "x": 8, | |
613 "y": 8, | |
614 "width": 352, | |
615 "height": 16 | |
616 }, | |
617 "layoutText": "\nHello from the iframe.\n", | |
618 "inlineTextNodes": [ | |
619 { | |
620 "boundingBox": { | |
621 "x": 8, | |
622 "y": 8, | |
623 "width": 352, | |
624 "height": 16 | |
625 }, | |
626 "startCharacterIndex": 1, | |
627 "numCharacters": 22 | |
628 } | |
629 ], | |
630 "styleIndex": 4 | |
631 }, | |
632 { | |
633 "backendNodeId": 23, | |
634 "boundingBox": { | 559 "boundingBox": { |
635 "x": 8, | 560 "x": 8, |
636 "y": 632, | 561 "y": 632, |
637 "width": 404, | 562 "width": 404, |
638 "height": 204 | 563 "height": 204 |
639 }, | 564 }, |
640 "styleIndex": 15 | 565 "styleIndex": 12 |
641 }, | 566 }, |
642 { | 567 { |
643 "backendNodeId": 24, | 568 "nodeId": 25, |
644 "boundingBox": { | |
645 "x": 0, | |
646 "y": 0, | |
647 "width": 0, | |
648 "height": 0 | |
649 }, | |
650 "layoutText": "\n ", | |
651 "styleIndex": 4 | |
652 }, | |
653 { | |
654 "backendNodeId": 25, | |
655 "boundingBox": { | 569 "boundingBox": { |
656 "x": 8, | 570 "x": 8, |
657 "y": 857, | 571 "y": 857, |
658 "width": 769, | 572 "width": 769, |
659 "height": 33 | 573 "height": 33 |
660 }, | 574 }, |
661 "styleIndex": 16 | 575 "styleIndex": 13 |
662 }, | |
663 { | |
664 "backendNodeId": 26, | |
665 "boundingBox": { | |
666 "x": 8, | |
667 "y": 857, | |
668 "width": 769, | |
669 "height": 33 | |
670 }, | |
671 "styleIndex": 16 | |
672 }, | |
673 { | |
674 "backendNodeId": 27, | |
675 "boundingBox": { | |
676 "x": 8, | |
677 "y": 857, | |
678 "width": 96, | |
679 "height": 33 | |
680 }, | |
681 "layoutText": "Hi!", | |
682 "inlineTextNodes": [ | |
683 { | |
684 "boundingBox": { | |
685 "x": 8, | |
686 "y": 857.4375, | |
687 "width": 96, | |
688 "height": 32 | |
689 }, | |
690 "startCharacterIndex": 0, | |
691 "numCharacters": 3 | |
692 } | |
693 ], | |
694 "styleIndex": 17 | |
695 }, | |
696 { | |
697 "backendNodeId": 28, | |
698 "boundingBox": { | |
699 "x": 8, | |
700 "y": 857, | |
701 "width": 769, | |
702 "height": 33 | |
703 }, | |
704 "styleIndex": 16 | |
705 } | 576 } |
706 ], | 577 ], |
707 "computedStyles": [ | 578 "computedStyles": [ |
708 { | 579 { |
709 "properties": [ | 580 "properties": [] |
710 { | |
711 "name": "transform", | |
712 "value": "" | |
713 }, | |
714 { | |
715 "name": "transform-origin", | |
716 "value": "" | |
717 }, | |
718 { | |
719 "name": "height", | |
720 "value": "" | |
721 }, | |
722 { | |
723 "name": "width", | |
724 "value": "" | |
725 }, | |
726 { | |
727 "name": "display", | |
728 "value": "" | |
729 }, | |
730 { | |
731 "name": "outline-color", | |
732 "value": "" | |
733 } | |
734 ] | |
735 }, | 581 }, |
736 { | 582 { |
737 "properties": [ | 583 "properties": [ |
738 { | 584 { |
739 "name": "transform", | 585 "name": "transform", |
740 "value": "none" | 586 "value": "none" |
741 }, | 587 }, |
742 { | 588 { |
743 "name": "transform-origin", | 589 "name": "transform-origin", |
744 "value": "392.5px 455.438px" | 590 "value": "392.5px 455.438px" |
(...skipping 297 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1042 ] | 888 ] |
1043 }, | 889 }, |
1044 { | 890 { |
1045 "properties": [ | 891 "properties": [ |
1046 { | 892 { |
1047 "name": "transform", | 893 "name": "transform", |
1048 "value": "none" | 894 "value": "none" |
1049 }, | 895 }, |
1050 { | 896 { |
1051 "name": "transform-origin", | 897 "name": "transform-origin", |
1052 "value": "200px 100px" | |
1053 }, | |
1054 { | |
1055 "name": "height", | |
1056 "value": "200px" | |
1057 }, | |
1058 { | |
1059 "name": "width", | |
1060 "value": "400px" | |
1061 }, | |
1062 { | |
1063 "name": "display", | |
1064 "value": "block" | |
1065 }, | |
1066 { | |
1067 "name": "outline-color", | |
1068 "value": "rgb(0, 0, 0)" | |
1069 } | |
1070 ] | |
1071 }, | |
1072 { | |
1073 "properties": [ | |
1074 { | |
1075 "name": "transform", | |
1076 "value": "none" | |
1077 }, | |
1078 { | |
1079 "name": "transform-origin", | |
1080 "value": "192px 92px" | |
1081 }, | |
1082 { | |
1083 "name": "height", | |
1084 "value": "184px" | |
1085 }, | |
1086 { | |
1087 "name": "width", | |
1088 "value": "384px" | |
1089 }, | |
1090 { | |
1091 "name": "display", | |
1092 "value": "block" | |
1093 }, | |
1094 { | |
1095 "name": "outline-color", | |
1096 "value": "rgb(0, 0, 0)" | |
1097 } | |
1098 ] | |
1099 }, | |
1100 { | |
1101 "properties": [ | |
1102 { | |
1103 "name": "transform", | |
1104 "value": "none" | |
1105 }, | |
1106 { | |
1107 "name": "transform-origin", | |
1108 "value": "192px 8px" | |
1109 }, | |
1110 { | |
1111 "name": "height", | |
1112 "value": "16px" | |
1113 }, | |
1114 { | |
1115 "name": "width", | |
1116 "value": "384px" | |
1117 }, | |
1118 { | |
1119 "name": "display", | |
1120 "value": "block" | |
1121 }, | |
1122 { | |
1123 "name": "outline-color", | |
1124 "value": "rgb(0, 0, 0)" | |
1125 } | |
1126 ] | |
1127 }, | |
1128 { | |
1129 "properties": [ | |
1130 { | |
1131 "name": "transform", | |
1132 "value": "none" | |
1133 }, | |
1134 { | |
1135 "name": "transform-origin", | |
1136 "value": "202px 102px" | 898 "value": "202px 102px" |
1137 }, | 899 }, |
1138 { | 900 { |
1139 "name": "height", | 901 "name": "height", |
1140 "value": "200px" | 902 "value": "200px" |
1141 }, | 903 }, |
1142 { | 904 { |
1143 "name": "width", | 905 "name": "width", |
1144 "value": "400px" | 906 "value": "400px" |
1145 }, | 907 }, |
(...skipping 27 matching lines...) Expand all Loading... |
1173 }, | 935 }, |
1174 { | 936 { |
1175 "name": "display", | 937 "name": "display", |
1176 "value": "block" | 938 "value": "block" |
1177 }, | 939 }, |
1178 { | 940 { |
1179 "name": "outline-color", | 941 "name": "outline-color", |
1180 "value": "rgb(255, 0, 0)" | 942 "value": "rgb(255, 0, 0)" |
1181 } | 943 } |
1182 ] | 944 ] |
1183 }, | |
1184 { | |
1185 "properties": [ | |
1186 { | |
1187 "name": "transform", | |
1188 "value": "none" | |
1189 }, | |
1190 { | |
1191 "name": "transform-origin", | |
1192 "value": "0px 0px" | |
1193 }, | |
1194 { | |
1195 "name": "height", | |
1196 "value": "auto" | |
1197 }, | |
1198 { | |
1199 "name": "width", | |
1200 "value": "auto" | |
1201 }, | |
1202 { | |
1203 "name": "display", | |
1204 "value": "block" | |
1205 }, | |
1206 { | |
1207 "name": "outline-color", | |
1208 "value": "rgb(255, 0, 0)" | |
1209 } | |
1210 ] | |
1211 } | 945 } |
1212 ] | 946 ] |
1213 } | 947 } |
1214 | 948 |
OLD | NEW |