@namespace "http://www.xmlmind.com/xmleditor/schema/imagedemo";
@namespace svg "http://www.w3.org/2000/svg";

heading {
    display: block;
    margin: 1ex 0;
    color: maroon;
    font-size: large;
    font-weight: bold;
}

para {
    display: block;
    margin: 1.33ex 0;
}

item {
    display: block;
    margin: 1.33ex 0 1.33ex 4ex;
}

item:before {
    display: inline;
    content: icon(right) " ";
    vertical-align: middle;
    color: maroon;
}

item > item {
    margin-left: 8ex;
}

item > item:before {
    content: icon(right) icon(right) " ";
}

bold {
    display: inline;
    font-weight: bold;
}

italic {
    display: inline;
    font-style: italic;
}

tt {
    display: inline;
    font-family: monospace;
}

image_au,
image_eu,
image_ab,
image_eb,
svg|svg {
    display: block;
    margin: 1.33ex auto;
}

image_au {
    /*
     * No need to specify data-type. The image-viewport will find it by itself.
     */

    content: image-viewport(attribute, location,
    viewport-width, attr(width),
    viewport-height, attr(height),
    preserve-aspect-ratio, attr(preserve_aspect_ratio),
    
    content-width, 
    xpath("if(@content_width='scale_to_fit',\
              'scale-to-fit',\
              @content_width)"),

    content-height,
    xpath("if(@content_height='scale_to_fit',\
              'scale-to-fit',\
              @content_height)"),

    horizontal-align,
    xpath("if(@anchor='west' or @anchor='north_west' or @anchor='south_west',\
	      'left',\
	      @anchor='center' or @anchor='north' or @anchor='south',\
	      'center',\
	      @anchor='east' or @anchor='north_east' or @anchor='south_east',\
	      'right',\
              'center')"),

    vertical-align, 
    xpath("if(@anchor='north' or @anchor='north_east' or @anchor='north_west',\
	      'top',\
	      @anchor='center' or @anchor='east' or @anchor='west',\
	      'middle',\
	      @anchor='south' or @anchor='south_east' or @anchor='south_west',\
	      'bottom',\
              'middle')")
    );
}

image_ab {
    /*
     * No need to specify data-type. The image-viewport will find it by itself.
     */

    content: image-viewport(attribute, data, gzip, true,
    viewport-width, attr(width),
    viewport-height, attr(height),
    preserve-aspect-ratio, attr(preserve_aspect_ratio),

    content-width, 
    xpath("if(@content_width='scale_to_fit',\
              'scale-to-fit',\
              @content_width)"),

    content-height,
    xpath("if(@content_height='scale_to_fit',\
              'scale-to-fit',\
              @content_height)"),

    horizontal-align,
    xpath("if(@anchor='west' or @anchor='north_west' or @anchor='south_west',\
	      'left',\
	      @anchor='center' or @anchor='north' or @anchor='south',\
	      'center',\
	      @anchor='east' or @anchor='north_east' or @anchor='south_east',\
	      'right',\
              'center')"),

    vertical-align, 
    xpath("if(@anchor='north' or @anchor='north_east' or @anchor='north_west',\
	      'top',\
	      @anchor='center' or @anchor='east' or @anchor='west',\
	      'middle',\
	      @anchor='south' or @anchor='south_east' or @anchor='south_west',\
	      'bottom',\
              'middle')")
    );
}

image_eu,
image_eb {
    /*
     * No need to specify data-type. The image-viewport will find it by itself.
     */

    content: image-viewport(
    viewport-width, attr(width),
    viewport-height, attr(height),
    preserve-aspect-ratio, attr(preserve_aspect_ratio),

    content-width, 
    xpath("if(@content_width='scale_to_fit',\
              'scale-to-fit',\
              @content_width)"),

    content-height,
    xpath("if(@content_height='scale_to_fit',\
              'scale-to-fit',\
              @content_height)"),

    horizontal-align,
    xpath("if(@anchor='west' or @anchor='north_west' or @anchor='south_west',\
	      'left',\
	      @anchor='center' or @anchor='north' or @anchor='south',\
	      'center',\
	      @anchor='east' or @anchor='north_east' or @anchor='south_east',\
	      'right',\
              'center')"),

    vertical-align, 
    xpath("if(@anchor='north' or @anchor='north_east' or @anchor='north_west',\
	      'top',\
	      @anchor='center' or @anchor='east' or @anchor='west',\
	      'middle',\
	      @anchor='south' or @anchor='south_east' or @anchor='south_west',\
	      'bottom',\
              'middle')")
    );
}

svg|svg {
    /*
     * No need to specify data-type. The image-viewport will find it by itself.
     */

    /* 
     * TRICK: the dummy parameters are used to add a dependency between
     * the width, height, viewBox, preserveAspectRatio attributes 
     * and the view of the svg:svg element. 
     */

    content: image-viewport(dummy, attr(width),
                            dummy, attr(height),
                            dummy, attr(viewBox),
                            dummy, attr(preserveAspectRatio));
}
