firefox-main/testing/web-platform/tests/svg/linking/reftests/svgview-preserveaspectratio-meet.html

Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>SVG fragment identifier: preserveAspectRatio(meet) inside svgView()</title>
<link rel="match" href="svgview-preserveaspectratio-meet-ref.html">
<meta name="assert" content="AspectParams in an svgView() specification are the parameter values of the preserveAspectRatio attribute. With xMidYMid meet a square view is scaled to fit a 2:1 box and centred, occupying the middle half. viewBox is a transform rather than a clip, and the outermost svg viewport is not clipped to it, so user space to the left of the selected quadrant remains visible in the left-hand quarter of the box.">
<!--
support/squares.svg is 200x200 with four solid quadrants:
#d46847 terracotta | #2a9d8f teal
#264653 indigo | #e9c46a sand
viewBox(100,0,100,100) selects the teal quadrant. The img is 100x50, so with
xMidYMid meet the scale is min(100/100, 50/100) = 0.5 and the 100x100 view lands
as a 50x50 area centred horizontally, at x=25 to 75.
What fills the rest of the box is the point of pairing this with
svgview-preserveaspectratio.html, which asserts the stretched case. viewBox is a
transform, not a clip, and the user agent style sheet applies overflow: hidden to
nested viewports only, not to the outermost svg. So user space outside the view
still paints wherever it lands inside the viewport:
x 0 to 25 user x 50 to 100, the right half of the terracotta quadrant
x 25 to 75 the selected teal quadrant
x 75 to 100 user x 200 onwards, past the edge of the document, so nothing
A test that asserted only the stretched case would pass in an implementation that
ignored AspectParams entirely and always filled the box, which is why this
companion exists.
-->
<style>
body { margin: 0; }
img { display: block; border: none; }
</style>
<img src="support/squares.svg#svgView(viewBox(100,0,100,100);preserveAspectRatio(xMidYMid meet))" width="100" height="50" alt="">