<!DOCTYPE html><!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/--><htmlclass="reftest-wait"><head><metacharset="utf-8"><title>CSS Test: various 'object-position' values on a fixed-size canvas element, with a PNG image and 'object-fit:contain'.</title><linkrel="author"title="Daniel Holbert"href="mailto:dholbert@mozilla.com"><linkrel="help"href="http://www.w3.org/TR/css3-images/#sizing"><linkrel="help"href="http://www.w3.org/TR/css3-images/#the-object-fit"><linkrel="help"href="http://www.w3.org/TR/css3-images/#the-object-position"><linkrel="match"href="object-position-png-002-ref.html"><styletype="text/css">canvas{background:lightgray;margin-right:2px;object-fit:contain;float:left;width:20px;height:20px;}.op_x-7{object-position:-7%50%}.op_x13{object-position:13%50%}.op_x23{object-position:23%50%}.op_x50{object-position:50%50%}.op_x75{object-position:75%50%}.op_x88{object-position:88%50%}.op_x111{object-position:111%50%}</style><script>functiondrawImageToCanvases(imageURI){varimage=newImage();image.onload=function(){varcanvasElems=document.getElementsByTagName("canvas");for(vari=0;i<canvasElems.length;i++){varctx=canvasElems[i].getContext("2d");ctx.drawImage(image,0,0);}document.documentElement.removeAttribute("class");}image.src=imageURI;}</script></head><bodyonload="drawImageToCanvases('support/colors-8x16.png')"><canvaswidth="8"height="16"class="op_x-7"></canvas><canvaswidth="8"height="16"class="op_x13"></canvas><canvaswidth="8"height="16"class="op_x23"></canvas><canvaswidth="8"height="16"class="op_x50"></canvas><canvaswidth="8"height="16"class="op_x75"></canvas><canvaswidth="8"height="16"class="op_x88"></canvas><canvaswidth="8"height="16"class="op_x111"></canvas></body></html>