haikuwebkit/LayoutTests/webgl/webgl-padding.html

27 lines
572 B
HTML
Raw Permalink Normal View History

Position of WebGL <canvas> on iOS is incorrect with CSS borders https://bugs.webkit.org/show_bug.cgi?id=156790 Patch by Antoine Quint <graouts@apple.com> on 2016-06-06 Reviewed by Simon Fraser. Source/WebKit2: WebGL layers on iOS are hosted by a WKRemoteView, which applies a transform scaling its content by the inverse of the device pixel ratio, which affects how positions are applied to the WebGL layer. The container layer of the layer hosted by a WKRemoteView then has an inverse transform applied to it in the PlatformCALayerRemoteCustom constructor. However, the position of a CALayer is not affected by its transform. The fix for <rdar://problem/18316542> should be specific to video, so we only apply the scaling in the case of a LayerTypeAVPlayerLayer. * UIProcess/ios/RemoteLayerTreeHostIOS.mm: (-[WKRemoteView initWithFrame:contextID:]): (WebKit::RemoteLayerTreeHost::createLayer): (-[WKRemoteView initWithFrame:contextID:hostingDeviceScaleFactor:]): Deleted. * WebProcess/WebPage/mac/PlatformCALayerRemoteCustom.mm: (WebKit::PlatformCALayerRemoteCustom::PlatformCALayerRemoteCustom): LayoutTests: Adding new tests checking that CSS border, box-shadow and padding properties used on a WebGL <canvas> element correctly affect the position of the WebGL content. * webgl/webgl-border-expected.html: Added. * webgl/webgl-border.html: Added. * webgl/webgl-box-shadow-expected.html: Added. * webgl/webgl-box-shadow.html: Added. * webgl/webgl-padding-expected.html: Added. * webgl/webgl-padding.html: Added. Canonical link: https://commits.webkit.org/176513@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@201727 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2016-06-06 20:58:19 +00:00
<head>
<meta name="viewport" content="width=device-width">
<style>
canvas {
width: 100px;
height: 100px;
background-color: black;
padding: 10px;
}
</style>
</head>
<canvas>
<script type="text/javascript">
var canvas = document.querySelector("canvas");
canvas.width = canvas.clientWidth * window.devicePixelRatio;
canvas.height = canvas.clientHeight * window.devicePixelRatio;
var gl = canvas.getContext("webgl");
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
</script>
</canvas>