Acid Text

Time limit1sMemory limit128 MB

Summary
Parse a simplified CSS style sheet, resolve each graphic's absolute or relative position, then composite the graphics by layer order into one canvas with a black background.
Level

Medium4 of 10

Topics
Implementation, Simulation, Sorting, Matrix
Solved
No attempts yet

Problem

A while ago the Web Standards Project (WaSP) released a conformance test for modern browsers and their CSS engines, called Acid2. The test checks that browsers produce the same result when they parse and render cascading style sheets (CSS) for HTML. To make your favourite text-based browser, Lynks, more standards-compliant than any other text browser, you decide to add CSS support to it.

Your text browser is given a set of graphic files and a simplified style sheet. A graphic is described by a name, a height, a width and a 2-dimensional array of characters. The character . denotes a transparent pixel and is not drawn; every other character is printed as-is. Here is an example graphic:

owl.png 5 7
.-----.
|O...O|
|..v..|
|.<_>.|
.-----.

Given the style sheet, your task is to produce the picture the browser should display. A style sheet consists of a number of entries, each written like this:

#<id> {
  pos-x : <x> px ;
  pos-y : <y> px ;
  position : <relative = <id>|absolute> ;
  file : <filename> ;
  layer : <layer-number> ;
}

The following rules hold for CSS entries:

  • Lines. Every CSS entry is given on exactly 7 lines, as shown above.
  • Order. Every entry contains exactly the 5 attributes pos-x, pos-y, position, file and layer, in this order, each on its own line.
  • Whitespace. There may be zero or more whitespace characters (spaces and tabs) at the beginning of a line, at the end of a line, and anywhere the template above has a space.

Rules for composing the picture:

  • Background. The background is assumed to be black, i.e. plain spaces.
  • Positioning. The top-left corner of the display is (x, y) = (0, 0). Absolute positioning is always measured from this top-left corner. Relative positioning is always measured from the top-left pixel of another entry (referenced by its id). There are no circular references between entries, and every resulting position has x ≥ 0 and y ≥ 0.
  • Layering. Graphics with a higher layer number are drawn after graphics with a lower layer number. Graphics with the same layer number are drawn in the order they appear in the style sheet, so a later graphic overwrites the non-transparent pixels of an earlier one.

Input

The first line contains the number of scenarios that follow. Each scenario is given as follows. The first line contains the number of files that follow (at least 1, at most 100). Each file is given by a space-separated filename f, height h and width w (1 ≤ w, h ≤ 100), followed by h lines each containing exactly w characters. After the file definitions, a single line contains a number m (at least 1, at most 500), followed by a style sheet of m entries.

You may assume the resulting picture is at most 1000 × 1000 characters. All coordinates in CSS entries are integers with absolute value less than 1000000. All filenames and identifiers consist only of alphanumeric characters and dots. No two files share a name, and no two identifiers are equal. The layer attribute is at least 0 and at most 1000000.

Output

For each scenario, first print a line Scenario #i:, where i is the scenario number starting from 1. Then print the picture obtained by overlaying all graphics according to the style sheet.

The picture must be the smallest possible rectangle whose top-left corner is position (0, 0). Transparent pixels still belong to the picture, even when they lie exactly on the border, so the rectangle is bounded by the full extent (including transparent pixels) of every placed graphic. Pad every empty cell with a space and print each row at the full width, without stripping trailing spaces. Separate consecutive scenarios with a single blank line.

Examples2

  1. Example 1

    Input
    1
    4
    bg.png 5 7
    .-----.
    |.....|
    |.....|
    |.....|
    .-----.
    eye.jpg 1 1
    O
    nose.bmp 1 1
    v
    mouth.png 1 3
    <_>
    5
    #bg {
    	pos-x: 1 px;
    	pos-y: 1 px;
    	position: absolute;
      file: bg.png;
      layer: 0;
    }
    #leftEye {
    	pos-x: 1 px;
    	pos-y: 1 px;
    	position: relative=bg;
      file: eye.jpg;
      layer: 1;
    }
    #rightEye {
    	pos-x: 4 px;
    	pos-y: 0 px;
    	position: relative=leftEye;
      file: eye.jpg;
      layer: 1;
    }
    #nose {
      pos-x: 2 px;
      pos-y: 1 px;
      position: relative=leftEye;
      file: nose.bmp;
      layer: 1;
    }
    #mouth {
      pos-x: -1 px;
      pos-y: 1 px;
      position: relative = nose;
      file: mouth.png;
      layer: 1;
    }
    
    Expected output
    Scenario #1:
            
      ----- 
     |O   O|
     |  v  |
     | <_> |
      ----- 
    
  2. Example 2

    Input
    2
    1
    x.png 1 1
    X
    1
    #x {
      pos-x: 0 px;
      pos-y: 0 px;
      position: absolute;
      file: x.png;
      layer: 0;
    }
    1
    y.png 1 1
    Y
    1
    #y {
      pos-x: 0 px;
      pos-y: 0 px;
      position: absolute;
      file: y.png;
      layer: 0;
    }
    
    Expected output
    Scenario #1:
    X
    
    Scenario #2:
    Y