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

import 'dart:math' as math;

import 'package:flutter/rendering.dart';
8
import '../flutter_test_alternative.dart';
9 10 11

import 'rendering_tester.dart';

12
Offset round(Offset value) {
13
  return Offset(value.dx.roundToDouble(), value.dy.roundToDouble());
14 15 16 17 18
}

void main() {
  test('RenderTransform - identity', () {
    RenderBox inner;
19 20
    final RenderBox sizer = RenderTransform(
      transform: Matrix4.identity(),
21
      alignment: Alignment.center,
22
      child: inner = RenderSizedBox(const Size(100.0, 100.0)),
23
    );
24
    layout(sizer, constraints: BoxConstraints.tight(const Size(100.0, 100.0)), alignment: Alignment.topLeft);
25 26 27 28 29 30 31 32
    expect(inner.globalToLocal(const Offset(0.0, 0.0)), equals(const Offset(0.0, 0.0)));
    expect(inner.globalToLocal(const Offset(100.0, 100.0)), equals(const Offset(100.0, 100.0)));
    expect(inner.globalToLocal(const Offset(25.0, 75.0)), equals(const Offset(25.0, 75.0)));
    expect(inner.globalToLocal(const Offset(50.0, 50.0)), equals(const Offset(50.0, 50.0)));
    expect(inner.localToGlobal(const Offset(0.0, 0.0)), equals(const Offset(0.0, 0.0)));
    expect(inner.localToGlobal(const Offset(100.0, 100.0)), equals(const Offset(100.0, 100.0)));
    expect(inner.localToGlobal(const Offset(25.0, 75.0)), equals(const Offset(25.0, 75.0)));
    expect(inner.localToGlobal(const Offset(50.0, 50.0)), equals(const Offset(50.0, 50.0)));
33 34 35 36
  });

  test('RenderTransform - identity with internal offset', () {
    RenderBox inner;
37 38
    final RenderBox sizer = RenderTransform(
      transform: Matrix4.identity(),
39
      alignment: Alignment.center,
40
      child: RenderPadding(
41
        padding: const EdgeInsets.only(left: 20.0),
42
        child: inner = RenderSizedBox(const Size(80.0, 100.0)),
43 44
      ),
    );
45
    layout(sizer, constraints: BoxConstraints.tight(const Size(100.0, 100.0)), alignment: Alignment.topLeft);
46 47 48 49 50 51 52 53
    expect(inner.globalToLocal(const Offset(0.0, 0.0)), equals(const Offset(-20.0, 0.0)));
    expect(inner.globalToLocal(const Offset(100.0, 100.0)), equals(const Offset(80.0, 100.0)));
    expect(inner.globalToLocal(const Offset(25.0, 75.0)), equals(const Offset(5.0, 75.0)));
    expect(inner.globalToLocal(const Offset(50.0, 50.0)), equals(const Offset(30.0, 50.0)));
    expect(inner.localToGlobal(const Offset(0.0, 0.0)), equals(const Offset(20.0, 0.0)));
    expect(inner.localToGlobal(const Offset(100.0, 100.0)), equals(const Offset(120.0, 100.0)));
    expect(inner.localToGlobal(const Offset(25.0, 75.0)), equals(const Offset(45.0, 75.0)));
    expect(inner.localToGlobal(const Offset(50.0, 50.0)), equals(const Offset(70.0, 50.0)));
54 55 56 57
  });

  test('RenderTransform - translation', () {
    RenderBox inner;
58 59
    final RenderBox sizer = RenderTransform(
      transform: Matrix4.translationValues(50.0, 200.0, 0.0),
60
      alignment: Alignment.center,
61
      child: inner = RenderSizedBox(const Size(100.0, 100.0)),
62
    );
63
    layout(sizer, constraints: BoxConstraints.tight(const Size(100.0, 100.0)), alignment: Alignment.topLeft);
64 65 66 67 68 69 70 71
    expect(inner.globalToLocal(const Offset(0.0, 0.0)), equals(const Offset(-50.0, -200.0)));
    expect(inner.globalToLocal(const Offset(100.0, 100.0)), equals(const Offset(50.0, -100.0)));
    expect(inner.globalToLocal(const Offset(25.0, 75.0)), equals(const Offset(-25.0, -125.0)));
    expect(inner.globalToLocal(const Offset(50.0, 50.0)), equals(const Offset(0.0, -150.0)));
    expect(inner.localToGlobal(const Offset(0.0, 0.0)), equals(const Offset(50.0, 200.0)));
    expect(inner.localToGlobal(const Offset(100.0, 100.0)), equals(const Offset(150.0, 300.0)));
    expect(inner.localToGlobal(const Offset(25.0, 75.0)), equals(const Offset(75.0, 275.0)));
    expect(inner.localToGlobal(const Offset(50.0, 50.0)), equals(const Offset(100.0, 250.0)));
72 73 74 75
  });

  test('RenderTransform - translation with internal offset', () {
    RenderBox inner;
76 77
    final RenderBox sizer = RenderTransform(
      transform: Matrix4.translationValues(50.0, 200.0, 0.0),
78
      alignment: Alignment.center,
79
      child: RenderPadding(
80
        padding: const EdgeInsets.only(left: 20.0),
81
        child: inner = RenderSizedBox(const Size(80.0, 100.0)),
82 83
      ),
    );
84
    layout(sizer, constraints: BoxConstraints.tight(const Size(100.0, 100.0)), alignment: Alignment.topLeft);
85 86 87 88 89 90 91 92
    expect(inner.globalToLocal(const Offset(0.0, 0.0)), equals(const Offset(-70.0, -200.0)));
    expect(inner.globalToLocal(const Offset(100.0, 100.0)), equals(const Offset(30.0, -100.0)));
    expect(inner.globalToLocal(const Offset(25.0, 75.0)), equals(const Offset(-45.0, -125.0)));
    expect(inner.globalToLocal(const Offset(50.0, 50.0)), equals(const Offset(-20.0, -150.0)));
    expect(inner.localToGlobal(const Offset(0.0, 0.0)), equals(const Offset(70.0, 200.0)));
    expect(inner.localToGlobal(const Offset(100.0, 100.0)), equals(const Offset(170.0, 300.0)));
    expect(inner.localToGlobal(const Offset(25.0, 75.0)), equals(const Offset(95.0, 275.0)));
    expect(inner.localToGlobal(const Offset(50.0, 50.0)), equals(const Offset(120.0, 250.0)));
93 94 95 96
  });

  test('RenderTransform - rotation', () {
    RenderBox inner;
97 98
    final RenderBox sizer = RenderTransform(
      transform: Matrix4.rotationZ(math.pi),
99
      alignment: Alignment.center,
100
      child: inner = RenderSizedBox(const Size(100.0, 100.0)),
101
    );
102
    layout(sizer, constraints: BoxConstraints.tight(const Size(100.0, 100.0)), alignment: Alignment.topLeft);
103 104 105 106 107 108 109 110
    expect(round(inner.globalToLocal(const Offset(0.0, 0.0))), equals(const Offset(100.0, 100.0)));
    expect(round(inner.globalToLocal(const Offset(100.0, 100.0))), equals(const Offset(0.0, 0.0)));
    expect(round(inner.globalToLocal(const Offset(25.0, 75.0))), equals(const Offset(75.0, 25.0)));
    expect(round(inner.globalToLocal(const Offset(50.0, 50.0))), equals(const Offset(50.0, 50.0)));
    expect(round(inner.localToGlobal(const Offset(0.0, 0.0))), equals(const Offset(100.0, 100.0)));
    expect(round(inner.localToGlobal(const Offset(100.0, 100.0))), equals(const Offset(0.0, 0.0)));
    expect(round(inner.localToGlobal(const Offset(25.0, 75.0))), equals(const Offset(75.0, 25.0)));
    expect(round(inner.localToGlobal(const Offset(50.0, 50.0))), equals(const Offset(50.0, 50.0)));
111 112 113 114
  });

  test('RenderTransform - rotation with internal offset', () {
    RenderBox inner;
115 116
    final RenderBox sizer = RenderTransform(
      transform: Matrix4.rotationZ(math.pi),
117
      alignment: Alignment.center,
118
      child: RenderPadding(
119
        padding: const EdgeInsets.only(left: 20.0),
120
        child: inner = RenderSizedBox(const Size(80.0, 100.0)),
121 122
      ),
    );
123
    layout(sizer, constraints: BoxConstraints.tight(const Size(100.0, 100.0)), alignment: Alignment.topLeft);
124 125 126 127 128 129 130 131
    expect(round(inner.globalToLocal(const Offset(0.0, 0.0))), equals(const Offset(80.0, 100.0)));
    expect(round(inner.globalToLocal(const Offset(100.0, 100.0))), equals(const Offset(-20.0, 0.0)));
    expect(round(inner.globalToLocal(const Offset(25.0, 75.0))), equals(const Offset(55.0, 25.0)));
    expect(round(inner.globalToLocal(const Offset(50.0, 50.0))), equals(const Offset(30.0, 50.0)));
    expect(round(inner.localToGlobal(const Offset(0.0, 0.0))), equals(const Offset(80.0, 100.0)));
    expect(round(inner.localToGlobal(const Offset(100.0, 100.0))), equals(const Offset(-20.0, 0.0)));
    expect(round(inner.localToGlobal(const Offset(25.0, 75.0))), equals(const Offset(55.0, 25.0)));
    expect(round(inner.localToGlobal(const Offset(50.0, 50.0))), equals(const Offset(30.0, 50.0)));
132 133 134 135
  });

  test('RenderTransform - perspective - globalToLocal', () {
    RenderBox inner;
136
    final RenderBox sizer = RenderTransform(
137
      transform: rotateAroundXAxis(math.pi * 0.25), // at pi/4, we are about 70 pixels high
138
      alignment: Alignment.center,
139
      child: inner = RenderSizedBox(const Size(100.0, 100.0)),
140
    );
141
    layout(sizer, constraints: BoxConstraints.tight(const Size(100.0, 100.0)), alignment: Alignment.topLeft);
142

143 144 145
    expect(round(inner.globalToLocal(const Offset(25.0, 50.0))), equals(const Offset(25.0, 50.0)));
    expect(inner.globalToLocal(const Offset(25.0, 17.0)).dy, greaterThan(0.0));
    expect(inner.globalToLocal(const Offset(25.0, 17.0)).dy, lessThan(10.0));
146 147 148 149 150
    expect(inner.globalToLocal(const Offset(25.0, 83.0)).dy, greaterThan(90.0));
    expect(inner.globalToLocal(const Offset(25.0, 83.0)).dy, lessThan(100.0));
    expect(round(inner.globalToLocal(const Offset(25.0, 17.0))).dy,
        equals(100 - round(inner.globalToLocal(const Offset(25.0, 83.0))).dy));
  });
151 152 153

  test('RenderTransform - perspective - localToGlobal', () {
    RenderBox inner;
154
    final RenderBox sizer = RenderTransform(
155
      transform: rotateAroundXAxis(math.pi * 0.4999), // at pi/2, we're seeing the box on its edge,
156
      alignment: Alignment.center,
157
      child: inner = RenderSizedBox(const Size(100.0, 100.0)),
158
    );
159
    layout(sizer, constraints: BoxConstraints.tight(const Size(100.0, 100.0)), alignment: Alignment.topLeft);
160 161 162

    // the inner widget has a height of about half a pixel at this rotation, so
    // everything should end up around the middle of the outer box.
163 164 165
    expect(inner.localToGlobal(const Offset(25.0, 50.0)), equals(const Offset(25.0, 50.0)));
    expect(round(inner.localToGlobal(const Offset(25.0, 75.0))), equals(const Offset(25.0, 50.0)));
    expect(round(inner.localToGlobal(const Offset(25.0, 100.0))), equals(const Offset(25.0, 50.0)));
166 167 168 169 170
  });
}

Matrix4 rotateAroundXAxis(double a) {
  // 3D rotation transform with alpha=a
171 172 173
  const double x = 1.0;
  const double y = 0.0;
  const double z = 0.0;
174 175
  final double sc = math.sin(a / 2.0) * math.cos(a / 2.0);
  final double sq = math.sin(a / 2.0) * math.sin(a / 2.0);
176
  return Matrix4.fromList(<double>[
177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194
    // col 1
    1.0 - 2.0 * (y * y + z * z) * sq,
    2.0 * (x * y * sq + z * sc),
    2.0 * (x * z * sq - y * sc),
    0.0,
    // col 2
    2.0 * (x * y * sq - z * sc),
    1.0 - 2.0 * (x * x + z * z) * sq,
    2.0 * (y * z * sq + x * sc),
    0.0,
    // col 3
    2.0 * (x * z * sq + y * sc),
    2.0 * (y * z * sq - x * sc),
    1.0 - 2.0 * (x * x + z * z) * sq,
    0.0,
    // col 4
    0.0, 0.0, 0.0, 1.0,
  ]);
195
}