-
Notifications
You must be signed in to change notification settings - Fork 314
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add tests for fractional dimensions, see #438
- Loading branch information
Showing
3 changed files
with
132 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <rml> | ||
| <head> | ||
| <link type="text/rcss" href="/../Tests/Data/style.rcss"/> | ||
| <title>Fractional dimensions 01</title> | ||
| <link rel="#438" href="https://github.com/mikke89/RmlUi/issues/438"/> | ||
| <meta name="Description" content="Layout of elements with fractional height. Try zooming in and out (Ctrl +/-). The inner heights are allowed to vary by one pixel to accommodate the accumulation of the fractional pixels."/> | ||
| <style> | ||
| div { | ||
| border: 1dp black; | ||
| height: 1.2em; | ||
| padding-left: 1em; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p>Borders should have the same width everywhere and be placed edge to edge.</p> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </body> | ||
| </rml> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| <rml> | ||
| <head> | ||
| <link type="text/rcss" href="/../Tests/Data/style.rcss"/> | ||
| <title>Fractional dimensions 02</title> | ||
| <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> | ||
| <link rel="source" href="https://test.csswg.org/suites/css21_dev/20110323/xhtml1/units-005.xht"/> | ||
| <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/units/005.html"/> | ||
| <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#length-units"/> | ||
| <link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths"/> | ||
| <link rel="match" href="reference/fractional-dimensions-02-ref.rml"/> | ||
| <meta name="Description" content="Layout with fractionally sized elements. Here, 100 fractionally sized span elements fill a single div element."/> | ||
| <meta name="Instructions" content="Try different font sizes, zooms, and resolutions, as well as slightly different sizes for the floats."/> | ||
| <meta name="Assert" content="It's hard to fill the box perfectly for all combinations of scaling and box dimensions. Even Firefox and Chromium struggles with this for some combinations. However, we should at least try to avoid gaps between the individual span elements."/> | ||
| <style> | ||
| div { | ||
| width: 8.7em; | ||
| height: 8.7em; | ||
| background-color: red; | ||
| border: 3px lime; | ||
| } | ||
|
|
||
| span { | ||
| float: left; | ||
| width: 0.87em; | ||
| height: 0.87em; | ||
| background-color: green; | ||
| } | ||
|
|
||
| input[type="text"] { | ||
| text-align: right; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p>You should see no red below, just a green square with a green border.</p> | ||
| <div> | ||
| <!-- 100 spans --> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| <span></span> <span></span> <span></span> <span></span> <span></span> | ||
| </div> | ||
| </body> | ||
| </rml> |
18 changes: 18 additions & 0 deletions
18
Tests/Data/VisualTests/reference/fractional-dimensions-02-ref.rml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <rml> | ||
| <head> | ||
| <link type="text/rcss" href="/../Tests/Data/style.rcss"/> | ||
| <link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com"/> | ||
| <style> | ||
| div { | ||
| width: 8.7em; | ||
| height: 8.7em; | ||
| background-color: green; | ||
| border: 3px lime; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p>You should see no red below, just a green square with a green border.</p> | ||
| <div></div> | ||
| </body> | ||
| </rml> |