DEV/flutter_flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[web] Migrate Flutter Web DOM usage to JS static interop - 17. (flutter/engine#33338)

Browse Source
This commit is contained in:
joshualitt 2022-05-23 11:11:59 -07:00 committed by GitHub
parent 301f4ff8e9
commit 07aee8301f
45 changed files with 210 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart
View File

@ -261,7 +261,7 @@ class HtmlViewEmbedder {
DomElement headClipView,
) {
int indexInFlutterView = -1;
if (headClipView.parentElement != null) {
if (headClipView.parent != null) {
indexInFlutterView = skiaSceneHost!.children.indexOf(headClipView);
headClipView.remove();
}
@ -269,7 +269,7 @@ class HtmlViewEmbedder {
int clipIndex = 0;
// Re-use as much existing clip views as needed.
while (head != headClipView && clipIndex < numClips) {
head = head.parentElement!;
head = head.parent!;
clipIndex++;
}
// If there weren't enough existing clip views, add more.
@ -329,7 +329,7 @@ class HtmlViewEmbedder {
case MutatorType.clipRect:
case MutatorType.clipRRect:
case MutatorType.clipPath:
final DomElement clipView = head.parentElement!;
final DomElement clipView = head.parent!;
clipView.style.clip = '';
clipView.style.clipPath = '';
headTransform = Matrix4.identity();

32
engine/src/flutter/lib/web_ui/lib/src/engine/dom.dart
View File

@ -24,6 +24,7 @@ class DomWindow {}
extension DomWindowExtension on DomWindow {
external DomConsole get console;
external num get devicePixelRatio;
external DomDocument get document;
external int? get innerHeight;
external int? get innerWidth;
@ -134,8 +135,12 @@ extension DomProgressEventExtension on DomProgressEvent {
class DomNode extends DomEventTarget {}
extension DomNodeExtension on DomNode {
external DomNode? get firstChild;
external String get innerText;
external DomNode? get lastChild;
external DomNode appendChild(DomNode node);
external DomElement? get parentElement;
DomElement? get parent => js_util.getProperty(this, 'parentElement');
String? get text => js_util.getProperty(this, 'textContent');
external DomNode? get parentNode;
external DomNode insertBefore(DomNode newNode, DomNode? referenceNode);
void remove() {
@ -218,6 +223,19 @@ extension DomCSSStyleDeclarationExtension on DomCSSStyleDeclaration {
setProperty('font-feature-settings', value, '');
set fontVariationSettings(String value) =>
setProperty('font-variation-settings', value, '');
set visibility(String value) => setProperty('visibility', value, '');
set overflow(String value) => setProperty('overflow', value, '');
set boxShadow(String value) => setProperty('box-shadow', value, '');
set borderTopLeftRadius(String value) =>
setProperty('border-top-left-radius', value, '');
set borderTopRightRadius(String value) =>
setProperty('border-top-right-radius', value, '');
set borderBottomLeftRadius(String value) =>
setProperty('border-bottom-left-radius', value, '');
set borderBottomRightRadius(String value) =>
setProperty('border-bottom-right-radius', value, '');
set borderRadius(String value) => setProperty('border-radius', value, '');
set perspective(String value) => setProperty('perspective', value, '');
String get width => getPropertyValue('width');
String get height => getPropertyValue('height');
String get position => getPropertyValue('position');
@ -249,6 +267,18 @@ extension DomCSSStyleDeclarationExtension on DomCSSStyleDeclaration {
String get fontFeatureSettings => getPropertyValue('font-feature-settings');
String get fontVariationSettings =>
getPropertyValue('font-variation-settings');
String get visibility => getPropertyValue('visibility');
String get overflow => getPropertyValue('overflow');
String get boxShadow => getPropertyValue('box-shadow');
String get borderTopLeftRadius => getPropertyValue('border-top-left-radius');
String get borderTopRightRadius =>
getPropertyValue('border-top-right-radius');
String get borderBottomLeftRadius =>
getPropertyValue('border-bottom-left-radius');
String get borderBottomRightRadius =>
getPropertyValue('border-bottom-right-radius');
String get borderRadius => getPropertyValue('border-radius');
String get perspective => getPropertyValue('perspective');
external String getPropertyValue(String property);
void setProperty(String propertyName, String value, [String? priority]) {

4
engine/src/flutter/lib/web_ui/lib/src/engine/engine_canvas.dart
View File

@ -23,7 +23,7 @@ import 'vector_math.dart';
/// This can be used either as an interface or super-class.
abstract class EngineCanvas {
/// The element that is attached to the DOM.
html.Element get rootElement;
DomElement get rootElement;
void dispose() {
clear();
@ -296,7 +296,7 @@ mixin SaveElementStackTracking on EngineCanvas {
/// The element at the top of the element stack, or [rootElement] if the stack
/// is empty.
html.Element get currentElement =>
_elementStack.isEmpty ? rootElement : _elementStack.last;
_elementStack.isEmpty ? rootElement as html.Element : _elementStack.last;
/// The stack that maintains the DOM elements used to express certain paint
/// operations, such as clips.

4
engine/src/flutter/lib/web_ui/lib/src/engine/html/backdrop_filter.dart
View File

@ -2,8 +2,6 @@
// 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:ui/ui.dart' as ui;
import '../browser_detection.dart';
@ -26,7 +24,7 @@ class PersistedBackdropFilter extends PersistedContainerSurface
/// [rootElement] is used to host child in front of [filterElement] that
/// is transformed to cover background.
@override
html.Element? get childContainer => _childContainer as html.Element?;
DomElement? get childContainer => _childContainer;
DomElement? _childContainer;
DomElement? _filterElement;
ui.Rect? _activeClipBounds;

47
engine/src/flutter/lib/web_ui/lib/src/engine/html/bitmap_canvas.dart
View File

@ -58,7 +58,7 @@ class BitmapCanvas extends EngineCanvas {
static const int kPaddingPixels = 1;
@override
final html.Element rootElement = html.Element.tag('flt-canvas');
final DomElement rootElement = createDomElement('flt-canvas');
final CanvasPool _canvasPool;
@ -239,7 +239,7 @@ class BitmapCanvas extends EngineCanvas {
for (int i = 0; i < len; i++) {
final html.Element child = _children[i];
// Don't remove children that have been reused by CrossFrameCache.
if (child.parent == rootElement) {
if (child.parent == rootElement as html.Element) {
child.remove();
}
}
@ -458,11 +458,11 @@ class BitmapCanvas extends EngineCanvas {
ui.Offset.zero,
transformWithOffset(_canvasPool.currentTransform, offset));
for (final html.Element clipElement in clipElements) {
rootElement.append(clipElement);
rootElement.append(clipElement as DomElement);
_children.add(clipElement);
}
} else {
rootElement.append(element);
rootElement.append(element as DomElement);
_children.add(element);
}
final ui.BlendMode? blendMode = paint.blendMode;
@ -675,7 +675,7 @@ class BitmapCanvas extends EngineCanvas {
final List<html.Element> clipElements = _clipContent(
_canvasPool.clipStack!, imgElement, p, _canvasPool.currentTransform);
for (final html.Element clipElement in clipElements) {
rootElement.append(clipElement);
rootElement.append(clipElement as DomElement);
_children.add(clipElement);
}
} else {
@ -687,7 +687,7 @@ class BitmapCanvas extends EngineCanvas {
// Reset width/height since they may have been previously set.
..removeProperty('width')
..removeProperty('height');
rootElement.append(imgElement);
rootElement.append(imgElement as DomElement);
_children.add(imgElement);
}
return imgElement;
@ -851,7 +851,7 @@ class BitmapCanvas extends EngineCanvas {
SurfacePaintData paint) {
// For srcIn blendMode, we use an svg filter to apply to image element.
final SvgFilter svgFilter = svgFilterFromBlendMode(filterColor, colorFilterBlendMode);
rootElement.append(svgFilter.element);
rootElement.append(svgFilter.element as DomElement);
_children.add(svgFilter.element);
final html.HtmlElement imgElement = _reuseOrCreateImage(image);
imgElement.style.filter = 'url(#${svgFilter.id})';
@ -866,7 +866,7 @@ class BitmapCanvas extends EngineCanvas {
HtmlImage image, List<double> matrix, SurfacePaintData paint) {
// For srcIn blendMode, we use an svg filter to apply to image element.
final SvgFilter svgFilter = svgFilterFromColorMatrix(matrix);
rootElement.append(svgFilter.element);
rootElement.append(svgFilter.element as DomElement);
_children.add(svgFilter.element);
final html.HtmlElement imgElement = _reuseOrCreateImage(image);
imgElement.style.filter = 'url(#${svgFilter.id})';
@ -971,7 +971,7 @@ class BitmapCanvas extends EngineCanvas {
offset,
_canvasPool.currentTransform);
for (final html.Element clipElement in clipElements) {
rootElement.append(clipElement);
rootElement.append(clipElement as DomElement);
_children.add(clipElement);
}
} else {
@ -979,7 +979,7 @@ class BitmapCanvas extends EngineCanvas {
paragraphElement,
transformWithOffset(_canvasPool.currentTransform, offset).storage,
);
rootElement.append(paragraphElement);
rootElement.append(paragraphElement as DomElement);
}
_children.add(paragraphElement);
// If there is a prior sibling such as img prevent left/top shift.
@ -1068,21 +1068,25 @@ class BitmapCanvas extends EngineCanvas {
void endOfPaint() {
_canvasPool.endOfPaint();
_elementCache?.commitFrame();
// Wrap all elements in translate3d (workaround for webkit paint order bug).
if (_contains3dTransform && browserEngine == BrowserEngine.webkit) {
for (final html.Element element in rootElement.children) {
final html.DivElement paintOrderElement = html.DivElement()
// Copy the children list to avoid concurrent modification.
final List<DomElement> children = rootElement.children.toList();
for (final DomElement element in children) {
final DomHTMLDivElement paintOrderElement = createDomHTMLDivElement()
..style.transform = 'translate3d(0,0,0)';
paintOrderElement.append(element);
rootElement.append(paintOrderElement);
_children.add(paintOrderElement);
_children.add(paintOrderElement as html.Element);
}
}
final html.Node? firstChild = rootElement.firstChild;
if (firstChild != null && firstChild is html.HtmlElement &&
firstChild.tagName.toLowerCase() ==
'canvas') {
firstChild.style.zIndex = '-1';
final DomNode? firstChild = rootElement.firstChild;
if (firstChild != null) {
if (domInstanceOfString(firstChild, 'HTMLElement')) {
final DomHTMLElement maybeCanvas = firstChild as DomHTMLElement;
if (maybeCanvas.tagName.toLowerCase() == 'canvas') {
maybeCanvas.style.zIndex = '-1';
}
}
}
}
@ -1368,7 +1372,7 @@ List<html.Element> _clipContent(List<SaveClipEntry> clipStack,
final SaveClipEntry entry = clipStack[clipIndex];
final html.HtmlElement newElement = html.DivElement();
newElement.style.position = 'absolute';
applyWebkitClipFix(newElement);
applyWebkitClipFix(newElement as DomElement);
if (root == null) {
root = newElement;
} else {
@ -1428,7 +1432,8 @@ List<html.Element> _clipContent(List<SaveClipEntry> clipStack,
..transform = matrix4ToCssTransform(newClipTransform)
..transformOrigin = '0 0 0';
final html.Element clipElement =
createSvgClipDef(curElement as html.HtmlElement, entry.path!);
createSvgClipDef(curElement as DomElement, entry.path!) as
html.Element;
clipDefs.add(clipElement);
}
}

38
engine/src/flutter/lib/web_ui/lib/src/engine/html/clip.dart
View File

@ -9,6 +9,7 @@ import 'package:ui/ui.dart' as ui;
import '../dom.dart';
import '../shadow.dart';
import '../svg.dart';
import '../util.dart';
import 'dom_canvas.dart';
import 'painting.dart';
@ -24,7 +25,7 @@ mixin _DomClip on PersistedContainerSurface {
/// [rootElement] is used to compensate for the coordinate system shift
/// introduced by the [rootElement] translation.
@override
html.Element? get childContainer => _childContainer as html.Element?;
DomElement? get childContainer => _childContainer;
DomElement? _childContainer;
@override
@ -58,7 +59,7 @@ mixin _DomClip on PersistedContainerSurface {
_childContainer = null;
}
void applyOverflow(html.Element element, ui.Clip? clipBehaviour) {
void applyOverflow(DomElement element, ui.Clip? clipBehaviour) {
if (!debugShowClipLayers) {
// Hide overflow in production mode. When debugging we want to see the
// clipped picture in full.
@ -160,7 +161,7 @@ class PersistedClipRRect extends PersistedContainerSurface
@override
void apply() {
final html.CssStyleDeclaration style = rootElement!.style;
final DomCSSStyleDeclaration style = rootElement!.style;
style
..left = '${rrect.left}px'
..top = '${rrect.top}px'
@ -235,7 +236,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
}
void _applyColor() {
rootElement!.style.backgroundColor = colorToCssString(color);
rootElement!.style.backgroundColor = colorToCssString(color)!;
}
@override
@ -266,7 +267,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
final String borderRadius =
'${roundRect.tlRadiusX}px ${roundRect.trRadiusX}px '
'${roundRect.brRadiusX}px ${roundRect.blRadiusX}px';
final html.CssStyleDeclaration style = rootElement!.style;
final DomCSSStyleDeclaration style = rootElement!.style;
style
..left = '${roundRect.left}px'
..top = '${roundRect.top}px'
@ -284,7 +285,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
} else {
final ui.Rect? rect = path.toRect();
if (rect != null) {
final html.CssStyleDeclaration style = rootElement!.style;
final DomCSSStyleDeclaration style = rootElement!.style;
style
..left = '${rect.left}px'
..top = '${rect.top}px'
@ -306,7 +307,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
final double ry = ovalRect.height / 2.0;
final String borderRadius =
rx == ry ? '${rx}px ' : '${rx}px ${ry}px ';
final html.CssStyleDeclaration style = rootElement!.style;
final DomCSSStyleDeclaration style = rootElement!.style;
final double left = ovalRect.left;
final double top = ovalRect.top;
style
@ -361,10 +362,10 @@ class PersistedPhysicalShape extends PersistedContainerSurface
_clipElement?.remove();
_svgElement?.remove();
_clipElement = svgClipPath;
rootElement!.append(_clipElement!);
rootElement!.append(_clipElement! as DomElement);
if (elevation == 0.0) {
setClipPath(rootElement!, createSvgClipUrl());
final html.CssStyleDeclaration rootElementStyle = rootElement!.style;
final DomCSSStyleDeclaration rootElementStyle = rootElement!.style;
rootElementStyle
..overflow = ''
..left = '${pathBounds.left}px'
@ -379,7 +380,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
}
setClipPath(childContainer!, createSvgClipUrl());
final html.CssStyleDeclaration rootElementStyle = rootElement!.style;
final DomCSSStyleDeclaration rootElementStyle = rootElement!.style;
rootElementStyle
..overflow = ''
..left = '${pathBounds.left}px'
@ -403,7 +404,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
'${pathBounds2.bottom}');
/// Render element behind the clipped content.
rootElement!.insertBefore(_svgElement!, childContainer);
rootElement!.insertBefore(_svgElement! as DomElement, childContainer);
final SurfaceShadowData shadow = computeShadow(pathBounds, elevation)!;
final ui.Color boxShadowColor = toShadowColor(shadowColor);
@ -444,12 +445,12 @@ class PersistedPhysicalShape extends PersistedContainerSurface
// Reuse clipElement from prior surface.
_clipElement = oldSurface._clipElement;
if (_clipElement != null) {
rootElement!.append(_clipElement!);
rootElement!.append(_clipElement! as DomElement);
}
oldSurface._clipElement = null;
_svgElement = oldSurface._svgElement;
if (_svgElement != null) {
rootElement!.insertBefore(_svgElement!, childContainer);
rootElement!.insertBefore(_svgElement! as DomElement, childContainer);
}
oldSurface._svgElement = null;
}
@ -465,7 +466,7 @@ class PersistedClipPath extends PersistedContainerSurface
final ui.Path clipPath;
final ui.Clip clipBehavior;
html.Element? _clipElement;
DomElement? _clipElement;
@override
DomElement createElement() {
@ -485,7 +486,7 @@ class PersistedClipPath extends PersistedContainerSurface
@override
void apply() {
_clipElement?.remove();
_clipElement = createSvgClipDef(childContainer! as html.HtmlElement, clipPath);
_clipElement = createSvgClipDef(childContainer!, clipPath);
childContainer!.append(_clipElement!);
}
@ -514,10 +515,11 @@ class PersistedClipPath extends PersistedContainerSurface
}
/// Creates an svg clipPath and applies it to [element].
svg.SvgSvgElement createSvgClipDef(html.HtmlElement element, ui.Path clipPath) {
SVGSVGElement createSvgClipDef(DomElement element, ui.Path clipPath) {
final ui.Rect pathBounds = clipPath.getBounds();
final svg.SvgSvgElement svgClipPath = pathToSvgClipPath(clipPath,
scaleX: 1.0 / pathBounds.right, scaleY: 1.0 / pathBounds.bottom);
final SVGSVGElement svgClipPath = pathToSvgClipPath(clipPath,
scaleX: 1.0 / pathBounds.right, scaleY: 1.0 / pathBounds.bottom) as
SVGSVGElement;
setClipPath(element, createSvgClipUrl());
// We need to set width and height for the clipElement to cover the
// bounds of the path since browsers such as Safari and Edge

6
engine/src/flutter/lib/web_ui/lib/src/engine/html/color_filter.dart
View File

@ -24,7 +24,7 @@ class PersistedColorFilter extends PersistedContainerSurface
: super(oldLayer);
@override
html.Element? get childContainer => _childContainer as html.Element?;
DomElement? get childContainer => _childContainer;
/// The dedicated child container element that's separate from the
/// [rootElement] is used to compensate for the coordinate system shift
@ -93,7 +93,7 @@ class PersistedColorFilter extends PersistedContainerSurface
void _applyBlendModeFilter(CkBlendModeColorFilter colorFilter) {
final ui.Color filterColor = colorFilter.color;
ui.BlendMode colorFilterBlendMode = colorFilter.blendMode;
final html.CssStyleDeclaration style = childContainer!.style;
final DomCSSStyleDeclaration style = childContainer!.style;
switch (colorFilterBlendMode) {
case ui.BlendMode.clear:
case ui.BlendMode.dstOut:
@ -144,7 +144,7 @@ class PersistedColorFilter extends PersistedContainerSurface
if (colorFilterBlendMode == ui.BlendMode.saturation ||
colorFilterBlendMode == ui.BlendMode.multiply ||
colorFilterBlendMode == ui.BlendMode.modulate) {
style.backgroundColor = colorToCssString(filterColor);
style.backgroundColor = colorToCssString(filterColor)!;
}
}

3
engine/src/flutter/lib/web_ui/lib/src/engine/html/dom_canvas.dart
View File

@ -10,6 +10,7 @@ import 'dart:typed_data';
import 'package:ui/ui.dart' as ui;
import '../browser_detection.dart';
import '../dom.dart';
import '../engine_canvas.dart';
import '../text/canvas_paragraph.dart';
import '../util.dart';
@ -23,7 +24,7 @@ import 'shaders/shader.dart';
/// A canvas that renders to DOM elements and CSS properties.
class DomCanvas extends EngineCanvas with SaveElementStackTracking {
@override
final html.Element rootElement;
final DomElement rootElement;
DomCanvas(this.rootElement);

2
engine/src/flutter/lib/web_ui/lib/src/engine/html/opacity.dart
View File

@ -50,7 +50,7 @@ class PersistedOpacity extends PersistedContainerSurface
@override
void apply() {
final DomElement element = rootElement! as DomElement;
final DomElement element = rootElement!;
setElementStyle(element, 'opacity', '${alpha / 255}');
element.style.transform = 'translate(${offset.dx}px, ${offset.dy}px)';
}

4
engine/src/flutter/lib/web_ui/lib/src/engine/html/scene_builder.dart
View File

@ -2,11 +2,13 @@
// 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 'dart:typed_data';
import 'package:ui/ui.dart' as ui;
import '../../engine.dart' show kProfileApplyFrame, kProfilePrerollFrame;
import '../dom.dart';
import '../picture.dart';
import '../profiler.dart';
import '../util.dart';
@ -563,7 +565,7 @@ class SurfaceSceneBuilder implements ui.SceneBuilder {
}
commitScene(_persistedScene);
_lastFrameScene = _persistedScene;
return SurfaceScene(_persistedScene.rootElement);
return SurfaceScene(_persistedScene.rootElement as html.Element?);
});
}

2
engine/src/flutter/lib/web_ui/lib/src/engine/html/shader_mask.dart
View File

@ -53,7 +53,7 @@ class PersistedShaderMask extends PersistedContainerSurface
}
@override
html.Element? get childContainer => _childContainer as html.Element?;
DomElement? get childContainer => _childContainer;
@override
void discard() {

24
engine/src/flutter/lib/web_ui/lib/src/engine/html/surface.dart
View File

@ -2,8 +2,6 @@
// 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:meta/meta.dart';
import 'package:ui/ui.dart' as ui;
@ -315,7 +313,7 @@ abstract class PersistedSurface implements ui.EngineLayer {
///
/// This element can be reused across frames. See also, [childContainer],
/// which is the element used to manage child nodes.
html.Element? rootElement;
DomElement? rootElement;
/// Whether this surface can update an existing [oldSurface].
@mustCallSuper
@ -328,7 +326,7 @@ abstract class PersistedSurface implements ui.EngineLayer {
/// By default this is the same as the [rootElement]. However, specialized
/// surface implementations may choose to override this and provide a
/// different element for nesting children.
html.Element? get childContainer => rootElement;
DomElement? get childContainer => rootElement;
/// This surface's immediate parent.
PersistedContainerSurface? parent;
@ -360,7 +358,7 @@ abstract class PersistedSurface implements ui.EngineLayer {
@mustCallSuper
void build() {
if (assertionsEnabled) {
final html.Element? existingElement = rootElement;
final DomElement? existingElement = rootElement;
if (existingElement != null) {
throw PersistedSurfaceException(
this,
@ -370,7 +368,7 @@ abstract class PersistedSurface implements ui.EngineLayer {
}
}
assert(debugAssertSurfaceState(this, PersistedSurfaceState.created));
rootElement = createElement() as html.Element;
rootElement = createElement();
assert(rootElement != null);
applyWebkitClipFix(rootElement);
if (debugExplainSurfaceStats) {
@ -669,7 +667,7 @@ abstract class PersistedContainerSurface extends PersistedSurface {
// Memoize length for efficiency.
final int len = _children.length;
// Memoize container element for efficiency. [childContainer] is polymorphic
final html.Element? containerElement = childContainer;
final DomElement? containerElement = childContainer;
for (int i = 0; i < len; i++) {
final PersistedSurface child = _children[i];
if (child.isPendingRetention) {
@ -774,7 +772,7 @@ abstract class PersistedContainerSurface extends PersistedSurface {
assert(oldSurface._children.isEmpty);
// Memoizing variables for efficiency.
final html.Element? containerElement = childContainer;
final DomElement? containerElement = childContainer;
final int length = _children.length;
for (int i = 0; i < length; i++) {
@ -915,7 +913,7 @@ abstract class PersistedContainerSurface extends PersistedSurface {
assert(_children.isNotEmpty && oldSurface._children.isNotEmpty);
// Memoize container element for efficiency. [childContainer] is polymorphic
final html.Element? containerElement = childContainer;
final DomElement? containerElement = childContainer;
final Map<PersistedSurface?, PersistedSurface> matches =
_matchChildren(oldSurface);
@ -1042,15 +1040,15 @@ abstract class PersistedContainerSurface extends PersistedSurface {
stationaryIndices[i] = indexMapNew![stationaryIndices[i]!];
}
html.HtmlElement? refNode;
final html.Element? containerElement = childContainer;
DomHTMLElement? refNode;
final DomElement? containerElement = childContainer;
for (int i = _children.length - 1; i >= 0; i -= 1) {
final int indexInNew = indexMapNew!.indexOf(i);
final bool isStationary =
indexInNew != -1 && stationaryIndices.contains(i);
final PersistedSurface child = _children[i];
final html.HtmlElement childElement =
child.rootElement! as html.HtmlElement;
final DomHTMLElement childElement =
child.rootElement! as DomHTMLElement;
assert(childElement != null); // ignore: unnecessary_null_comparison
if (!isStationary) {
if (refNode == null) {

5
engine/src/flutter/lib/web_ui/lib/src/engine/shadow.dart
View File

@ -2,12 +2,13 @@
// 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 'dart:math' as math;
import 'package:meta/meta.dart';
import 'package:ui/ui.dart' as ui;
import 'dom.dart';
/// How far is the light source from the surface of the UI.
///
/// Must be kept in sync with `flow/layers/physical_shape_layer.cc`.
@ -131,7 +132,7 @@ SurfaceShadowData? computeShadow(ui.Rect shape, double elevation) {
/// Applies a CSS shadow to the [shape].
void applyCssShadow(
html.Element? element, ui.Rect shape, double elevation, ui.Color color) {
DomElement? element, ui.Rect shape, double elevation, ui.Color color) {
final SurfaceShadowData? shadow = computeShadow(shape, elevation);
if (shadow == null) {
element!.style.boxShadow = 'none';

4
engine/src/flutter/lib/web_ui/lib/src/engine/svg.dart
View File

@ -14,6 +14,10 @@ class SVGElement extends DomElement {}
@staticInterop
class SVGGraphicsElement extends SVGElement {}
@JS()
@staticInterop
class SVGSVGElement extends SVGGraphicsElement {}
@JS()
@staticInterop
class SVGClipPathElement extends SVGGraphicsElement {}

6
engine/src/flutter/lib/web_ui/lib/src/engine/util.dart
View File

@ -494,7 +494,7 @@ Float32List offsetListToFloat32List(List<ui.Offset> offsetList) {
///
/// * Use 3D transform instead of 2D: this does not work because it causes text
/// blurriness: https://github.com/flutter/flutter/issues/32274
void applyWebkitClipFix(html.Element? containerElement) {
void applyWebkitClipFix(DomElement? containerElement) {
if (browserEngine == BrowserEngine.webkit) {
containerElement!.style.zIndex = '0';
}
@ -664,7 +664,7 @@ void setElementStyle(
}
}
void setClipPath(html.Element element, String? value) {
void setClipPath(DomElement element, String? value) {
if (browserEngine == BrowserEngine.webkit) {
if (value == null) {
element.style.removeProperty('-webkit-clip-path');
@ -719,7 +719,7 @@ void drawEllipse(
}
/// Removes all children of a DOM node.
void removeAllChildren(html.Node node) {
void removeAllChildren(DomNode node) {
while (node.lastChild != null) {
node.lastChild!.remove();
}

4
engine/src/flutter/lib/web_ui/test/canvas_test.dart
View File

@ -2,8 +2,6 @@
// 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:test/bootstrap/browser.dart';
import 'package:test/test.dart';
@ -31,7 +29,7 @@ Future<void> testMain() async {
}) {
test(description, () {
testFn(BitmapCanvas(canvasSize, RenderStrategy()));
testFn(DomCanvas(html.document.createElement('flt-picture')));
testFn(DomCanvas(domDocument.createElement('flt-picture')));
testFn(mockCanvas = MockEngineCanvas());
whenDone?.call();
});

11
engine/src/flutter/lib/web_ui/test/engine/surface/scene_builder_test.dart
View File

@ -36,7 +36,7 @@ void testMain() {
test('pushTransform implements surface lifecycle', () {
testLayerLifeCycle((ui.SceneBuilder sceneBuilder, ui.EngineLayer? oldLayer) {
return sceneBuilder.pushTransform(
(Matrix4.identity()..scale(html.window.devicePixelRatio as double)).toFloat64());
(Matrix4.identity()..scale(domWindow.devicePixelRatio as double)).toFloat64());
}, () {
return '''<s><flt-transform></flt-transform></s>''';
});
@ -505,7 +505,8 @@ void testMain() {
actualAdditions.addAll(record.addedNodes!);
}
});
observer.observe(SurfaceSceneBuilder.debugLastFrameScene!.rootElement!, childList: true);
observer.observe(
SurfaceSceneBuilder.debugLastFrameScene!.rootElement! as html.Node, childList: true);
final SurfaceSceneBuilder builder = SurfaceSceneBuilder();
for (int i = 0; i < string.length; i++) {
@ -708,7 +709,7 @@ void testLayerLifeCycle(
}
final PersistedSurface surface1 = findSurface();
final html.Element surfaceElement1 = surface1.rootElement!;
final DomElement surfaceElement1 = surface1.rootElement!;
// Retain: reuses a layer as is along with its DOM elements.
sceneBuilder = SurfaceSceneBuilder();
@ -718,7 +719,7 @@ void testLayerLifeCycle(
tester.expectSceneHtml(expectedHtmlGetter());
final PersistedSurface surface2 = findSurface();
final html.Element surfaceElement2 = surface2.rootElement!;
final DomElement surfaceElement2 = surface2.rootElement!;
expect(surface2, same(surface1));
expect(surfaceElement2, same(surfaceElement1));
@ -733,7 +734,7 @@ void testLayerLifeCycle(
final PersistedSurface surface3 = findSurface();
expect(surface3, same(layer3));
final html.Element surfaceElement3 = surface3.rootElement!;
final DomElement surfaceElement3 = surface3.rootElement!;
expect(surface3, isNot(same(surface2)));
expect(surfaceElement3, isNotNull);
expect(surfaceElement3, same(surfaceElement2));

38
engine/src/flutter/lib/web_ui/test/engine/surface/surface_test.dart
View File

@ -2,8 +2,6 @@
// 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:test/bootstrap/browser.dart';
import 'package:test/test.dart';
import 'package:ui/src/engine.dart';
@ -86,7 +84,7 @@ void testMain() {
builder1.pop();
builder1.build();
expect(opacityLayer1.isActive, isTrue);
final html.Element element = opacityLayer1.rootElement!;
final DomElement element = opacityLayer1.rootElement!;
final SceneBuilder builder2 = SceneBuilder();
final PersistedOpacity opacityLayer2 =
@ -112,7 +110,7 @@ void testMain() {
builder1.pop();
builder1.build();
expect(opacityLayer1.isActive, isTrue);
final html.Element element = opacityLayer1.rootElement!;
final DomElement element = opacityLayer1.rootElement!;
// Release it
SceneBuilder().build();
@ -158,7 +156,7 @@ void testMain() {
final SurfaceSceneBuilder builder1 = SurfaceSceneBuilder();
final PersistedTransform a1 =
builder1.pushTransform(
(Matrix4.identity()..scale(html.window.devicePixelRatio as double)).toFloat64()) as PersistedTransform;
(Matrix4.identity()..scale(domWindow.devicePixelRatio as double)).toFloat64()) as PersistedTransform;
final PersistedOpacity b1 = builder1.pushOpacity(100) as PersistedOpacity;
final PersistedTransform c1 =
builder1.pushTransform(Matrix4.identity().toFloat64()) as PersistedTransform;
@ -169,9 +167,9 @@ void testMain() {
builder1.build();
expect(logger.log, <String>['build', 'createElement', 'apply']);
final html.Element elementA = a1.rootElement!;
final html.Element elementB = b1.rootElement!;
final html.Element elementC = c1.rootElement!;
final DomElement elementA = a1.rootElement!;
final DomElement elementB = b1.rootElement!;
final DomElement elementC = c1.rootElement!;
expect(elementC.parent, elementB);
expect(elementB.parent, elementA);
@ -179,7 +177,7 @@ void testMain() {
final SurfaceSceneBuilder builder2 = SurfaceSceneBuilder();
final PersistedTransform a2 =
builder2.pushTransform(
(Matrix4.identity()..scale(html.window.devicePixelRatio as double)).toFloat64(),
(Matrix4.identity()..scale(domWindow.devicePixelRatio as double)).toFloat64(),
oldLayer: a1) as PersistedTransform;
final PersistedTransform c2 =
builder2.pushTransform(Matrix4.identity().toFloat64(), oldLayer: c1) as PersistedTransform;
@ -212,7 +210,7 @@ void testMain() {
builder1.pop();
builder1.build();
expect(opacityLayer.isActive, isTrue);
final html.Element element = opacityLayer.rootElement!;
final DomElement element = opacityLayer.rootElement!;
final SceneBuilder builder2 = SceneBuilder();
@ -234,7 +232,7 @@ void testMain() {
builder1.build();
expect(opacityLayer.isActive, isTrue);
expect(logger.log, <String>['build', 'createElement', 'apply']);
final html.Element element = opacityLayer.rootElement!;
final DomElement element = opacityLayer.rootElement!;
SceneBuilder().build();
expect(opacityLayer.isReleased, isTrue);
@ -261,8 +259,8 @@ void testMain() {
builder1.build();
expect(opacityLayer.isActive, isTrue);
expect(transformLayer.isActive, isTrue);
final html.Element opacityElement = opacityLayer.rootElement!;
final html.Element transformElement = transformLayer.rootElement!;
final DomElement opacityElement = opacityLayer.rootElement!;
final DomElement transformElement = transformLayer.rootElement!;
SceneBuilder().build();
@ -307,10 +305,10 @@ void testMain() {
builder1.pop();
builder1.build();
final html.Element elementA = a1.rootElement!;
final html.Element elementB = b1.rootElement!;
final html.Element elementC = c1.rootElement!;
final html.Element elementD = d1.rootElement!;
final DomElement elementA = a1.rootElement!;
final DomElement elementB = b1.rootElement!;
final DomElement elementC = c1.rootElement!;
final DomElement elementD = d1.rootElement!;
expect(elementB.parent, elementA);
expect(elementC.parent, elementA);
@ -330,12 +328,12 @@ void testMain() {
expect(d1.rootElement, elementD);
expect(
<html.Element>[
<DomElement>[
elementD.parent!,
elementC.parent!,
elementB.parent!,
],
<html.Element>[elementC, elementB, elementA],
<DomElement>[elementC, elementB, elementA],
);
});
@ -345,7 +343,7 @@ void testMain() {
builder1.pop();
builder1.build();
expect(opacityLayer1.isActive, isTrue);
final html.Element element = opacityLayer1.rootElement!;
final DomElement element = opacityLayer1.rootElement!;
final SceneBuilder builder2 = SceneBuilder();
final PersistedOpacity opacityLayer2 = builder2.pushOpacity(200) as PersistedOpacity;

8
engine/src/flutter/lib/web_ui/test/html/bitmap_canvas_golden_test.dart
View File

@ -31,7 +31,7 @@ Future<void> testMain() async {
testScene.style.transformOrigin = '0 0 0';
testScene.style.transform = 'scale(0.3)';
}
testScene.append(canvas.rootElement);
testScene.append(canvas.rootElement as html.Node);
flutterViewEmbedder.glassPaneShadow!.querySelector('flt-scene-host')!.append(testScene);
}
@ -177,7 +177,7 @@ Future<void> testMain() async {
canvas.drawParagraph(paragraph, Offset(8.5, 8.5 + innerClip.top));
expect(
canvas.rootElement.querySelectorAll('flt-paragraph').map<String>((html.Element e) => e.innerText).toList(),
canvas.rootElement.querySelectorAll('flt-paragraph').map<String>((DomElement e) => e.innerText).toList(),
<String>['Am I blurry?', 'Am I blurry?'],
reason: 'Expected to render text using HTML',
);
@ -235,7 +235,7 @@ Future<void> testMain() async {
canvas.drawParagraph(paragraph, const Offset(180, 50));
expect(
canvas.rootElement.querySelectorAll('flt-paragraph').map<String?>((html.Element e) => e.text).toList(),
canvas.rootElement.querySelectorAll('flt-paragraph').map<String?>((DomElement e) => e.text).toList(),
<String>[text],
reason: 'Expected to render text using HTML',
);
@ -259,7 +259,7 @@ Future<void> testMain() async {
sceneElement.style.transform = 'scale(0.3)';
}
sceneElement.querySelector('flt-clip')!.append(canvas.rootElement);
sceneElement.querySelector('flt-clip')!.append(canvas.rootElement as html.Node);
flutterViewEmbedder.glassPaneShadow!.querySelector('flt-scene-host')!.append(sceneElement);
await matchGoldenFile(

2
engine/src/flutter/lib/web_ui/test/html/canvas_context_golden_test.dart
View File

@ -41,7 +41,7 @@ Future<void> testMain() async {
}
try {
sceneElement.append(engineCanvas.rootElement);
sceneElement.append(engineCanvas.rootElement as html.Element);
html.document.body!.append(sceneElement);
// TODO(yjbanov): 10% diff rate is excessive. Update goldens.
await matchGoldenFile('$fileName.png', region: region);

12
engine/src/flutter/lib/web_ui/test/html/canvas_reuse_golden_test.dart
View File

@ -48,7 +48,7 @@ Future<void> testMain() async {
rc.apply(engineCanvas, screenRect);
engineCanvas.endOfPaint();
html.Element sceneElement = html.Element.tag('flt-scene');
DomElement sceneElement = createDomElement('flt-scene');
if (isIosSafari) {
// Shrink to fit on the iPhone screen.
sceneElement.style.position = 'absolute';
@ -56,9 +56,9 @@ Future<void> testMain() async {
sceneElement.style.transform = 'scale(0.3)';
}
sceneElement.append(engineCanvas.rootElement);
html.document.body!.append(sceneElement);
domDocument.body!.append(sceneElement);
final html.CanvasElement canvas = html.document.querySelector('canvas')! as html.CanvasElement;
final DomCanvasElement canvas = domDocument.querySelector('canvas')! as DomCanvasElement;
// ! Since canvas is first element, it should have zIndex = -1 for correct
// paint order.
expect(canvas.style.zIndex , '-1');
@ -84,7 +84,7 @@ Future<void> testMain() async {
rc2.endRecording();
rc2.apply(engineCanvas, screenRect);
sceneElement = html.Element.tag('flt-scene');
sceneElement = createDomElement('flt-scene');
if (isIosSafari) {
// Shrink to fit on the iPhone screen.
sceneElement.style.position = 'absolute';
@ -92,9 +92,9 @@ Future<void> testMain() async {
sceneElement.style.transform = 'scale(0.3)';
}
sceneElement.append(engineCanvas.rootElement);
html.document.body!.append(sceneElement);
domDocument.body!.append(sceneElement);
final html.CanvasElement canvas2 = html.document.querySelector('canvas')! as html.CanvasElement;
final DomCanvasElement canvas2 = domDocument.querySelector('canvas')! as DomCanvasElement;
// ZIndex should have been cleared since we have image element preceding
// canvas.
expect(canvas.style.zIndex != '-1', isTrue);

4
engine/src/flutter/lib/web_ui/test/html/canvas_winding_rule_golden_test.dart
View File

@ -2,8 +2,6 @@
// 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:test/bootstrap/browser.dart';
import 'package:test/test.dart';
import 'package:ui/src/engine.dart';
@ -30,7 +28,7 @@ Future<void> testMain() async {
test('draws paths using nonzero and evenodd winding rules', () async {
paintPaths(canvas);
html.document.body!.append(canvas.rootElement);
domDocument.body!.append(canvas.rootElement);
await matchGoldenFile('canvas_path_winding.png', region: region);
});

7
engine/src/flutter/lib/web_ui/test/html/drawing/canvas_arc_golden_test.dart
View File

@ -2,7 +2,6 @@
// 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 'dart:math' as math;
import 'package:test/bootstrap/browser.dart';
import 'package:test/test.dart';
@ -47,7 +46,7 @@ Future<void> testMain() async {
largeArc: true, clockwise: true, distance: -20);
html.document.body!.append(canvas.rootElement);
domDocument.body!.append(canvas.rootElement);
await matchGoldenFile('canvas_arc_to_point.png', region: region);
});
@ -62,7 +61,7 @@ Future<void> testMain() async {
..color = const Color(0xFFFF9800) // orange
..style = PaintingStyle.fill);
html.document.body!.append(canvas.rootElement);
domDocument.body!.append(canvas.rootElement);
await matchGoldenFile('canvas_addarc.png', region: region);
});
@ -80,7 +79,7 @@ Future<void> testMain() async {
..color = const Color(0xFFFF9800) // orange
..style = PaintingStyle.fill);
html.document.body!.append(canvas.rootElement);
domDocument.body!.append(canvas.rootElement);
await matchGoldenFile('canvas_addarc_ccw.png', region: region);
});
}

5
engine/src/flutter/lib/web_ui/test/html/drawing/canvas_draw_points_golden_test.dart
View File

@ -2,7 +2,6 @@
// 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 'dart:typed_data';
import 'package:test/bootstrap/browser.dart';
@ -55,7 +54,7 @@ Future<void> testMain() async {
]);
canvas.drawPoints(PointMode.polygon, points3, paint);
html.document.body!.append(canvas.rootElement);
domDocument.body!.append(canvas.rootElement);
await matchGoldenFile('canvas_draw_points.png', region: region);
});
@ -76,7 +75,7 @@ Future<void> testMain() async {
30.0, 40.0, 200.0, 40.0]), strokePaint3);
canvas.drawPoints(PointMode.points, Float32List.fromList(<double>[
30.0, 50.0, 40.0, 50.0, 50.0, 50.0]), strokePaint3);
html.document.body!.append(canvas.rootElement);
domDocument.body!.append(canvas.rootElement);
await matchGoldenFile('canvas_draw_points_stroke.png', region: region);
});
}

4
engine/src/flutter/lib/web_ui/test/html/drawing/canvas_lines_golden_test.dart
View File

@ -2,8 +2,6 @@
// 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:test/bootstrap/browser.dart';
import 'package:test/test.dart';
import 'package:ui/src/engine.dart';
@ -32,7 +30,7 @@ Future<void> testMain() async {
paintLines(canvas);
html.document.body!.append(canvas.rootElement);
domDocument.body!.append(canvas.rootElement);
await matchGoldenFile('canvas_lines_thickness.png', region: region);
});
}

4
engine/src/flutter/lib/web_ui/test/html/drawing/canvas_rect_golden_test.dart
View File

@ -2,8 +2,6 @@
// 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:test/bootstrap/browser.dart';
import 'package:test/test.dart';
import 'package:ui/src/engine.dart';
@ -32,7 +30,7 @@ Future<void> testMain() async {
paintRects(canvas);
html.document.body!.append(canvas.rootElement);
domDocument.body!.append(canvas.rootElement);
await matchGoldenFile('canvas_rect_flipped.png', region: region);
});
}

4
engine/src/flutter/lib/web_ui/test/html/drawing/canvas_rrect_golden_test.dart
View File

@ -2,8 +2,6 @@
// 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:test/bootstrap/browser.dart';
import 'package:test/test.dart';
import 'package:ui/src/engine.dart';
@ -24,7 +22,7 @@ Future<void> testMain() async {
..transformOrigin = '0 0 0'
..transform = 'scale(0.3)';
}
html.document.body!.append(canvas.rootElement);
domDocument.body!.append(canvas.rootElement);
await matchGoldenFile(goldenFileName, region: region);
}

4
engine/src/flutter/lib/web_ui/test/html/drawing/canvas_stroke_joins_golden_test.dart
View File

@ -2,8 +2,6 @@
// 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:test/bootstrap/browser.dart';
import 'package:test/test.dart';
import 'package:ui/src/engine.dart';
@ -32,7 +30,7 @@ Future<void> testMain() async {
paintStrokeJoins(canvas);
html.document.body!.append(canvas.rootElement);
domDocument.body!.append(canvas.rootElement);
await matchGoldenFile('canvas_stroke_joins.png', region: region);
});

3
engine/src/flutter/lib/web_ui/test/html/drawing/canvas_stroke_rects_golden_test.dart
View File

@ -2,7 +2,6 @@
// 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 'dart:math' as math;
import 'package:test/bootstrap/browser.dart';
@ -33,7 +32,7 @@ Future<void> testMain() async {
paintSideBySideRects(canvas);
html.document.body!.append(canvas.rootElement);
domDocument.body!.append(canvas.rootElement);
await matchGoldenFile('canvas_stroke_rects.png', region: region);
});

4
engine/src/flutter/lib/web_ui/test/html/drawing/conic_golden_test.dart
View File

@ -2,8 +2,6 @@
// 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:test/bootstrap/browser.dart';
import 'package:test/test.dart';
import 'package:ui/src/engine.dart';
@ -38,7 +36,7 @@ Future<void> testMain() async {
canvas.drawPath(path, paint);
canvas.endRecording();
html.document.body!.append(bitmapCanvas.rootElement);
domDocument.body!.append(bitmapCanvas.rootElement);
canvas.apply(bitmapCanvas, canvasBounds);
await matchGoldenFile('$scubaFileName.png', region: region);
bitmapCanvas.rootElement.remove();

4
engine/src/flutter/lib/web_ui/test/html/drawing/draw_vertices_golden_test.dart
View File

@ -34,7 +34,7 @@ Future<void> testMain() async {
rc.apply(engineCanvas, screenRect);
// Wrap in <flt-scene> so that our CSS selectors kick in.
final html.Element sceneElement = html.Element.tag('flt-scene');
final DomElement sceneElement = createDomElement('flt-scene');
if (isIosSafari) {
// Shrink to fit on the iPhone screen.
sceneElement.style.position = 'absolute';
@ -44,7 +44,7 @@ Future<void> testMain() async {
try {
sceneElement.append(engineCanvas.rootElement);
html.document.body!.append(sceneElement);
domDocument.body!.append(sceneElement);
await matchGoldenFile(
'$fileName.png',
region: region,

11
engine/src/flutter/lib/web_ui/test/html/paragraph/bidi_golden_test.dart
View File

@ -3,7 +3,6 @@
// found in the LICENSE file.
import 'dart:async';
import 'dart:html' as html;
import 'package:test/bootstrap/browser.dart';
import 'package:test/test.dart';
@ -92,7 +91,7 @@ Future<void> testMain() async {
test('basic bidi starting with ltr (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 340, 600);
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
const double height = 40;
@ -196,7 +195,7 @@ Future<void> testMain() async {
test('basic bidi starting with rtl (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 340, 600);
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
const double height = 40;
@ -304,7 +303,7 @@ Future<void> testMain() async {
test('multiline bidi (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 400, 500);
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
const double height = 95;
@ -418,7 +417,7 @@ Future<void> testMain() async {
test('multi span bidi (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 400, 900);
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
const double height = 95;
@ -537,7 +536,7 @@ Future<void> testMain() async {
test('bidi with selection (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 400, 500);
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
const double height = 95;

23
engine/src/flutter/lib/web_ui/test/html/paragraph/general_golden_test.dart
View File

@ -3,7 +3,6 @@
// found in the LICENSE file.
import 'dart:async';
import 'dart:html' as html;
import 'dart:math' as math;
import 'package:test/bootstrap/browser.dart';
@ -114,7 +113,7 @@ Future<void> testMain() async {
});
test('respects alignment in DOM mode', () {
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
Offset offset = Offset.zero;
CanvasParagraph paragraph;
@ -192,7 +191,7 @@ Future<void> testMain() async {
});
test('alignment and transform (DOM)', () {
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
testAlignAndTransform(canvas);
return takeScreenshot(canvas, bounds, 'canvas_paragraph_align_transform_dom');
});
@ -221,7 +220,7 @@ Future<void> testMain() async {
test('giant paragraph style (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 300, 200);
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
testGiantParagraphStyles(canvas);
return takeScreenshot(canvas, bounds, 'canvas_paragraph_giant_paragraph_style_dom');
});
@ -230,10 +229,10 @@ Future<void> testMain() async {
const Rect bounds = Rect.fromLTWH(0, 0, 600, 200);
// Store the old font size value on the body, and set a gaint font size.
final String oldBodyFontSize = html.document.body!.style.fontSize;
html.document.body!.style.fontSize = '100px';
final String oldBodyFontSize = domDocument.body!.style.fontSize;
domDocument.body!.style.fontSize = '100px';
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
Offset offset = const Offset(10.0, 10.0);
final CanvasParagraph paragraph = rich(
@ -280,7 +279,7 @@ Future<void> testMain() async {
await takeScreenshot(canvas, bounds, 'canvas_paragraph_giant_body_font_size_dom');
// Restore the old font size value.
html.document.body!.style.fontSize = oldBodyFontSize;
domDocument.body!.style.fontSize = oldBodyFontSize;
});
test('paints spans with varying heights/baselines', () {
@ -462,7 +461,7 @@ Future<void> testMain() async {
test('font features (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 600, 500);
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
testFontFeatures(canvas);
return takeScreenshot(canvas, bounds, 'canvas_paragraph_font_features_dom');
});
@ -505,7 +504,7 @@ Future<void> testMain() async {
test('font variations (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 600, 500);
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
testFontVariations(canvas);
return takeScreenshot(canvas, bounds, 'canvas_paragraph_font_variations_dom');
});
@ -541,7 +540,7 @@ Future<void> testMain() async {
test('background style (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 300, 200);
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
testBackgroundStyle(canvas);
return takeScreenshot(canvas, bounds, 'canvas_paragraph_background_style_dom');
});
@ -579,7 +578,7 @@ Future<void> testMain() async {
test('foreground style (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 300, 200);
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
testForegroundStyle(canvas);
return takeScreenshot(canvas, bounds, 'canvas_paragraph_foreground_style_dom');
});

6
engine/src/flutter/lib/web_ui/test/html/paragraph/helper.dart
View File

@ -2,8 +2,6 @@
// 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:ui/src/engine.dart';
import 'package:ui/ui.dart';
import 'package:web_engine_tester/golden_tester.dart';
@ -51,7 +49,7 @@ Future<void> takeScreenshot(
bool write = false,
double? maxDiffRatePercent,
}) async {
final html.Element sceneElement = html.Element.tag('flt-scene');
final DomElement sceneElement = createDomElement('flt-scene');
if (isIosSafari) {
// Shrink to fit on the iPhone screen.
sceneElement.style.position = 'absolute';
@ -60,7 +58,7 @@ Future<void> takeScreenshot(
}
try {
sceneElement.append(canvas.rootElement);
html.document.body!.append(sceneElement);
domDocument.body!.append(sceneElement);
await matchGoldenFile(
'$fileName.png',
region: region,

15
engine/src/flutter/lib/web_ui/test/html/paragraph/justify_golden_test.dart
View File

@ -3,7 +3,6 @@
// found in the LICENSE file.
import 'dart:async';
import 'dart:html' as html;
import 'package:test/bootstrap/browser.dart';
import 'package:test/test.dart';
@ -58,7 +57,7 @@ Future<void> testMain() async {
test('TextAlign.justify with multiple spans (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 400, 400);
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
testJustifyWithMultipleSpans(canvas);
return takeScreenshot(canvas, bounds, 'canvas_paragraph_justify_dom');
});
@ -98,7 +97,7 @@ Future<void> testMain() async {
test('TextAlign.justify with single space and empty line (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 400, 400);
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
testJustifyWithEmptyLine(canvas);
return takeScreenshot(
canvas, bounds, 'canvas_paragraph_justify_empty_line_dom');
@ -144,7 +143,7 @@ Future<void> testMain() async {
test('TextAlign.justify with ellipsis (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 400, 300);
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
testJustifyWithEllipsis(canvas);
return takeScreenshot(canvas, bounds, 'canvas_paragraph_justify_ellipsis_dom');
});
@ -191,7 +190,7 @@ Future<void> testMain() async {
test('TextAlign.justify with background (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 400, 400);
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
testJustifyWithBackground(canvas);
return takeScreenshot(
canvas, bounds, 'canvas_paragraph_justify_background_dom');
@ -233,7 +232,7 @@ Future<void> testMain() async {
test('TextAlign.justify with placeholder (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 400, 400);
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
testJustifyWithPlaceholder(canvas);
return takeScreenshot(canvas, bounds, 'canvas_paragraph_justify_placeholder_dom');
});
@ -277,7 +276,7 @@ Future<void> testMain() async {
test('TextAlign.justify with selection (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 400, 400);
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
testJustifyWithSelection(canvas);
return takeScreenshot(canvas, bounds, 'canvas_paragraph_justify_selection_dom');
});
@ -322,7 +321,7 @@ Future<void> testMain() async {
test('TextAlign.justify rtl (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 400, 400);
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
testJustifyRtl(canvas);
return takeScreenshot(canvas, bounds, 'canvas_paragraph_justify_rtl_dom');
});

3
engine/src/flutter/lib/web_ui/test/html/paragraph/overflow_golden_test.dart
View File

@ -3,7 +3,6 @@
// found in the LICENSE file.
import 'dart:async';
import 'dart:html' as html;
import 'package:test/bootstrap/browser.dart';
import 'package:test/test.dart';
@ -116,7 +115,7 @@ Future<void> testMain() async {
test('ellipsis (dom)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 300, 300);
final EngineCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final EngineCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
testEllipsis(canvas);
return takeScreenshot(canvas, bounds, 'canvas_paragraph_ellipsis_dom');
});

3
engine/src/flutter/lib/web_ui/test/html/paragraph/placeholders_golden_test.dart
View File

@ -3,7 +3,6 @@
// found in the LICENSE file.
import 'dart:async';
import 'dart:html' as html;
import 'package:test/bootstrap/browser.dart';
import 'package:test/test.dart';
@ -93,7 +92,7 @@ Future<void> testMain() async {
});
test('draws paragraphs with placeholders and text align in DOM mode', () {
final DomCanvas canvas = DomCanvas(html.document.createElement('flt-picture'));
final DomCanvas canvas = DomCanvas(domDocument.createElement('flt-picture'));
const List<TextAlign> aligns = <TextAlign>[
TextAlign.left,

7
engine/src/flutter/lib/web_ui/test/html/paragraph/text_scuba.dart
View File

@ -3,7 +3,6 @@
// found in the LICENSE file.
import 'dart:async';
import 'dart:html' as html;
import 'package:test/test.dart';
import 'package:ui/src/engine.dart';
@ -66,7 +65,7 @@ class EngineScubaTester {
bool write = false,
}) async {
// Wrap in <flt-scene> so that our CSS selectors kick in.
final html.Element sceneElement = html.Element.tag('flt-scene');
final DomElement sceneElement = createDomElement('flt-scene');
if (isIosSafari) {
// Shrink to fit on the iPhone screen.
sceneElement.style.position = 'absolute';
@ -75,7 +74,7 @@ class EngineScubaTester {
}
try {
sceneElement.append(canvas.rootElement);
html.document.body!.append(sceneElement);
domDocument.body!.append(sceneElement);
String screenshotName = '${fileName}_${canvas.runtimeType}';
if (canvas is BitmapCanvas) {
screenshotName += '+canvas_measurement';
@ -104,7 +103,7 @@ void testEachCanvas(String description, CanvasTest body,
return body(BitmapCanvas(bounds, RenderStrategy()));
});
test('$description (dom)', () {
return body(DomCanvas(html.document.createElement('flt-picture')));
return body(DomCanvas(domDocument.createElement('flt-picture')));
});
}

6
engine/src/flutter/lib/web_ui/test/html/path_metrics_golden_test.dart
View File

@ -2,8 +2,6 @@
// 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:test/bootstrap/browser.dart';
import 'package:test/test.dart';
import 'package:ui/src/engine.dart';
@ -33,7 +31,7 @@ Future<void> testMain() async {
rc.apply(engineCanvas, screenRect);
// Wrap in <flt-scene> so that our CSS selectors kick in.
final html.Element sceneElement = html.Element.tag('flt-scene');
final DomElement sceneElement = createDomElement('flt-scene');
if (isIosSafari) {
// Shrink to fit on the iPhone screen.
sceneElement.style.position = 'absolute';
@ -42,7 +40,7 @@ Future<void> testMain() async {
}
try {
sceneElement.append(engineCanvas.rootElement);
html.document.body!.append(sceneElement);
domDocument.body!.append(sceneElement);
await matchGoldenFile('$fileName.png', region: region);
} finally {
// The page is reused across tests, so remove the element after taking the

6
engine/src/flutter/lib/web_ui/test/html/path_to_svg_golden_test.dart
View File

@ -66,8 +66,8 @@ Future<void> testMain() async {
canvas.endRecording();
canvas.apply(bitmapCanvas, canvasBounds);
final html.Element sceneElement = html.Element.tag('flt-scene');
html.document.body!.append(sceneElement);
final DomElement sceneElement = createDomElement('flt-scene');
domDocument.body!.append(sceneElement);
if (isIosSafari) {
// Shrink to fit on the iPhone screen.
sceneElement.style.position = 'absolute';
@ -75,7 +75,7 @@ Future<void> testMain() async {
sceneElement.style.transform = 'scale(0.3)';
}
sceneElement.append(bitmapCanvas.rootElement);
sceneElement.append(svgElement);
sceneElement.append(svgElement as DomElement);
await matchGoldenFile('$scubaFileName.png',
region: region, maxDiffRatePercent: maxDiffRatePercent, write: write);

5
engine/src/flutter/lib/web_ui/test/html/path_transform_golden_test.dart
View File

@ -2,7 +2,6 @@
// 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 'dart:math' as math;
import 'package:test/bootstrap/browser.dart';
@ -31,7 +30,7 @@ Future<void> testMain() async {
rc.apply(engineCanvas, screenRect);
// Wrap in <flt-scene> so that our CSS selectors kick in.
final html.Element sceneElement = html.Element.tag('flt-scene');
final DomElement sceneElement = createDomElement('flt-scene');
if (isIosSafari) {
// Shrink to fit on the iPhone screen.
sceneElement.style.position = 'absolute';
@ -40,7 +39,7 @@ Future<void> testMain() async {
}
try {
sceneElement.append(engineCanvas.rootElement);
html.document.body!.append(sceneElement);
domDocument.body!.append(sceneElement);
await matchGoldenFile('$fileName.png', region: region, maxDiffRatePercent: maxDiffRatePercent);
} finally {
// The page is reused across tests, so remove the element after taking the

4
engine/src/flutter/lib/web_ui/test/html/recording_canvas_golden_test.dart
View File

@ -54,7 +54,7 @@ Future<void> testMain() async {
rc.apply(engineCanvas, screenRect);
// Wrap in <flt-scene> so that our CSS selectors kick in.
final html.Element sceneElement = html.Element.tag('flt-scene');
final DomElement sceneElement = createDomElement('flt-scene');
if (isIosSafari) {
// Shrink to fit on the iPhone screen.
sceneElement.style.position = 'absolute';
@ -63,7 +63,7 @@ Future<void> testMain() async {
}
try {
sceneElement.append(engineCanvas.rootElement);
html.document.body!.append(sceneElement);
domDocument.body!.append(sceneElement);
await matchGoldenFile('paint_bounds_for_$fileName.png', region: region,
write: write);
} finally {

7
engine/src/flutter/lib/web_ui/test/html/screenshot.dart
View File

@ -21,7 +21,7 @@ Future<void> canvasScreenshot(RecordingCanvas rc, String fileName,
rc.apply(engineCanvas, region);
// Wrap in <flt-scene> so that our CSS selectors kick in.
final html.Element sceneElement = html.Element.tag('flt-scene');
final DomElement sceneElement = createDomElement('flt-scene');
if (isIosSafari) {
// Shrink to fit on the iPhone screen.
sceneElement.style.position = 'absolute';
@ -32,13 +32,12 @@ Future<void> canvasScreenshot(RecordingCanvas rc, String fileName,
if (setupPerspective) {
// iFrame disables perspective, set it explicitly for test.
engineCanvas.rootElement.style.perspective = '400px';
for (final html.Element element in engineCanvas.rootElement.querySelectorAll(
'div')) {
for (final DomElement element in engineCanvas.rootElement.querySelectorAll('div')) {
element.style.perspective = '400px';
}
}
sceneElement.append(engineCanvas.rootElement);
html.document.body!.append(sceneElement);
domDocument.body!.append(sceneElement);
await matchGoldenFile('$fileName.png',
region: region, maxDiffRatePercent: maxDiffRatePercent, write: write);
} finally {

4
engine/src/flutter/lib/web_ui/test/html/shaders/gradient_golden_test.dart
View File

@ -39,7 +39,7 @@ Future<void> testMain() async {
rc.apply(engineCanvas, screenRect);
// Wrap in <flt-scene> so that our CSS selectors kick in.
final html.Element sceneElement = html.Element.tag('flt-scene');
final DomElement sceneElement = createDomElement('flt-scene');
if (isIosSafari) {
// Shrink to fit on the iPhone screen.
sceneElement.style.position = 'absolute';
@ -48,7 +48,7 @@ Future<void> testMain() async {
}
try {
sceneElement.append(engineCanvas.rootElement);
html.document.body!.append(sceneElement);
domDocument.body!.append(sceneElement);
await matchGoldenFile('$fileName.png',
region: region, maxDiffRatePercent: maxDiffRatePercent, write: write);
} finally {

5
engine/src/flutter/lib/web_ui/test/mock_engine_canvas.dart
View File

@ -2,7 +2,6 @@
// 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 'dart:typed_data';
import 'package:ui/src/engine.dart';
@ -34,8 +33,8 @@ class MockEngineCanvas implements EngineCanvas {
final List<MockCanvasCall> methodCallLog = <MockCanvasCall>[];
@override
html.Element get rootElement => _rootElement;
html.Element _rootElement = html.DivElement();
DomElement get rootElement => _rootElement;
DomElement _rootElement = createDomHTMLDivElement();
void _called(String methodName, {dynamic arguments}) {
methodCallLog.add(MockCanvasCall._(