Source code
Revision control
Copy as Markdown
Other Tools
# This directory contains tests that test the sizing of the SVG viewport into
# which SVG is rendered. It includes tests for standalone SVG, SVG embedded by
# reference using the HTML <object> element, and SVG rendered inline within
# XHTML.
#
# SVG's <svg> element is a "replaced element". The main specification texts
# covering how the <svg> element is sized are:
#
!= scrollbars-01.svg scrollbars-01-anti-ref.svg
!= scrollbars-02.svg scrollbars-01-anti-ref.svg
# Standalone tests
#
# To get reasonable test coverage of the implementation of the replaced element
# algorythm we test all permutations of the CSS 'width' and 'height' properties
# having the values zero, auto, a px value or a percentage value, and of the
# intrinsic width and height (the 'width' and 'height' attributes) having the
# values zero, a px value or a percentage value. This gives us 4*4*3*3 == 144
# tests. On top of that, there are 12 cases from the 144 permutations for which
# the 'viewBox' attribute should have an affect (see below).
#
# In the file names for the standalone tests that follow, the first two fields
# denote the type of value specified for the CSS 'width' and 'height'
# properties, and the third and four fields denote the type of value used for
# the intrinsic width and height (i.e. the 'width' and 'height' attributes).
#
# Note that the standalone SVG testcases can't test defaulting to 300x150 px
# because SVG always has an intrinsic width and height. To get the size of an
# SVG to default to 300x150 px the SVG will need to have a containing block
# that depends on the SVG's size (e.g. a floating containing block). Again, see
# below for those tests.
== standalone--0-0--0-0.svg pass-empty.svg
== standalone--0-0--0-pct.svg pass-empty.svg
== standalone--0-0--0-px.svg pass-empty.svg
== standalone--0-0--pct-0.svg pass-empty.svg
== standalone--0-0--pct-pct.svg pass-empty.svg
== standalone--0-0--pct-px.svg pass-empty.svg
== standalone--0-0--px-0.svg pass-empty.svg
== standalone--0-0--px-pct.svg pass-empty.svg
== standalone--0-0--px-px.svg pass-empty.svg
== standalone--0-auto--0-0.svg pass-empty.svg
== standalone--0-auto--0-pct.svg pass-empty.svg
== standalone--0-auto--0-px.svg pass-empty.svg
== standalone--0-auto--pct-0.svg pass-empty.svg
== standalone--0-auto--pct-pct.svg pass-empty.svg
== standalone--0-auto--pct-px.svg pass-empty.svg
== standalone--0-auto--px-0.svg pass-empty.svg
== standalone--0-auto--px-pct.svg pass-empty.svg
== standalone--0-auto--px-px.svg pass-empty.svg
== standalone--0-pct--0-0.svg pass-empty.svg
== standalone--0-pct--0-pct.svg pass-empty.svg
== standalone--0-pct--0-px.svg pass-empty.svg
== standalone--0-pct--pct-0.svg pass-empty.svg
== standalone--0-pct--pct-pct.svg pass-empty.svg
== standalone--0-pct--pct-px.svg pass-empty.svg
== standalone--0-pct--px-0.svg pass-empty.svg
== standalone--0-pct--px-pct.svg pass-empty.svg
== standalone--0-pct--px-px.svg pass-empty.svg
== standalone--0-px--0-0.svg pass-empty.svg
== standalone--0-px--0-pct.svg pass-empty.svg
== standalone--0-px--0-px.svg pass-empty.svg
== standalone--0-px--pct-0.svg pass-empty.svg
== standalone--0-px--pct-pct.svg pass-empty.svg
== standalone--0-px--pct-px.svg pass-empty.svg
== standalone--0-px--px-0.svg pass-empty.svg
== standalone--0-px--px-pct.svg pass-empty.svg
== standalone--0-px--px-px.svg pass-empty.svg
== standalone--auto-0--0-0.svg pass-empty.svg
== standalone--auto-0--0-pct.svg pass-empty.svg
== standalone--auto-0--0-px.svg pass-empty.svg
== standalone--auto-0--pct-0.svg pass-empty.svg
== standalone--auto-0--pct-pct.svg pass-empty.svg
== standalone--auto-0--pct-px.svg pass-empty.svg
== standalone--auto-0--px-0.svg pass-empty.svg
== standalone--auto-0--px-pct.svg pass-empty.svg
== standalone--auto-0--px-px.svg pass-empty.svg
== standalone--auto-auto--0-0.svg pass-empty.svg
== standalone--auto-auto--0-pct.svg pass-empty.svg
== standalone--auto-auto--0-px.svg pass-empty.svg
== standalone--auto-auto--pct-0.svg pass-empty.svg
fuzzy-if(winWidget,0-1,0-400) == standalone--auto-auto--pct-pct.svg pass-pct-pct.xhtml
== standalone--auto-auto--pct-px.svg pass-pct-px.xhtml
== standalone--auto-auto--px-0.svg pass-empty.svg
== standalone--auto-auto--px-pct.svg pass-px-pct.xhtml
== standalone--auto-auto--px-px.svg pass-px-px.xhtml
== standalone--auto-pct--0-0.svg pass-empty.svg
== standalone--auto-pct--0-pct.svg pass-empty.svg
== standalone--auto-pct--0-px.svg pass-empty.svg
fuzzy-if(winWidget,0-1,0-400) == standalone--auto-pct--pct-0.svg pass-pct-pct.xhtml
fuzzy-if(winWidget,0-1,0-400) == standalone--auto-pct--pct-pct.svg pass-pct-pct.xhtml
fuzzy-if(winWidget,0-1,0-400) == standalone--auto-pct--pct-px.svg pass-pct-pct.xhtml
== standalone--auto-pct--px-0.svg pass-px-pct.xhtml
== standalone--auto-pct--px-pct.svg pass-px-pct.xhtml
fuzzy-if(winWidget,0-1,0-1000) == standalone--auto-pct--px-px.svg pass-pct-height-square.xhtml # intrinsic ratio!
== standalone--auto-px--0-0.svg pass-empty.svg
== standalone--auto-px--0-pct.svg pass-empty.svg
== standalone--auto-px--0-px.svg pass-empty.svg
== standalone--auto-px--pct-0.svg pass-pct-px.xhtml
== standalone--auto-px--pct-pct.svg pass-pct-px.xhtml
== standalone--auto-px--pct-px.svg pass-pct-px.xhtml
== standalone--auto-px--px-0.svg pass-px-px.xhtml
== standalone--auto-px--px-pct.svg pass-px-px.xhtml
== standalone--auto-px--px-px.svg pass-px-px.xhtml # intrinsic ratio!
== standalone--pct-0--0-0.svg pass-empty.svg
== standalone--pct-0--0-pct.svg pass-empty.svg
== standalone--pct-0--0-px.svg pass-empty.svg
== standalone--pct-0--pct-0.svg pass-empty.svg
== standalone--pct-0--pct-pct.svg pass-empty.svg
== standalone--pct-0--pct-px.svg pass-empty.svg
== standalone--pct-0--px-0.svg pass-empty.svg
== standalone--pct-0--px-pct.svg pass-empty.svg
== standalone--pct-0--px-px.svg pass-empty.svg
== standalone--pct-auto--0-0.svg pass-empty.svg
fuzzy-if(winWidget,0-1,0-400) == standalone--pct-auto--0-pct.svg pass-pct-pct.xhtml
== standalone--pct-auto--0-px.svg pass-pct-px.xhtml
== standalone--pct-auto--pct-0.svg pass-empty.svg
fuzzy-if(winWidget,0-1,0-400) == standalone--pct-auto--pct-pct.svg pass-pct-pct.xhtml
== standalone--pct-auto--pct-px.svg pass-pct-px.xhtml
== standalone--pct-auto--px-0.svg pass-empty.svg
fuzzy-if(winWidget,0-1,0-400) == standalone--pct-auto--px-pct.svg pass-pct-pct.xhtml
== standalone--pct-auto--px-px.svg pass-pct-width-square.xhtml # intrinsic ratio!
fuzzy-if(winWidget,0-1,0-400) == standalone--pct-pct--0-0.svg pass-pct-pct.xhtml
fuzzy-if(winWidget,0-1,0-400) == standalone--pct-pct--0-pct.svg pass-pct-pct.xhtml
fuzzy-if(winWidget,0-1,0-400) == standalone--pct-pct--0-px.svg pass-pct-pct.xhtml
fuzzy-if(winWidget,0-1,0-400) == standalone--pct-pct--pct-0.svg pass-pct-pct.xhtml
fuzzy-if(winWidget,0-1,0-400) == standalone--pct-pct--pct-pct.svg pass-pct-pct.xhtml
fuzzy-if(winWidget,0-1,0-400) == standalone--pct-pct--pct-px.svg pass-pct-pct.xhtml
fuzzy-if(winWidget,0-1,0-400) == standalone--pct-pct--px-0.svg pass-pct-pct.xhtml
fuzzy-if(winWidget,0-1,0-400) == standalone--pct-pct--px-pct.svg pass-pct-pct.xhtml
fuzzy-if(winWidget,0-1,0-400) == standalone--pct-pct--px-px.svg pass-pct-pct.xhtml
== standalone--pct-px--0-0.svg pass-pct-px.xhtml
== standalone--pct-px--0-pct.svg pass-pct-px.xhtml
== standalone--pct-px--0-px.svg pass-pct-px.xhtml
== standalone--pct-px--pct-0.svg pass-pct-px.xhtml
== standalone--pct-px--pct-pct.svg pass-pct-px.xhtml
== standalone--pct-px--pct-px.svg pass-pct-px.xhtml
== standalone--pct-px--px-0.svg pass-pct-px.xhtml
== standalone--pct-px--px-pct.svg pass-pct-px.xhtml
== standalone--pct-px--px-px.svg pass-pct-px.xhtml
== standalone--px-0--0-0.svg pass-empty.svg
== standalone--px-0--0-pct.svg pass-empty.svg
== standalone--px-0--0-px.svg pass-empty.svg
== standalone--px-0--pct-0.svg pass-empty.svg
== standalone--px-0--pct-pct.svg pass-empty.svg
== standalone--px-0--pct-px.svg pass-empty.svg
== standalone--px-0--px-0.svg pass-empty.svg
== standalone--px-0--px-pct.svg pass-empty.svg
== standalone--px-0--px-px.svg pass-empty.svg
== standalone--px-auto--0-0.svg pass-empty.svg
== standalone--px-auto--0-pct.svg pass-px-pct.xhtml
== standalone--px-auto--0-px.svg pass-px-px.xhtml
== standalone--px-auto--pct-0.svg pass-empty.svg
== standalone--px-auto--pct-pct.svg pass-px-pct.xhtml
== standalone--px-auto--pct-px.svg pass-px-px.xhtml
== standalone--px-auto--px-0.svg pass-empty.svg
== standalone--px-auto--px-pct.svg pass-px-pct.xhtml
== standalone--px-auto--px-px.svg pass-px-px.xhtml # intrinsic ratio!
== standalone--px-pct--0-0.svg pass-px-pct.xhtml
== standalone--px-pct--0-pct.svg pass-px-pct.xhtml
== standalone--px-pct--0-px.svg pass-px-pct.xhtml
== standalone--px-pct--pct-0.svg pass-px-pct.xhtml
== standalone--px-pct--pct-pct.svg pass-px-pct.xhtml
== standalone--px-pct--pct-px.svg pass-px-pct.xhtml
== standalone--px-pct--px-0.svg pass-px-pct.xhtml
== standalone--px-pct--px-pct.svg pass-px-pct.xhtml
== standalone--px-pct--px-px.svg pass-px-pct.xhtml
== standalone--px-px--0-0.svg pass-px-px.xhtml
== standalone--px-px--0-pct.svg pass-px-px.xhtml
== standalone--px-px--0-px.svg pass-px-px.xhtml
== standalone--px-px--pct-0.svg pass-px-px.xhtml
== standalone--px-px--pct-pct.svg pass-px-px.xhtml
== standalone--px-px--pct-px.svg pass-px-px.xhtml
== standalone--px-px--px-0.svg pass-px-px.xhtml
== standalone--px-px--px-pct.svg pass-px-px.xhtml
== standalone--px-px--px-px.svg pass-px-px.xhtml
# As mentioned above, the 'viewBox' attribute may play a part in the sizing of
# the SVG viewport in 12 of the 144 standalone tests above. The 'viewBox'
# attribute only affects the replaced element sizing algorithm (by providing an
# intrinsic ratio) when the SVG 'width' and 'height' attributes don't provide
# an intrinsic ratio but the algorithm says the intrinsic ratio should be used
# if avaliable. In other words, this is when one of the CSS properties 'width'
# or 'height' has the value 'auto' and the other has a non-zero value, while
# one or both of the SVG 'width' and 'height' attributes has a percentage
# value. For the standalone tests above that means the value of the 'viewBox'
# attribute matters in the 12 cases that follow.
#
# XXX We could also check that 'viewBox' does NOT have an affect in the other
# cases.
#
# XXX What about cases like standalone--auto-pct--0-px--viewBox.svg? Is the
# intrinsic ratio zero and not used, or should we use the viewBox ratio?
== standalone--auto-pct--pct-pct--viewBox.svg pass-pct-height-square.xhtml
== standalone--auto-pct--pct-px--viewBox.svg pass-pct-height-square.xhtml
== standalone--auto-pct--px-pct--viewBox.svg pass-pct-height-square.xhtml
== standalone--auto-px--pct-pct--viewBox.svg pass-px-px.xhtml
== standalone--auto-px--pct-px--viewBox.svg pass-px-px.xhtml
== standalone--auto-px--px-pct--viewBox.svg pass-px-px.xhtml
== standalone--pct-auto--pct-pct--viewBox.svg pass-pct-width-square.xhtml
== standalone--pct-auto--pct-px--viewBox.svg pass-pct-width-square.xhtml
== standalone--pct-auto--px-pct--viewBox.svg pass-pct-width-square.xhtml
== standalone--px-auto--pct-pct--viewBox.svg pass-px-px.xhtml
== standalone--px-auto--pct-px--viewBox.svg pass-px-px.xhtml
== standalone--px-auto--px-pct--viewBox.svg pass-px-px.xhtml
# Sanity tests. These tests check that our choice of percentage width (49%)
# doesn't coincidently result in the same width as our choice of px width
# (70px) or the fall back width (300 px), and that our choice of percentage
# height (49%) doesn't coincidently result in the same height as our choice of
# px height (70px) or the fall back height (150 px). This ensures that we won't
# miss false positives for the tests:
#
# standalone--pct-xxx--px-xxx.svg
# standalone--xxx-pct--xxx-px.svg
# standalone--px-xxx--pct-xxx.svg
# standalone--xxx-px--xxx-pct.svg
#
# if the user agent ignores the CSS property and uses the attribute instead.
# This will happen if the content area width is 612 px or the content height is
# 306 px. Hopefully it's unlikely testers will encounter this.
!= standalone-sanity-width-pct.svg standalone-sanity-width-px.svg
!= standalone-sanity-width-pct.svg standalone-sanity-width-300px.svg
!= standalone-sanity-height-pct.svg standalone-sanity-height-px.svg
!= standalone-sanity-height-pct.svg standalone-sanity-height-150px.svg
# Embedded inline tests
#
# The standalone tests provide a reasonable workout for replaced element
# algorithm sizing, but we also want to test that SVG embedded inline is
# positioned correctly when the properties 'display', 'float' and 'position'
# are set to different values.
#
# We could certainly expand on these tests, but they provide reasonable base
# coverage.
== inline--display-block--01.xhtml inline--display-block--01-ref.xhtml
fuzzy-if(cocoaWidget,0-1,0-10) == inline--display-inline--01.xhtml inline--display-inline--01-ref.xhtml
== inline--display-inline-block--01.xhtml inline--display-inline-block--01-ref.xhtml
== inline--float-left--01.xhtml inline--float-left--01-ref.xhtml
== inline--float-right--01.xhtml inline--float-right--01-ref.xhtml
== inline--position-absolute--01.xhtml inline--position-absolute--01-ref.xhtml
== inline--position-absolute--02.xhtml pass.svg
== inline--position-relative--01.xhtml inline--position-relative--01-ref.xhtml
# Embedded by reference tests
#
# One issue when it comes to documents embedded by reference is whether
# non-'auto' values for the CSS 'width' and 'height' properties on the
# _embedded_ document's root element should be used as intrinsic values by
# replaced elements like HTML <object>. For the sake of simplicity we will
# ignore this case for now, but it's certainly worth revisiting at some point
# in the future.
#
# Since we have given the replaced element algorithm a reasonable workout in
# the standalone tests, for the embedded by reference tests we will simply
# check that the embedded SVG's intrinsic dimensions are used. The following
# tests do not have any width or height on the <object> element so they should
# be sized purely by the embedded SVG's intrinsic size.
random-if(Android) == object--auto-auto--0-0.html pass-empty.svg # XXX add border
random-if(Android) == object--auto-auto--0-pct.html object--auto-auto--0-pct--ref.html
random-if(Android) == object--auto-auto--0-px.html object--auto-auto--0-px--ref.html
random-if(Android) == object--auto-auto--pct-0.html object--auto-auto--pct-0--ref.html
#== object--auto-auto--pct-pct.html object--auto-auto--pct-pct--ref.html
#== object--auto-auto--pct-px.html object--auto-auto--pct-px--ref.html
random-if(Android) == object--auto-auto--px-0.html object--auto-auto--px-0--ref.html
#== object--auto-auto--px-pct.html object--auto-auto--px-pct--ref.html
random-if(Android) == object--auto-auto--px-px.html object--auto-auto--px-px--ref.html
#== object--pct-pct--0-0.html pass.svg
# Assorted tests to check that dynamic changes work correctly
#
# Here we have an assortment of different tests to check that updates occur
# correctly when changes are made that should result in a change in the size
# or position of the SVG.
== dynamic--inline-css-height.xhtml pass.svg
== dynamic--inline-css-width.xhtml pass.svg
skip == dynamic--inline-resize-window-height.xhtml pass.svg # XXX breaks the reftest run as the window height somehow is not restored
skip == dynamic--inline-resize-window-width.xhtml pass.svg # Fails way too much
random-if(Android) == dynamic--object-svg-unloaded.xhtml pass.svg
# == dynamic--object--auto-auto--pct-px.html
# FIXME(dlrobertson): Blink and WebKit do no not pass the following tests due
# due to a difference in surface size calculation.
== canvas-drawImage-no-width-or-height.html canvas-drawImage-no-width-or-height-ref.html
== canvas-drawImage-width-with-no-height.html canvas-drawImage-width-with-no-height-ref.html
== canvas-drawImage-height-with-no-width.html canvas-drawImage-height-with-no-width-ref.html