diff --git a/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart b/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart index 27ba4d61fdde4..dd99004973d2e 100644 --- a/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart +++ b/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart @@ -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(); diff --git a/lib/web_ui/lib/src/engine/dom.dart b/lib/web_ui/lib/src/engine/dom.dart index b5c42752bdad6..5ad01b98ff6b5 100644 --- a/lib/web_ui/lib/src/engine/dom.dart +++ b/lib/web_ui/lib/src/engine/dom.dart @@ -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]) { diff --git a/lib/web_ui/lib/src/engine/engine_canvas.dart b/lib/web_ui/lib/src/engine/engine_canvas.dart index fafdddfdf3f24..4dfcf5658782e 100644 --- a/lib/web_ui/lib/src/engine/engine_canvas.dart +++ b/lib/web_ui/lib/src/engine/engine_canvas.dart @@ -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. diff --git a/lib/web_ui/lib/src/engine/html/backdrop_filter.dart b/lib/web_ui/lib/src/engine/html/backdrop_filter.dart index 4afad8a4c59f1..738c851124c2d 100644 --- a/lib/web_ui/lib/src/engine/html/backdrop_filter.dart +++ b/lib/web_ui/lib/src/engine/html/backdrop_filter.dart @@ -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; diff --git a/lib/web_ui/lib/src/engine/html/bitmap_canvas.dart b/lib/web_ui/lib/src/engine/html/bitmap_canvas.dart index 96241b2b5c813..fafc6d305694e 100644 --- a/lib/web_ui/lib/src/engine/html/bitmap_canvas.dart +++ b/lib/web_ui/lib/src/engine/html/bitmap_canvas.dart @@ -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 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 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 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 _clipContent(List 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 _clipContent(List 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); } } diff --git a/lib/web_ui/lib/src/engine/html/clip.dart b/lib/web_ui/lib/src/engine/html/clip.dart index 13f43378704a4..a8b0cf2c56546 100644 --- a/lib/web_ui/lib/src/engine/html/clip.dart +++ b/lib/web_ui/lib/src/engine/html/clip.dart @@ -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 diff --git a/lib/web_ui/lib/src/engine/html/color_filter.dart b/lib/web_ui/lib/src/engine/html/color_filter.dart index fb846a74dc1c0..a23ebed126708 100644 --- a/lib/web_ui/lib/src/engine/html/color_filter.dart +++ b/lib/web_ui/lib/src/engine/html/color_filter.dart @@ -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)!; } } diff --git a/lib/web_ui/lib/src/engine/html/dom_canvas.dart b/lib/web_ui/lib/src/engine/html/dom_canvas.dart index b3bdd34ef9000..890dc9678fecf 100644 --- a/lib/web_ui/lib/src/engine/html/dom_canvas.dart +++ b/lib/web_ui/lib/src/engine/html/dom_canvas.dart @@ -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); diff --git a/lib/web_ui/lib/src/engine/html/opacity.dart b/lib/web_ui/lib/src/engine/html/opacity.dart index 38a047470ae95..1d54fd239ab9c 100644 --- a/lib/web_ui/lib/src/engine/html/opacity.dart +++ b/lib/web_ui/lib/src/engine/html/opacity.dart @@ -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)'; } diff --git a/lib/web_ui/lib/src/engine/html/scene_builder.dart b/lib/web_ui/lib/src/engine/html/scene_builder.dart index cf69c82cbd4b9..ce986c8f45a84 100644 --- a/lib/web_ui/lib/src/engine/html/scene_builder.dart +++ b/lib/web_ui/lib/src/engine/html/scene_builder.dart @@ -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?); }); } diff --git a/lib/web_ui/lib/src/engine/html/shader_mask.dart b/lib/web_ui/lib/src/engine/html/shader_mask.dart index 1048e061342a8..af0e64a97658b 100644 --- a/lib/web_ui/lib/src/engine/html/shader_mask.dart +++ b/lib/web_ui/lib/src/engine/html/shader_mask.dart @@ -53,7 +53,7 @@ class PersistedShaderMask extends PersistedContainerSurface } @override - html.Element? get childContainer => _childContainer as html.Element?; + DomElement? get childContainer => _childContainer; @override void discard() { diff --git a/lib/web_ui/lib/src/engine/html/surface.dart b/lib/web_ui/lib/src/engine/html/surface.dart index 97f82f4991de5..21b2a2378e211 100644 --- a/lib/web_ui/lib/src/engine/html/surface.dart +++ b/lib/web_ui/lib/src/engine/html/surface.dart @@ -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 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) { diff --git a/lib/web_ui/lib/src/engine/shadow.dart b/lib/web_ui/lib/src/engine/shadow.dart index 59ef8bcda492a..a4a79244ed95a 100644 --- a/lib/web_ui/lib/src/engine/shadow.dart +++ b/lib/web_ui/lib/src/engine/shadow.dart @@ -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'; diff --git a/lib/web_ui/lib/src/engine/svg.dart b/lib/web_ui/lib/src/engine/svg.dart index 3f684318f9a20..24cee0c83962b 100644 --- a/lib/web_ui/lib/src/engine/svg.dart +++ b/lib/web_ui/lib/src/engine/svg.dart @@ -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 {} diff --git a/lib/web_ui/lib/src/engine/util.dart b/lib/web_ui/lib/src/engine/util.dart index eb46f404ade60..f3867f2e9d203 100644 --- a/lib/web_ui/lib/src/engine/util.dart +++ b/lib/web_ui/lib/src/engine/util.dart @@ -494,7 +494,7 @@ Float32List offsetListToFloat32List(List 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(); } diff --git a/lib/web_ui/test/canvas_test.dart b/lib/web_ui/test/canvas_test.dart index 2171e5c3a15be..73273dac10dc1 100644 --- a/lib/web_ui/test/canvas_test.dart +++ b/lib/web_ui/test/canvas_test.dart @@ -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 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(); }); diff --git a/lib/web_ui/test/engine/surface/scene_builder_test.dart b/lib/web_ui/test/engine/surface/scene_builder_test.dart index 34ef5c1760d75..1213dbb4918ca 100644 --- a/lib/web_ui/test/engine/surface/scene_builder_test.dart +++ b/lib/web_ui/test/engine/surface/scene_builder_test.dart @@ -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 ''''''; }); @@ -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)); diff --git a/lib/web_ui/test/engine/surface/surface_test.dart b/lib/web_ui/test/engine/surface/surface_test.dart index 7afb183bedfd2..189b37041f0bc 100644 --- a/lib/web_ui/test/engine/surface/surface_test.dart +++ b/lib/web_ui/test/engine/surface/surface_test.dart @@ -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, ['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, ['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( - [ + [ elementD.parent!, elementC.parent!, elementB.parent!, ], - [elementC, elementB, elementA], + [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; diff --git a/lib/web_ui/test/html/bitmap_canvas_golden_test.dart b/lib/web_ui/test/html/bitmap_canvas_golden_test.dart index e974e9dd9080c..ad8f793aa9923 100644 --- a/lib/web_ui/test/html/bitmap_canvas_golden_test.dart +++ b/lib/web_ui/test/html/bitmap_canvas_golden_test.dart @@ -31,7 +31,7 @@ Future 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 testMain() async { canvas.drawParagraph(paragraph, Offset(8.5, 8.5 + innerClip.top)); expect( - canvas.rootElement.querySelectorAll('flt-paragraph').map((html.Element e) => e.innerText).toList(), + canvas.rootElement.querySelectorAll('flt-paragraph').map((DomElement e) => e.innerText).toList(), ['Am I blurry?', 'Am I blurry?'], reason: 'Expected to render text using HTML', ); @@ -235,7 +235,7 @@ Future testMain() async { canvas.drawParagraph(paragraph, const Offset(180, 50)); expect( - canvas.rootElement.querySelectorAll('flt-paragraph').map((html.Element e) => e.text).toList(), + canvas.rootElement.querySelectorAll('flt-paragraph').map((DomElement e) => e.text).toList(), [text], reason: 'Expected to render text using HTML', ); @@ -259,7 +259,7 @@ Future 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( diff --git a/lib/web_ui/test/html/canvas_context_golden_test.dart b/lib/web_ui/test/html/canvas_context_golden_test.dart index c458e029ae5fd..23c43298cab47 100644 --- a/lib/web_ui/test/html/canvas_context_golden_test.dart +++ b/lib/web_ui/test/html/canvas_context_golden_test.dart @@ -41,7 +41,7 @@ Future 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); diff --git a/lib/web_ui/test/html/canvas_reuse_golden_test.dart b/lib/web_ui/test/html/canvas_reuse_golden_test.dart index fc14a7e0e14c7..d8d9af6d2b4fd 100644 --- a/lib/web_ui/test/html/canvas_reuse_golden_test.dart +++ b/lib/web_ui/test/html/canvas_reuse_golden_test.dart @@ -48,7 +48,7 @@ Future 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 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 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 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); diff --git a/lib/web_ui/test/html/canvas_winding_rule_golden_test.dart b/lib/web_ui/test/html/canvas_winding_rule_golden_test.dart index 7dd6ec7f9edf5..342032e43c797 100644 --- a/lib/web_ui/test/html/canvas_winding_rule_golden_test.dart +++ b/lib/web_ui/test/html/canvas_winding_rule_golden_test.dart @@ -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 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); }); diff --git a/lib/web_ui/test/html/drawing/canvas_arc_golden_test.dart b/lib/web_ui/test/html/drawing/canvas_arc_golden_test.dart index 5454e1a6be83d..1f35a29137b43 100644 --- a/lib/web_ui/test/html/drawing/canvas_arc_golden_test.dart +++ b/lib/web_ui/test/html/drawing/canvas_arc_golden_test.dart @@ -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 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 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 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); }); } diff --git a/lib/web_ui/test/html/drawing/canvas_draw_points_golden_test.dart b/lib/web_ui/test/html/drawing/canvas_draw_points_golden_test.dart index f871e389cf752..b22b296ff1f63 100644 --- a/lib/web_ui/test/html/drawing/canvas_draw_points_golden_test.dart +++ b/lib/web_ui/test/html/drawing/canvas_draw_points_golden_test.dart @@ -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 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 testMain() async { 30.0, 40.0, 200.0, 40.0]), strokePaint3); canvas.drawPoints(PointMode.points, Float32List.fromList([ 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); }); } diff --git a/lib/web_ui/test/html/drawing/canvas_lines_golden_test.dart b/lib/web_ui/test/html/drawing/canvas_lines_golden_test.dart index 349b83c65f8f9..ec4870dfaa206 100644 --- a/lib/web_ui/test/html/drawing/canvas_lines_golden_test.dart +++ b/lib/web_ui/test/html/drawing/canvas_lines_golden_test.dart @@ -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 testMain() async { paintLines(canvas); - html.document.body!.append(canvas.rootElement); + domDocument.body!.append(canvas.rootElement); await matchGoldenFile('canvas_lines_thickness.png', region: region); }); } diff --git a/lib/web_ui/test/html/drawing/canvas_rect_golden_test.dart b/lib/web_ui/test/html/drawing/canvas_rect_golden_test.dart index fb81bfd6fa36f..05bdbe9803c3c 100644 --- a/lib/web_ui/test/html/drawing/canvas_rect_golden_test.dart +++ b/lib/web_ui/test/html/drawing/canvas_rect_golden_test.dart @@ -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 testMain() async { paintRects(canvas); - html.document.body!.append(canvas.rootElement); + domDocument.body!.append(canvas.rootElement); await matchGoldenFile('canvas_rect_flipped.png', region: region); }); } diff --git a/lib/web_ui/test/html/drawing/canvas_rrect_golden_test.dart b/lib/web_ui/test/html/drawing/canvas_rrect_golden_test.dart index 169af97c42152..35ae887ba27e5 100644 --- a/lib/web_ui/test/html/drawing/canvas_rrect_golden_test.dart +++ b/lib/web_ui/test/html/drawing/canvas_rrect_golden_test.dart @@ -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 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); } diff --git a/lib/web_ui/test/html/drawing/canvas_stroke_joins_golden_test.dart b/lib/web_ui/test/html/drawing/canvas_stroke_joins_golden_test.dart index 6eff9c39923b5..7382cfeb0e98e 100644 --- a/lib/web_ui/test/html/drawing/canvas_stroke_joins_golden_test.dart +++ b/lib/web_ui/test/html/drawing/canvas_stroke_joins_golden_test.dart @@ -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 testMain() async { paintStrokeJoins(canvas); - html.document.body!.append(canvas.rootElement); + domDocument.body!.append(canvas.rootElement); await matchGoldenFile('canvas_stroke_joins.png', region: region); }); diff --git a/lib/web_ui/test/html/drawing/canvas_stroke_rects_golden_test.dart b/lib/web_ui/test/html/drawing/canvas_stroke_rects_golden_test.dart index 9339bcadba636..dcea2645c0505 100644 --- a/lib/web_ui/test/html/drawing/canvas_stroke_rects_golden_test.dart +++ b/lib/web_ui/test/html/drawing/canvas_stroke_rects_golden_test.dart @@ -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 testMain() async { paintSideBySideRects(canvas); - html.document.body!.append(canvas.rootElement); + domDocument.body!.append(canvas.rootElement); await matchGoldenFile('canvas_stroke_rects.png', region: region); }); diff --git a/lib/web_ui/test/html/drawing/conic_golden_test.dart b/lib/web_ui/test/html/drawing/conic_golden_test.dart index ce028b64dd2fb..535f7d1529b91 100644 --- a/lib/web_ui/test/html/drawing/conic_golden_test.dart +++ b/lib/web_ui/test/html/drawing/conic_golden_test.dart @@ -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 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(); diff --git a/lib/web_ui/test/html/drawing/draw_vertices_golden_test.dart b/lib/web_ui/test/html/drawing/draw_vertices_golden_test.dart index 368a9d96cb7e7..1a140a7df19ff 100644 --- a/lib/web_ui/test/html/drawing/draw_vertices_golden_test.dart +++ b/lib/web_ui/test/html/drawing/draw_vertices_golden_test.dart @@ -34,7 +34,7 @@ Future testMain() async { rc.apply(engineCanvas, screenRect); // Wrap in 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 testMain() async { try { sceneElement.append(engineCanvas.rootElement); - html.document.body!.append(sceneElement); + domDocument.body!.append(sceneElement); await matchGoldenFile( '$fileName.png', region: region, diff --git a/lib/web_ui/test/html/paragraph/bidi_golden_test.dart b/lib/web_ui/test/html/paragraph/bidi_golden_test.dart index c9a459fc31e61..71437c7458b41 100644 --- a/lib/web_ui/test/html/paragraph/bidi_golden_test.dart +++ b/lib/web_ui/test/html/paragraph/bidi_golden_test.dart @@ -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 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 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 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 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 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; diff --git a/lib/web_ui/test/html/paragraph/general_golden_test.dart b/lib/web_ui/test/html/paragraph/general_golden_test.dart index 184ad3597cb1e..358fb973d47bd 100644 --- a/lib/web_ui/test/html/paragraph/general_golden_test.dart +++ b/lib/web_ui/test/html/paragraph/general_golden_test.dart @@ -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 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 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 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 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 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 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 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 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 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'); }); diff --git a/lib/web_ui/test/html/paragraph/helper.dart b/lib/web_ui/test/html/paragraph/helper.dart index 5ad933370a2e4..cb97631dc04a9 100644 --- a/lib/web_ui/test/html/paragraph/helper.dart +++ b/lib/web_ui/test/html/paragraph/helper.dart @@ -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 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 takeScreenshot( } try { sceneElement.append(canvas.rootElement); - html.document.body!.append(sceneElement); + domDocument.body!.append(sceneElement); await matchGoldenFile( '$fileName.png', region: region, diff --git a/lib/web_ui/test/html/paragraph/justify_golden_test.dart b/lib/web_ui/test/html/paragraph/justify_golden_test.dart index f68725f484c42..d5a20a50f71bf 100644 --- a/lib/web_ui/test/html/paragraph/justify_golden_test.dart +++ b/lib/web_ui/test/html/paragraph/justify_golden_test.dart @@ -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 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 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 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 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 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 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 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'); }); diff --git a/lib/web_ui/test/html/paragraph/overflow_golden_test.dart b/lib/web_ui/test/html/paragraph/overflow_golden_test.dart index 44ab8d2915456..9d9e5ca4dfa3e 100644 --- a/lib/web_ui/test/html/paragraph/overflow_golden_test.dart +++ b/lib/web_ui/test/html/paragraph/overflow_golden_test.dart @@ -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 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'); }); diff --git a/lib/web_ui/test/html/paragraph/placeholders_golden_test.dart b/lib/web_ui/test/html/paragraph/placeholders_golden_test.dart index 2e6ff80333a9d..34584f1f371c5 100644 --- a/lib/web_ui/test/html/paragraph/placeholders_golden_test.dart +++ b/lib/web_ui/test/html/paragraph/placeholders_golden_test.dart @@ -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 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 aligns = [ TextAlign.left, diff --git a/lib/web_ui/test/html/paragraph/text_scuba.dart b/lib/web_ui/test/html/paragraph/text_scuba.dart index 1753f6274a67c..4a0ccaef76a55 100644 --- a/lib/web_ui/test/html/paragraph/text_scuba.dart +++ b/lib/web_ui/test/html/paragraph/text_scuba.dart @@ -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 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'))); }); } diff --git a/lib/web_ui/test/html/path_metrics_golden_test.dart b/lib/web_ui/test/html/path_metrics_golden_test.dart index a95b0a9f2e067..9ef4e4cc22908 100644 --- a/lib/web_ui/test/html/path_metrics_golden_test.dart +++ b/lib/web_ui/test/html/path_metrics_golden_test.dart @@ -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 testMain() async { rc.apply(engineCanvas, screenRect); // Wrap in 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 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 diff --git a/lib/web_ui/test/html/path_to_svg_golden_test.dart b/lib/web_ui/test/html/path_to_svg_golden_test.dart index 5bb6d96049aed..d274a002e3330 100644 --- a/lib/web_ui/test/html/path_to_svg_golden_test.dart +++ b/lib/web_ui/test/html/path_to_svg_golden_test.dart @@ -66,8 +66,8 @@ Future 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 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); diff --git a/lib/web_ui/test/html/path_transform_golden_test.dart b/lib/web_ui/test/html/path_transform_golden_test.dart index 3d9e357770205..329edcc96de2e 100644 --- a/lib/web_ui/test/html/path_transform_golden_test.dart +++ b/lib/web_ui/test/html/path_transform_golden_test.dart @@ -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 testMain() async { rc.apply(engineCanvas, screenRect); // Wrap in 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 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 diff --git a/lib/web_ui/test/html/recording_canvas_golden_test.dart b/lib/web_ui/test/html/recording_canvas_golden_test.dart index c775ef81ba2c5..be9c4b53efe25 100644 --- a/lib/web_ui/test/html/recording_canvas_golden_test.dart +++ b/lib/web_ui/test/html/recording_canvas_golden_test.dart @@ -54,7 +54,7 @@ Future testMain() async { rc.apply(engineCanvas, screenRect); // Wrap in 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 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 { diff --git a/lib/web_ui/test/html/screenshot.dart b/lib/web_ui/test/html/screenshot.dart index 3eb571d73fbd2..e485e06940612 100644 --- a/lib/web_ui/test/html/screenshot.dart +++ b/lib/web_ui/test/html/screenshot.dart @@ -21,7 +21,7 @@ Future canvasScreenshot(RecordingCanvas rc, String fileName, rc.apply(engineCanvas, region); // Wrap in 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 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 { diff --git a/lib/web_ui/test/html/shaders/gradient_golden_test.dart b/lib/web_ui/test/html/shaders/gradient_golden_test.dart index 81dd749ebf590..553d29a75c5eb 100644 --- a/lib/web_ui/test/html/shaders/gradient_golden_test.dart +++ b/lib/web_ui/test/html/shaders/gradient_golden_test.dart @@ -39,7 +39,7 @@ Future testMain() async { rc.apply(engineCanvas, screenRect); // Wrap in 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 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 { diff --git a/lib/web_ui/test/mock_engine_canvas.dart b/lib/web_ui/test/mock_engine_canvas.dart index 69569b085b921..39eb200081981 100644 --- a/lib/web_ui/test/mock_engine_canvas.dart +++ b/lib/web_ui/test/mock_engine_canvas.dart @@ -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 methodCallLog = []; @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._(