Switch ui.window.devicePixelRatio from browser logical to physical.

.cirrus.yml

@@ -146,6 +146,7 @@ task:
         - $FRAMEWORK_PATH/flutter/bin/flutter config --local-engine=host_debug_unopt --no-analytics --enable-web
         - $FRAMEWORK_PATH/flutter/bin/flutter pub get --local-engine=host_debug_unopt
         - $FRAMEWORK_PATH/flutter/bin/flutter drive -v --target=test_driver/text_editing_e2e.dart -d web-server --release --browser-name=chrome --local-engine=host_debug_unopt
+        - $FRAMEWORK_PATH/flutter/bin/flutter drive -v --target=test_driver/image_loading_e2e.dart -d web-server --release --browser-name=chrome --local-engine=host_debug_unopt
 
     - name: build_and_test_web_linux_firefox
       compile_host_script: |

e2etests/web/regular_integration_tests/lib/image_loading_main.dart

@@ -0,0 +1,38 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatefulWidget {
+  @override
+  MyAppState createState() => MyAppState();
+}
+
+class MyAppState extends State<MyApp> {
+
+  @override
+  void initState() {
+    super.initState();
+    const MethodChannel channel =
+        OptionalMethodChannel('flutter/web_test_e2e', JSONMethodCodec());
+    channel.invokeMethod<void>(
+      'setDevicePixelRatio',
+      '1.5',
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+        key: const Key('mainapp'),
+        title: 'Integration Test App',
+        home: Image.asset('assets/images/sample_image1.png')
+    );
+  }
+}

e2etests/web/regular_integration_tests/pubspec.yaml

@@ -16,3 +16,7 @@ dev_dependencies:
   e2e: 0.2.4+4
   http: 0.12.0+2
   test: any
+
+flutter:
+  assets:
+    - assets/images/

e2etests/web/regular_integration_tests/test_driver/image_loading_e2e.dart

@@ -0,0 +1,24 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:html' as html;
+import 'package:flutter_test/flutter_test.dart';
+import 'package:regular_integration_tests/image_loading_main.dart' as app;
+
+import 'package:e2e/e2e.dart';
+
+void main() {
+  E2EWidgetsFlutterBinding.ensureInitialized() as E2EWidgetsFlutterBinding;
+
+  testWidgets('Image loads asset variant based on device pixel ratio',
+          (WidgetTester tester) async {
+    app.main();
+    await tester.pumpAndSettle();
+    final html.ImageElement imageElement = html.querySelector('img') as html.ImageElement;
+    expect(imageElement.naturalWidth, 1.5 * 100);
+    expect(imageElement.naturalHeight, 1.5 * 100);
+    expect(imageElement.width, 100);
+    expect(imageElement.height, 100);
+  });
+}

e2etests/web/regular_integration_tests/test_driver/image_loading_e2e_test.dart

@@ -0,0 +1,18 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:io';
+
+import 'package:flutter_driver/flutter_driver.dart';
+
+Future<void> main() async {
+  final FlutterDriver driver = await FlutterDriver.connect();
+
+  final String dataRequest =
+      await driver.requestData(null, timeout: const Duration(seconds: 1));
+  print('result $dataRequest');
+  await driver.close();
+
+  exit(dataRequest == 'pass' ? 0 : 1);
+}

lib/web_ui/lib/src/engine/dom_renderer.dart

@@ -419,12 +419,6 @@ flt-glass-pane * {
     // DOM tree.
     setElementAttribute(_sceneHostElement, 'aria-hidden', 'true');
 
-    // We treat browser pixels as device pixels because pointer events,
-    // position, and sizes all use browser pixel as the unit (i.e. "px" in CSS).
-    // Therefore, as far as the framework is concerned the device pixel ratio
-    // is 1.0.
-    window.debugOverrideDevicePixelRatio(1.0);
-
     if (html.window.visualViewport == null && isWebKit) {
       // Safari sometimes gives us bogus innerWidth/innerHeight values when the
       // page loads. When it changes the values to correct ones it does not

lib/web_ui/lib/src/engine/surface/scene_builder.dart

@@ -97,6 +97,14 @@ class SurfaceSceneBuilder implements ui.SceneBuilder {
     if (matrix4.length != 16) {
       throw ArgumentError('"matrix4" must have 16 entries.');
     }
+    if (_surfaceStack.length == 1) {
+      // Top level transform contains view configuration to scale
+      // scene to devicepixelratio. Use identity instead since web browser
+      // renders using logical device pixels.
+      assert(matrix4[0] == EngineWindow.browserDevicePixelRatio &&
+          matrix4[5] == EngineWindow.browserDevicePixelRatio);
+      matrix4 = Matrix4.identity().storage;
+    }
     return _pushSurface(PersistedTransform(oldLayer, matrix4));
   }
 

lib/web_ui/lib/src/engine/window.dart

@@ -15,19 +15,11 @@ class EngineWindow extends ui.Window {
   }
 
   @override
-  double get devicePixelRatio {
-    if (_debugDevicePixelRatio != null) {
-      return _debugDevicePixelRatio;
-    }
+  double get devicePixelRatio => _debugDevicePixelRatio != null
+      ? _debugDevicePixelRatio
+      : browserDevicePixelRatio;
 
-    if (experimentalUseSkia) {
-      return browserDevicePixelRatio;
-    } else {
-      return 1.0;
-    }
-  }
-
-  /// Returns device pixel ratio returns by browser.
+  /// Returns device pixel ratio returned by browser.
   static double get browserDevicePixelRatio {
     double ratio = html.window.devicePixelRatio;
     // Guard against WebOS returning 0.
@@ -36,12 +28,10 @@ class EngineWindow extends ui.Window {
 
   /// Overrides the default device pixel ratio.
   ///
-  /// This is useful in tests to emulate screens of different dimensions.
-  void debugOverrideDevicePixelRatio(double value) {
-    assert(() {
-      _debugDevicePixelRatio = value;
-      return true;
-    }());
+  /// This is useful in tests to emulate screens of different dimensions
+  /// including integration tests.
+  void overrideDevicePixelRatio(double value) {
+    _debugDevicePixelRatio = value;
   }
 
   double _debugDevicePixelRatio;
@@ -182,6 +172,9 @@ class EngineWindow extends ui.Window {
         textEditing.channel.handleTextInput(data);
         return;
 
+      case 'flutter/web_test_e2e':
+        _handleWebTestEnd2EndMessage(data);
+        return;
       case 'flutter/platform_views':
         if (experimentalUseSkia) {
           rasterizer.viewEmbedder.handlePlatformViewCall(data, callback);
@@ -315,6 +308,19 @@ class EngineWindow extends ui.Window {
   Rasterizer rasterizer = experimentalUseSkia ? Rasterizer(Surface()) : null;
 }
 
+void _handleWebTestEnd2EndMessage(ByteData data) {
+  const MethodCodec codec = JSONMethodCodec();
+  final MethodCall decoded = codec.decodeMethodCall(data);
+  final Map<String, dynamic> message = decoded.arguments;
+  double ratio = double.parse(decoded.arguments);
+  switch(decoded.method) {
+    case 'setDevicePixelRatio':
+      window.overrideDevicePixelRatio(ratio);
+      window.onMetricsChanged();
+      break;
+  }
+}
+
 /// The window singleton.
 ///
 /// `dart:ui` window delegates to this value. However, this value has a wider

lib/web_ui/lib/src/ui/test_embedding.dart

@@ -37,7 +37,7 @@ Future<void> webOnlyInitializeTestDomRenderer({double devicePixelRatio = 3.0}) {
   // The following parameters are hard-coded in Flutter's test embedder. Since
   // we don't have an embedder yet this is the lowest-most layer we can put
   // this stuff in.
-  engine.window.debugOverrideDevicePixelRatio(devicePixelRatio);
+  engine.window.overrideDevicePixelRatio(devicePixelRatio);
   engine.window.webOnlyDebugPhysicalSizeOverride =
       Size(800 * devicePixelRatio, 600 * devicePixelRatio);
   webOnlyScheduleFrameCallback = () {};

lib/web_ui/test/golden_tests/engine/canvas_golden_test.dart

@@ -222,12 +222,15 @@ void main() async {
     );
 
     final SceneBuilder sb = SceneBuilder();
+    sb.pushTransform(Matrix4.diagonal3Values(EngineWindow.browserDevicePixelRatio,
+        EngineWindow.browserDevicePixelRatio, 1.0).storage);
     sb.pushTransform(Matrix4.rotationZ(math.pi / 2).storage);
     sb.pushOffset(0, -500);
     sb.pushClipRect(canvasSize);
     sb.pop();
     sb.pop();
     sb.pop();
+    sb.pop();
     final SurfaceScene scene = sb.build();
     final html.Element sceneElement = scene.webOnlyRootElement;
 

lib/web_ui/test/path_test.dart

@@ -259,7 +259,7 @@ void main() {
   // Regression test for https://github.com/flutter/flutter/issues/44470
   test('Should handle contains for devicepixelratio != 1.0', () {
     js_util.setProperty(html.window, 'devicePixelRatio', 4.0);
-    window.debugOverrideDevicePixelRatio(4.0);
+    window.overrideDevicePixelRatio(4.0);
     final path = Path()
       ..moveTo(50, 0)
       ..lineTo(100, 100)
@@ -268,7 +268,7 @@ void main() {
       ..close();
     expect(path.contains(Offset(50, 50)), isTrue);
     js_util.setProperty(html.window, 'devicePixelRatio', 1.0);
-    window.debugOverrideDevicePixelRatio(1.0);
+    window.overrideDevicePixelRatio(1.0);
     // TODO: Investigate failure on CI. Locally this passes.
     // [Exception... "Failure"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"
   }, skip: browserEngine == BrowserEngine.firefox);