border-image-repeat-round-003-ref.html (4131B)
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: 224px; 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: 208px; 28 width: 208px; 29 } 30 31 div#third-subtest 32 { 33 background-color: black; 34 display: inline-table; 35 margin-top: 1em; 36 table-layout: fixed; 37 38 height: 272px; 39 width: 296px; 40 } 41 </style> 42 43 <div id="first-subtest"> 44 <div style="display: table-row;"> 45 <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> 46 </div> 47 48 <div style="display: table-row;"> 49 <div style="display: table-cell; background-image: linear-gradient(orange 0% 25%, blue 25% 50%, orange 50% 75%, blue 75% 100%);"></div><div style="display: table-cell;"></div><div style="display: table-cell; background-image: linear-gradient(orange 0% 25%, blue 25% 50%, orange 50% 75%, blue 75% 100%);"></div> 50 </div> 51 52 <div style="display: table-row;"> 53 <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> 54 </div> 55 </div> 56 57 <div id="second-subtest" style="vertical-align: bottom;"> 58 <div style="display: table-row;"> 59 <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> 60 </div> 61 62 <div style="display: table-row;"> 63 <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> 64 </div> 65 66 <div style="display: table-row;"> 67 <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> 68 </div> 69 </div><br> 70 71 <div id="third-subtest"> 72 <div style="display: table-row;"> 73 <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0px 28px, purple 28px 56px, yellow 56px 84px, purple 84px 112px, yellow 112px 140px, purple 140px 168px, yellow 168px 196px, purple 196px 224px);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> 74 </div> 75 76 <div style="display: table-row;"> 77 <div style="display: table-cell; background-image: linear-gradient(orange 0% 25%, blue 25% 50%, orange 50% 75%, blue 75% 100%);"></div><div style="display: table-cell;"></div><div style="display: table-cell; background-image: linear-gradient(orange 0% 25%, blue 25% 50%, orange 50% 75%, blue 75% 100%);"></div> 78 </div> 79 80 <div style="display: table-row;"> 81 <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0px 28px, purple 28px 56px, yellow 56px 84px, purple 84px 112px, yellow 112px 140px, purple 140px 168px, yellow 168px 196px, purple 196px 224px);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> 82 </div> 83 </div>