# 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 element, and SVG rendered inline within # XHTML. # # SVG's element is a "replaced element". The main specification texts # covering how the element is sized are: # # http://www.w3.org/TR/SVGMobile12/coords.html#InitialViewport # http://www.w3.org/TR/SVGMobile12/coords.html#IntrinsicSizing # http://www.w3.org/TR/CSS21/visudet.html skip-if(Android) != scrollbars-01.svg scrollbars-01-anti-ref.svg skip-if(Android) != 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(d2d,1,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(d2d,1,400) == standalone--auto-pct--pct-0.svg pass-pct-pct.xhtml fuzzy-if(d2d,1,400) == standalone--auto-pct--pct-pct.svg pass-pct-pct.xhtml fuzzy-if(d2d,1,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(d2d,1,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(d2d,1,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(d2d,1,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(d2d,1,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(d2d,1,400) == standalone--pct-pct--0-0.svg pass-pct-pct.xhtml fuzzy-if(d2d,1,400) == standalone--pct-pct--0-pct.svg pass-pct-pct.xhtml fuzzy-if(d2d,1,400) == standalone--pct-pct--0-px.svg pass-pct-pct.xhtml fuzzy-if(d2d,1,400) == standalone--pct-pct--pct-0.svg pass-pct-pct.xhtml fuzzy-if(d2d,1,400) == standalone--pct-pct--pct-pct.svg pass-pct-pct.xhtml fuzzy-if(d2d,1,400) == standalone--pct-pct--pct-px.svg pass-pct-pct.xhtml fuzzy-if(d2d,1,400) == standalone--pct-pct--px-0.svg pass-pct-pct.xhtml fuzzy-if(d2d,1,400) == standalone--pct-pct--px-pct.svg pass-pct-pct.xhtml fuzzy-if(d2d,1,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(OSX,1,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 . 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 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 # The following four commented out tests fail post bug 428023: #== 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 fails random-if(Android) == dynamic--object-svg-unloaded.xhtml pass.svg # == dynamic--object--auto-auto--pct-px.html