2018-02-19 02:55:30 -08:00
<!DOCTYPE html> < html > < head > < meta charSet = "utf-8" / > < meta http-equiv = "x-ua-compatible" content = "ie=edge" / > < meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" / > < link rel = "preload" href = "/component---src-templates-without-playground-js-c846644ebb9112e0fea6.js" as = "script" / > < link rel = "preload" href = "/path---contributing-testing-809438e1a2b6903e076e.js" as = "script" / > < link rel = "preload" href = "/app-cee525c56d69d4f858de.js" as = "script" / > < link rel = "preload" href = "/commons-7ed8a46bf14ac4d92d59.js" as = "script" / > < title data-react-helmet = "true" > Yoga Layout | Testing< / title > < link data-react-helmet = "true" rel = "shortcut icon" type = "image/png" href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYwNDQ4NUY5MEI3MjExRTg5RkZCQ0EwNjc2MDFENkQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYwNDQ4NUZBMEI3MjExRTg5RkZCQ0EwNjc2MDFENkQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjA0NDg1RjcwQjcyMTFFODlGRkJDQTA2NzYwMUQ2RDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjA0NDg1RjgwQjcyMTFFODlGRkJDQTA2NzYwMUQ2RDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4m185NAAAT8ElEQVR42uxdC3QW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
2018-02-16 09:03:21 -08:00
< p > Yoga tries to be as close as possible to chrome in its flexbox behaviour.
To ensure this most of Yoga's test suite is automatically generateded from
running the corresponding layout in chrome using a webdriver which then generates
C++ test which asserts that Yoga will produce matching outputs for that layout.< / p >
< h2 > Running the Test Suite< / h2 >
< ol >
< li > Yoga builds with < a href = "https://buckbuild.com" > buck< / a > . Follow their documentation to get up and running.< / li >
< li > For testing Yoga relies on < a href = "https://github.com/google/googletest" > gtest< / a > as a submodule. After cloning Yoga run < code > git submodule init< / code > followed by < code > git submodule update< / code > .< / li >
< li > In a terminal from the root of your Yoga checkout run < code > buck test //:yoga< / code > .< / li >
< / ol >
< h2 > Adding a Test< / h2 >
< p > Instead of manually writing a test which ensures parity with web implementations
of Flexbox we make use of a generated test suite. We use < code > gentest/gentest.rb< / code > to
generate this test suite. Write the html which you want to verify in Yoga and put
it in the < code > gentest/fixtures< / code > folder, such as the following.< / p >
< div class = "gatsby-highlight" >
< pre class = "language-html" > < code > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > id< / span > < span class = "token attr-value" > < span class = "token punctuation" > =< / span > < span class = "token punctuation" > "< / span > my_test< span class = "token punctuation" > "< / span > < / span > < span class = "token style-attr language-css" > < span class = "token attr-name" > < span class = "token attr-name" > style< / span > < / span > < span class = "token punctuation" > ="< / span > < span class = "token attr-value" > < span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 100px< span class = "token punctuation" > ;< / span > < span class = "token property" > height< / span > < span class = "token punctuation" > :< / span > 100px< span class = "token punctuation" > ;< / span > < span class = "token property" > align-items< / span > < span class = "token punctuation" > :< / span > center< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token style-attr language-css" > < span class = "token attr-name" > < span class = "token attr-name" > style< / span > < / span > < span class = "token punctuation" > ="< / span > < span class = "token attr-value" > < span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 50px< span class = "token punctuation" > ;< / span > < span class = "token property" > height< / span > < span class = "token punctuation" > :< / span > 50px< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< / code > < / pre >
< / div >
< p > Run < code > gentest/gentest.rb< / code > to generate test code and re-run < code > buck test //:yoga< / code >
to validate the behavior. One test case will be generated for every root < code > div< / code >
in the input html with the string in the < code > id< / code > corresponding to the test name.< / p >
< p > You may need to install the latest watir gem (< code > gem install watir< / code > ) and
< a href = "https://sites.google.com/a/chromium.org/chromedriver/" > ChromeDriver< / a > to
run < code > gentest/gentest.rb< / code > Ruby script.< / p >
< h2 > Manual test< / h2 >
< p > For some aspects of Yoga we cannot generate a test using the test generation
infrastructure described earlier. For these cases we manually write a test in
2018-02-19 02:55:30 -08:00
the < code > /tests< / code > directory. < / p > < / div > < / div > < / div > < a class = "overview" href = "/docs" > BACK TO OVERVIEW< / a > < / div > < / div > < div class = "Footer" > < a href = "https://code.facebook.com/projects/" class = "logoOSS" > < svg viewBox = "0 0 1133.9 1133.9" > < g > < path d = "M 498.3 3.7 c 153.6 88.9 307.3 177.7 461.1 266.2 c 7.6 4.4 10.3 9.1 10.3 17.8 c -0.3 179.1 -0.2 358.3 0 537.4 c 0 8.1 -2.4 12.8 -9.7 17.1 c -154.5 88.9 -308.8 178.1 -462.9 267.5 c -9 5.2 -15.5 5.3 -24.6 0.1 c -153.9 -89.2 -307.9 -178 -462.1 -266.8 C 3 838.8 0 833.9 0 825.1 c 0.3 -179.1 0.2 -358.3 0 -537.4 c 0 -8.6 2.6 -13.6 10.2 -18 C 164.4 180.9 318.4 92 472.4 3 C 477 -1.5 494.3 -0.7 498.3 3.7 Z M 48.8 555.3 c 0 79.9 0.2 159.9 -0.2 239.8 c -0.1 10 3 15.6 11.7 20.6 c 137.2 78.8 274.2 157.8 411 237.3 c 9.9 5.7 17 5.7 26.8 0.1 c 137.5 -79.8 275.2 -159.2 412.9 -238.5 c 7.4 -4.3 10.5 -8.9 10.5 -17.8 c -0.3 -160.2 -0.3 -320.5 0 -480.7 c 0 -8.8 -2.8 -13.6 -10.3 -18 C 772.1 218 633.1 137.8 494.2 57.4 c -6.5 -3.8 -11.5 -4.5 -18.5 -0.5 C 336.8 137.4 197.9 217.7 58.8 297.7 c -7.7 4.4 -10.2 9.2 -10.2 17.9 C 48.9 395.5 48.8 475.4 48.8 555.3 Z" > < / path > < path d = "M 184.4 555.9 c 0 -33.3 -1 -66.7 0.3 -100 c 1.9 -48 24.1 -86 64.7 -110.9 c 54.8 -33.6 110.7 -65.5 167 -96.6 c 45.7 -25.2 92.9 -24.7 138.6 1 c 54.4 30.6 108.7 61.5 162.2 93.7 c 44 26.5 67.3 66.8 68 118.4 c 0.9 63.2 0.9 126.5 0 189.7 c -0.7 50.6 -23.4 90.7 -66.6 116.9 c -55 33.4 -110.8 65.4 -167.1 96.5 c -43.4 24 -89 24.2 -132.3 0.5 c -57.5 -31.3 -114.2 -64 -170 -98.3 c -41 -25.1 -62.9 -63.7 -64.5 -112.2 C 183.5 621.9 184.3 588.9 184.4 555.9 Z M 232.9 556.3 c 0 29.5 0.5 59.1 -0.1 88.6 c -0.8 39.2 16.9 67.1 50.2 86.2 c 51.2 29.4 102.2 59.2 153.4 88.4 c 31.4 17.9 63.6 18.3 95 0.6 c 53.7 -30.3 107.1 -61.2 160.3 -92.5 c 29.7 -17.5 45 -44.5 45.3 -78.8 c 0.6 -61.7 0.5 -123.5 0 -185.2 c -0.3 -34.4 -15.3 -61.5 -44.9 -79 C 637.7 352.6 583 320.8 527.9 290 c -27.5 -15.4 -57.2 -16.1 -84.7 -0.7 c -56.9 31.6 -113.4 64 -169.1 97.6 c -26.4 15.9 -40.7 41.3 -41.1 72.9 C 232.6 491.9 232.9 524.1 232.9 556.3 Z" > < / path > < path d = "M 484.9 424.4 c 69.8 -2.8 133.2 57.8 132.6 132 C 617 630 558.5 688.7 484.9 689.1 c -75.1 0.4 -132.6 -63.6 -132.7 -132.7 C 352.1 485 413.4 421.5 484.9 424.4 Z M 401.3 556.7 c -3.4 37.2 30.5 83.6 83 84.1 c 46.6 0.4 84.8 -37.6 84.9 -84 c 0.1 -46.6 -37.2 -84.4 -84.2 -84.6 C 432.2 472.1 397.9 518.3 401.3 556.7 Z" > < / path > < / g > < / svg > Facebook Open Source< / a > < div class = "SocialNetwork" > < a href = "https://github.com/facebook/yoga" > GitHub< / a > < a href = "https://twitter.com/yogalayout" > Twitter< / a > < / div > < / div > < / div > < / div > < / div > < script id = "webpack-manifest" > / * < ! [ C D A T A [ * / w i n d o w . w e b p a c k M a n i f e s t = { " 2 3 1 6 0 8 2 2 1 2 9 2 6 7 5 " : " a p p - c e e 5 2 5 c 5 6 d 6 9 d 4 f 8 5 8 d e . j s " , " 7 2 5 7 2 6 7 0 7 5 6 3 8 4 " : " c o m p o n e n t - - - s r c - t e m p l a t e s - w i t h o u t - p l a y g r o u n d - j s - c 8 4 6 6 4 4 e b b 9 1 1 2 e 0 f e a 6 . j s " , " 2 0 4 3 9 0 8 6 4 2 6 7 4 8 2 " : " c o m p o n e n t - - - s r c - t e m p l a t e s - w i t h - p l a y g r o u n d - j s - 1 d e a 0 5 7 7 6 6 c 1 d e e 1 2 8 f c . j s " , " 1 6 2 8 9 8 5 5 1 4 2 1 0 2 1 " : " c o m p o n e n t - - - s r c - p a g e s - 4 0 4 - j s - 6 7 5 0 6 e d 2 6 f 7 8 0 4 9 9 e 2 5 a . j s " , " 2 7 8 2 4 1 0 8 7 4 5 4 9 7 9 " : " c o m p o n e n t - - - s r c - p a g e s - d o c s - i n d e x - j s - 3 e c 7 e 5 c a 8 3 2 c 5 c 4 f 7 5 f 4 . j s " , " 3 5 7 8 3 9 5 7 8 2 7 7 8 3 " : " c o m p o n e n t - - - s r c - p a g e s - i n d e x - j s - c f b b b 0 a 3 9 1 b 1 7 d a 5 3 1 e 9 . j s " , " 2 5 4 7 9 1 7 8 1 3 8 8 1 2 6 " : " c o m p o n e n t - - - s r c - p a g e s - p l a y g r o u n d - i n d e x - j s - c e 2 9 f 9 0 4 3 e 2 7 8 b 6 4 6 c f 5 . j s " , " 7 6 1 1 3 4 6 9 3 5 9 6 7 3 " : " p a t h - - - g e t t i n g - s t a r t e d - s t a n d a l o n e - e f 3 1 0 2 d 2 6 e d f 8 d 2 7 7 1 9 4 . j s " , " 2 1 2 4 3 7 9 2 6 6 3 0 4 0 7 " : " p a t h - - - c o n t r i b u t i n g - o p e n i n g - a - p u l l - r e q u e s t - 0 c d 9 f 2 0 6 5 9 a d 3 2 9 0 e d 9 5 . j s " , " 1 9 2 6 6 3 8 0 5 7 6 5 4 7 5 " : " p a t h - - - c o n t r i b u t i n g - w r i t i n g - d o c u m e n t a t i o n - 6 c 0 3 1 5 1 0 5 3 a 5 c 8 e 8 5 1 d 9 . j s " , " 2 6 8 1 1 6 9 7 1 6 2 6 6 7 3 " : " p a t h - - - c o n t r i b u t i n g - t e s t i n g - 8 0 9 4 3 8 e 1 a 2 b 6 9 0 3 e 0 7 6 e . j s " , " 2 1 0 2 1 5 7 9 3 0 7 6 3 7 3 " : " p a t h - - - d o c s - a b s o l u t e - r e l a t i v e - l a y o u t - 4 7 0 1 5 8 5 8 d d 4 d 0 3 a 5 5 3 4 c . j s " , " 2 0 5 1 6 4 6 0 5 3 9 3 4 4 8 " : " p a t h - - - d o c s - a l i g n - c o n t e n t - b c f 4 5 5 c e 9 6 0 3 2 d c 0 8 6 6 9 . j s " , " 6 1 0 7 0 8 6 1 3 8 9 1 2 " : " p a t h - - - d o c s - a l i g n - i t e m s - 2 6 d 1 f 9 d 9 2 9 1 2 e c 9 1 8 2 3 1 . j s " , " 1 2 8 6 4 6 1 9 7 2 5 9 1 6 7 " : " p a t h - - - d o c s - a s p e c t - r a t i o - 9 7 4 f c b c 3 f 3 9 4 a 7 4 1 3 2 c 2 . j s " , " 1 5 5 4 4 6 5 2 2 2 5 0 5 6 7 " : " p a t h - - - d o c s - f l e x - d i r e c t i o n - 5 f 9 5 b 2 0 d f 7 a 0 f c a 0 e 4 7 9 . j s " , " 1 1 2 4 1 6 0 0 5 3 5 7 2 7 4 " : " p a t h - - - d o c s - f l e x - f 5 f 7 f 4 5 2 3 5 a 5 d 9 8 6 3 6 1 1 . j s " , " 1 8 2 6 6 7 1 9 7 3 5 3 2 0 5 " : " p a t h - - - d o c s - f l e x - w r a p - 3 a a e 2 a f 7 8 7 2 e 4 d e f 6 2 1 8 . j s " , " 2 3 9 9 6 4 3 7 8 8 1 4 3 8 4 " : " p a t h - - - d o c s - j u s t i f y - c o n t e n t - 2 9 9 9 e e 2 2 d 5 e 9 c 8 9 d f e 9 a . j s " , " 8 7 3 8 3 6 2 2 1 0 2 4 5 3 " : " p a t h - - - d o c s - m a r g i n s - p a d d i n g s - b o r d e r s - 1 f 5 c a 2 2 5 a 4 5 7 d e
2018-02-16 09:03:21 -08:00
function gaOptout(){document.cookie=disableStr+'=true; expires=Thu, 31 Dec 2099 23:59:59 UTC;path=/',window[disableStr]=!0}var gaProperty='UA-44373548-24',disableStr='ga-disable-'+gaProperty;document.cookie.indexOf(disableStr+'=true')>-1&&(window[disableStr]=!0);
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-44373548-24', 'auto');
2018-02-19 02:55:30 -08:00
ga('set', 'anonymizeIp', 1);< / script > < script > /*<![CDATA[*/ ! function ( e , t , r ) { function n ( ) { for ( ; d [ 0 ] && "loaded" == d [ 0 ] [ f ] ; ) c = d . shift ( ) , c [ o ] = ! i . parentNode . insertBefore ( c , i ) } for ( var s , a , c , d = [ ] , i = e . scripts [ 0 ] , o = "onreadystatechange" , f = "readyState" ; s = r . shift ( ) ; ) a = e . createElement ( t ) , "async" in i ? ( a . async = ! 1 , e . head . appendChild ( a ) ) : i [ f ] ? ( d . push ( a ) , a [ o ] = n ) : e . write ( "<" + t + ' src="' + s + '" defer></' + t + ">" ) , a . src = s } ( document , "script" , [ "/commons-7ed8a46bf14ac4d92d59.js" , "/app-cee525c56d69d4f858de.js" , "/path---contributing-testing-809438e1a2b6903e076e.js" , "/component---src-templates-without-playground-js-c846644ebb9112e0fea6.js" ] ) /*]]>*/ < / script > < / body > < / html >
