Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

[web] Fix paragraph positioning #18329

Merged
merged 2 commits into from
May 13, 2020
Merged

[web] Fix paragraph positioning #18329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
348909d
Fix text positioning
ferhatb May 13, 2020
399dd7d
Update golden locks
ferhatb May 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/web_ui/dev/goldens_lock.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
repository: https://github.com/flutter/goldens.git
revision: b38daf293027908861f16362b378ca6865518ded
revision: 33b24a20bb9717699b847f633278f2b7bffde875
4 changes: 4 additions & 0 deletions lib/web_ui/lib/src/engine/bitmap_canvas.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -714,6 +714,10 @@ class BitmapCanvas extends EngineCanvas {
rootElement.append(paragraphElement);
}
_children.add(paragraphElement);
// If there is a prior sibling such as img prevent left/top shift.
Copy link
Contributor

@yjbanov yjbanov May 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any information about why this is happening? Would be useful to leave a link explaining what causes the shift.

Copy link
Contributor Author

@ferhatb ferhatb May 13, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No info or chromium bug i could point to. Although position is absolute and the paragraph has transform on it, it is shifting the text vertically down.

Example:
Screen Shot 2020-05-12 at 11 49 50 PM

Copy link
Contributor

@yjbanov yjbanov May 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/me pulling my hair out 🤦

paragraphElement.style
..left = "0px"
..top = "0px";
_closeCurrentCanvas();
}

Expand Down
35 changes: 35 additions & 0 deletions lib/web_ui/test/golden_tests/engine/canvas_image_blend_mode_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,43 @@ void main() async {
maxDiffRatePercent: 8.0);
});
}

// Regression test for https://github.com/flutter/flutter/issues/56971
test('Draws image and paragraph at same vertical position', () async {
final RecordingCanvas rc = RecordingCanvas(
const Rect.fromLTRB(0, 0, 400, 400));
rc.save();
rc.drawRect(Rect.fromLTWH(0, 50, 200, 50), Paint()
..color = white);
rc.drawImage(createTestImage(), Offset(0, 50),
Paint()
..colorFilter = EngineColorFilter.mode(red, BlendMode.srcIn));

final Paragraph paragraph = createTestParagraph();
const double textLeft = 80.0;
const double textTop = 50.0;
const double widthConstraint = 300.0;
paragraph.layout(const ParagraphConstraints(width: widthConstraint));
rc.drawParagraph(paragraph, const Offset(textLeft, textTop));

rc.restore();
await _checkScreenshot(rc, 'canvas_image_blend_and_text',
maxDiffRatePercent: 8.0);
});
}

Paragraph createTestParagraph() {
final ParagraphBuilder builder = ParagraphBuilder(ParagraphStyle(
fontFamily: 'Ahem',
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
fontSize: 14.0,
));
builder.addText('FOO');
return builder.build();
}


// 50x50 pixel flutter logo image.
const String _flutterLogoBase64 =
'iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAKRlWElm'
Expand Down