Skip to content

[web] ClipOp.difference seems to act like ClipOp.intersect #64734

@tvolkert

Description

@tvolkert

Steps to reproduce

Run the following app in web:

import 'dart:ui';

import 'package:flutter/widgets.dart';

void main() {
  runApp(BugReport());
}

class BugReport extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ColoredBox(
      color: const Color(0xffffffff),
      child: Padding(
        padding: EdgeInsets.all(20),
        child: CustomPaint(
          painter: TitledBorderPainter(),
        ),
      ),
    );
  }
}

class TitledBorderPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final Rect titleRect = Rect.fromLTWH(20, 0, 50, 20);
    final Paint paint = Paint()
      ..style = PaintingStyle.stroke
      ..color = const Color(0xff000000)
      ..strokeWidth = 1;

    canvas.save();
    try {
      final Rect borderRect = Rect.fromLTRB(0, 10, size.width, size.height);
      canvas.clipRect(titleRect, clipOp: ClipOp.difference);
      canvas.drawRect(borderRect, paint);
    } finally {
      canvas.restore();
    }

    canvas..drawRect(titleRect, paint);
  }

  @override
  bool shouldRepaint(TitledBorderPainter oldDelegate) => false;
}

Expected behavior

You expect the rendered output to look something like this (as it does on mobile and desktop):

Screen Shot 2020-08-27 at 10 46 31 AM

Actual behavior

The output looks like this:

Screen Shot 2020-08-27 at 10 47 30 AM

Diagnosis

The actual output would be explained by the web engine treating ClipOp.difference as if it were ClipOp.intersect

Other info

This can be seen at http://dartpad.dev/7353ff8c5a05911fab204276cb644ee4

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: fidelityMatching the OEM platforms betterc: renderingUI glitches reported at the engine/skia or impeller rendering levele: web_htmlHTML rendering backend for Webengineflutter/engine related. See also e: labels.found in release: 1.22Found to occur in 1.22has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallywaiting for PR to land (fixed)A fix is in flight

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions