transform_test.dart 11.1 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
Hixie's avatar
Hixie committed
2 3 4
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5 6
import 'dart:math' as math;

Adam Barth's avatar
Adam Barth committed
7
import 'package:flutter_test/flutter_test.dart';
8
import 'package:flutter/rendering.dart';
9
import 'package:flutter/widgets.dart';
10
import 'package:vector_math/vector_math_64.dart';
11 12

void main() {
13
  testWidgets('Transform origin', (WidgetTester tester) async {
14
    bool didReceiveTap = false;
15
    await tester.pumpWidget(
16
      Directionality(
17
        textDirection: TextDirection.ltr,
18
        child: Stack(
19
          children: <Widget>[
20
            Positioned(
21 22
              top: 100.0,
              left: 100.0,
23
              child: Container(
24 25 26 27
                width: 100.0,
                height: 100.0,
                color: const Color(0xFF0000FF),
              ),
28
            ),
29
            Positioned(
30 31
              top: 100.0,
              left: 100.0,
32
              child: Container(
33 34
                width: 100.0,
                height: 100.0,
35 36
                child: Transform(
                  transform: Matrix4.diagonal3Values(0.5, 0.5, 1.0),
37
                  origin: const Offset(100.0, 50.0),
38
                  child: GestureDetector(
39 40 41
                    onTap: () {
                      didReceiveTap = true;
                    },
42
                    child: Container(
43 44
                      color: const Color(0xFF00FFFF),
                    ),
45 46 47 48
                  ),
                ),
              ),
            ),
49 50
          ],
        ),
51
      ),
52
    );
53

54
    expect(didReceiveTap, isFalse);
55
    await tester.tapAt(const Offset(110.0, 110.0));
56
    expect(didReceiveTap, isFalse);
57
    await tester.tapAt(const Offset(190.0, 150.0));
58
    expect(didReceiveTap, isTrue);
59
  });
Hixie's avatar
Hixie committed
60

61
  testWidgets('Transform alignment', (WidgetTester tester) async {
62
    bool didReceiveTap = false;
63
    await tester.pumpWidget(
64
      Directionality(
65
        textDirection: TextDirection.ltr,
66
        child: Stack(
67
          children: <Widget>[
68
            Positioned(
69 70
              top: 100.0,
              left: 100.0,
71
              child: Container(
72 73 74 75
                width: 100.0,
                height: 100.0,
                color: const Color(0xFF0000FF),
              ),
76
            ),
77
            Positioned(
78 79
              top: 100.0,
              left: 100.0,
80
              child: Container(
81 82
                width: 100.0,
                height: 100.0,
83 84
                child: Transform(
                  transform: Matrix4.diagonal3Values(0.5, 0.5, 1.0),
85
                  alignment: const Alignment(1.0, 0.0),
86
                  child: GestureDetector(
87 88 89
                    onTap: () {
                      didReceiveTap = true;
                    },
90
                    child: Container(
91 92
                      color: const Color(0xFF00FFFF),
                    ),
93 94 95 96
                  ),
                ),
              ),
            ),
97 98
          ],
        ),
99
      ),
100
    );
Hixie's avatar
Hixie committed
101

102
    expect(didReceiveTap, isFalse);
103
    await tester.tapAt(const Offset(110.0, 110.0));
104
    expect(didReceiveTap, isFalse);
105
    await tester.tapAt(const Offset(190.0, 150.0));
106
    expect(didReceiveTap, isTrue);
Hixie's avatar
Hixie committed
107 108
  });

109 110 111 112
  testWidgets('Transform AlignmentDirectional alignment', (WidgetTester tester) async {
    bool didReceiveTap = false;

    Widget buildFrame(TextDirection textDirection, AlignmentGeometry alignment) {
113
      return Directionality(
114
        textDirection: textDirection,
115
        child: Stack(
116
          children: <Widget>[
117
            Positioned(
118 119
              top: 100.0,
              left: 100.0,
120
              child: Container(
121 122 123 124 125
                width: 100.0,
                height: 100.0,
                color: const Color(0xFF0000FF),
              ),
            ),
126
            Positioned(
127 128
              top: 100.0,
              left: 100.0,
129
              child: Container(
130 131
                width: 100.0,
                height: 100.0,
132 133
                child: Transform(
                  transform: Matrix4.diagonal3Values(0.5, 0.5, 1.0),
134
                  alignment: alignment,
135
                  child: GestureDetector(
136 137 138
                    onTap: () {
                      didReceiveTap = true;
                    },
139
                    child: Container(
140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179
                      color: const Color(0xFF00FFFF),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      );
    }

    await tester.pumpWidget(buildFrame(TextDirection.ltr, AlignmentDirectional.centerEnd));
    didReceiveTap = false;
    await tester.tapAt(const Offset(110.0, 110.0));
    expect(didReceiveTap, isFalse);
    await tester.tapAt(const Offset(190.0, 150.0));
    expect(didReceiveTap, isTrue);

    await tester.pumpWidget(buildFrame(TextDirection.rtl, AlignmentDirectional.centerStart));
    didReceiveTap = false;
    await tester.tapAt(const Offset(110.0, 110.0));
    expect(didReceiveTap, isFalse);
    await tester.tapAt(const Offset(190.0, 150.0));
    expect(didReceiveTap, isTrue);

    await tester.pumpWidget(buildFrame(TextDirection.ltr, AlignmentDirectional.centerStart));
    didReceiveTap = false;
    await tester.tapAt(const Offset(190.0, 150.0));
    expect(didReceiveTap, isFalse);
    await tester.tapAt(const Offset(110.0, 150.0));
    expect(didReceiveTap, isTrue);

    await tester.pumpWidget(buildFrame(TextDirection.rtl, AlignmentDirectional.centerEnd));
    didReceiveTap = false;
    await tester.tapAt(const Offset(190.0, 150.0));
    expect(didReceiveTap, isFalse);
    await tester.tapAt(const Offset(110.0, 150.0));
    expect(didReceiveTap, isTrue);
  });

180
  testWidgets('Transform offset + alignment', (WidgetTester tester) async {
181
    bool didReceiveTap = false;
182
    await tester.pumpWidget(
183
      Directionality(
184
        textDirection: TextDirection.ltr,
185
        child: Stack(
186
          children: <Widget>[
187
            Positioned(
188 189
              top: 100.0,
              left: 100.0,
190
              child: Container(
191 192 193 194 195
                width: 100.0,
                height: 100.0,
                color: const Color(0xFF0000FF),
              ),
            ),
196
            Positioned(
197 198
              top: 100.0,
              left: 100.0,
199
              child: Container(
200 201
                width: 100.0,
                height: 100.0,
202 203
                child: Transform(
                  transform: Matrix4.diagonal3Values(0.5, 0.5, 1.0),
204
                  origin: const Offset(100.0, 0.0),
205
                  alignment: const Alignment(-1.0, 0.0),
206
                  child: GestureDetector(
207 208 209
                    onTap: () {
                      didReceiveTap = true;
                    },
210
                    child: Container(
211 212 213
                      color: const Color(0xFF00FFFF),
                    ),
                  ),
214 215 216
                ),
              ),
            ),
217
          ],
218
        ),
219 220
      ),
    );
Hixie's avatar
Hixie committed
221

222
    expect(didReceiveTap, isFalse);
223
    await tester.tapAt(const Offset(110.0, 110.0));
224
    expect(didReceiveTap, isFalse);
225
    await tester.tapAt(const Offset(190.0, 150.0));
226
    expect(didReceiveTap, isTrue);
Hixie's avatar
Hixie committed
227
  });
228 229 230

  testWidgets('Composited transform offset', (WidgetTester tester) async {
    await tester.pumpWidget(
231 232
      Center(
        child: SizedBox(
233 234
          width: 400.0,
          height: 300.0,
235 236 237 238
          child: ClipRect(
            child: Transform(
              transform: Matrix4.diagonal3Values(0.5, 0.5, 1.0),
              child: Opacity(
239
                opacity: 0.9,
240
                child: Container(
241
                  color: const Color(0xFF00FF00),
242 243 244 245 246 247 248 249
                ),
              ),
            ),
          ),
        ),
      ),
    );

250
    final List<Layer> layers = tester.layers
251 252 253
      ..retainWhere((Layer layer) => layer is TransformLayer);
    expect(layers.length, 2);
    // The first transform is from the render view.
254
    final TransformLayer layer = layers[1] as TransformLayer;
255
    final Matrix4 transform = layer.transform;
256
    expect(transform.getTranslation(), equals(Vector3(100.0, 75.0, 0.0)));
257
  });
258 259 260

  testWidgets('Transform.rotate', (WidgetTester tester) async {
    await tester.pumpWidget(
261
      Transform.rotate(
262
        angle: math.pi / 2.0,
263
        child: Opacity(opacity: 0.5, child: Container()),
264 265 266 267 268 269 270
      ),
    );

    final List<Layer> layers = tester.layers
      ..retainWhere((Layer layer) => layer is TransformLayer);
    expect(layers.length, 2);
    // The first transform is from the render view.
271
    final TransformLayer layer = layers[1] as TransformLayer;
272 273 274 275 276 277 278 279
    final Matrix4 transform = layer.transform;
    expect(transform.storage, <dynamic>[
      moreOrLessEquals(0.0), 1.0, 0.0, 0.0,
      -1.0, moreOrLessEquals(0.0), 0.0, 0.0,
      0.0, 0.0, 1.0, 0.0,
      700.0, -100.0, 0.0, 1.0,
    ]);
  });
280 281 282

  testWidgets('applyPaintTransform of Transform in Padding', (WidgetTester tester) async {
    await tester.pumpWidget(
283
      Padding(
284 285 286 287 288 289
        padding: const EdgeInsets.only(
          left: 30.0,
          top: 20.0,
          right: 50.0,
          bottom: 70.0,
        ),
290 291
        child: Transform(
          transform: Matrix4.diagonal3Values(2.0, 2.0, 2.0),
292 293 294 295 296 297
          child: const Placeholder(),
        ),
      ),
    );
    expect(tester.getTopLeft(find.byType(Placeholder)), const Offset(30.0, 20.0));
  });
298 299 300

  testWidgets('Transform.translate', (WidgetTester tester) async {
    await tester.pumpWidget(
301
      Transform.translate(
302
        offset: const Offset(100.0, 50.0),
303
        child: Opacity(opacity: 0.5, child: Container()),
304 305 306 307 308 309 310 311 312 313 314 315
      ),
    );

    // This should not cause a transform layer to be inserted.
    final List<Layer> layers = tester.layers
      ..retainWhere((Layer layer) => layer is TransformLayer);
    expect(layers.length, 1); // only the render view
    expect(tester.getTopLeft(find.byType(Container)), const Offset(100.0, 50.0));
  });

  testWidgets('Transform.scale', (WidgetTester tester) async {
    await tester.pumpWidget(
316
      Transform.scale(
317
        scale: 2.0,
318
        child: Opacity(opacity: 0.5, child: Container()),
319 320 321 322 323 324 325
      ),
    );

    final List<Layer> layers = tester.layers
      ..retainWhere((Layer layer) => layer is TransformLayer);
    expect(layers.length, 2);
    // The first transform is from the render view.
326
    final TransformLayer layer = layers[1] as TransformLayer;
327 328 329 330 331 332 333 334 335
    final Matrix4 transform = layer.transform;
    expect(transform.storage, <dynamic>[
      // These are column-major, not row-major.
      2.0, 0.0, 0.0, 0.0,
      0.0, 2.0, 0.0, 0.0,
      0.0, 0.0, 1.0, 0.0,
      -400.0, -300.0, 0.0, 1.0, // it's 1600x1200, centered in an 800x600 square
    ]);
  });
Emmanuel Garcia's avatar
Emmanuel Garcia committed
336 337

  testWidgets('Translated child into translated box - hit test', (WidgetTester tester) async {
338
    final GlobalKey key1 = GlobalKey();
Emmanuel Garcia's avatar
Emmanuel Garcia committed
339 340
    bool _pointerDown = false;
    await tester.pumpWidget(
341
      Transform.translate(
Emmanuel Garcia's avatar
Emmanuel Garcia committed
342
        offset: const Offset(100.0, 50.0),
343
        child: Transform.translate(
Emmanuel Garcia's avatar
Emmanuel Garcia committed
344
          offset: const Offset(1000.0, 1000.0),
345
          child: Listener(
Emmanuel Garcia's avatar
Emmanuel Garcia committed
346 347 348
            onPointerDown: (PointerDownEvent event) {
              _pointerDown = true;
            },
349
            child: Container(
Emmanuel Garcia's avatar
Emmanuel Garcia committed
350 351
              key: key1,
              color: const Color(0xFF000000),
352 353 354
            ),
          ),
        ),
Emmanuel Garcia's avatar
Emmanuel Garcia committed
355 356 357 358 359 360
      ),
    );
    expect(_pointerDown, isFalse);
    await tester.tap(find.byKey(key1));
    expect(_pointerDown, isTrue);
  });
361
}