border-image-repeat-round-stretch-001-ref.html (2623B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Reftest reference</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 9 <style> 10 div#first-subtest 11 { 12 background-color: black; 13 display: inline-table; 14 margin-right: 1em; 15 table-layout: fixed; 16 17 height: 320px; 18 width: 224px; 19 } 20 21 div#second-subtest 22 { 23 background-color: black; 24 display: inline-table; 25 table-layout: fixed; 26 27 height: 256px; 28 width: 208px; 29 } 30 </style> 31 32 <div id="first-subtest"> 33 <div style="display: table-row;"> 34 <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 25%, purple 25% 50%, yellow 50% 75%, purple 75% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> 35 </div> 36 37 <div style="display: table-row;"> 38 <div style="display: table-cell; background-image: linear-gradient(orange 0% 50%, blue 50% 100%);"></div><div style="display: table-cell;"></div><div style="display: table-cell; background-image: linear-gradient(orange 0% 50%, blue 50% 100%);"></div> 39 </div> 40 41 <div style="display: table-row;"> 42 <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 25%, purple 25% 50%, yellow 50% 75%, purple 75% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> 43 </div> 44 </div> 45 46 <div id="second-subtest" style="vertical-align: bottom;"> 47 <div style="display: table-row;"> 48 <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 50%, purple 50% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> 49 </div> 50 51 <div style="display: table-row;"> 52 <div style="display: table-cell; background-image: linear-gradient(orange 0% 50%, blue 50% 100%);"></div><div style="display: table-cell;"></div><div style="display: table-cell; background-image: linear-gradient(orange 0% 50%, blue 50% 100%);"></div> 53 </div> 54 55 <div style="display: table-row;"> 56 <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 50%, purple 50% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> 57 </div> 58 </div>