third_party/WebKit/LayoutTests/custom-properties/registered-property-computation.html - Issue 2354463002: CSS Properties and Values API: Implement computation / computational independence

Side by Side Diff: third_party/WebKit/LayoutTests/custom-properties/registered-property-computation.html

Issue 2354463002: CSS Properties and Values API: Implement computation / computational independence (Closed)

Patch Set: test more Created 4 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

« no previous file with comments | « third_party/WebKit/LayoutTests/custom-properties/register-property-syntax-parsing-expected.txt ('k') | third_party/WebKit/LayoutTests/custom-properties/registered-property-computation-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE HTML>

	2 <script src="../resources/testharness.js"></script>

	3 <script src="../resources/testharnessreport.js"></script>

	4

	5 <style>

	6 #div1, #outerDiv {

	7 font-size: 10px;

	8 }

	9 #div1, #innerDiv {

	10 --length-1: 12px;

	11 --length-2: 13vw;

	12 --length-3: 14em;

	13 --length-4: 15vmin;

	14 --length-5: calc(16px - 7em + 10vh);

	15 --length-6: var(--length-3);

	16 --length-percentage-1: 17em;

	17 --length-percentage-2: 18%;

	18 --length-percentage-3: calc(19em - 2%);

	19 --list-1: 10px 3em;

	20 --list-2: 4em 9px;

	21 --list-3: 3% 10vmax 22px;

	22 --list-4: calc(50% + 1em) 4px;

	23 }

	24 </style>

	25

	26 <div id=div1></div>

	27 <div id=outerDiv>

	28 <div id=innerDiv></div>

	29 </div>

	30

	31 <script>

	32 CSS.registerProperty({name: '--length-1', syntax: '<length>', initialValue: '0px '});

	33 CSS.registerProperty({name: '--length-2', syntax: '<length>', initialValue: '0px '});

	34 CSS.registerProperty({name: '--length-3', syntax: '<length>', initialValue: '0px '});

	35 CSS.registerProperty({name: '--length-4', syntax: '<length>', initialValue: '0px '});

	36 CSS.registerProperty({name: '--length-5', syntax: '<length>', initialValue: '0px '});

	37 CSS.registerProperty({name: '--length-6', syntax: '<length>', initialValue: '0px '});

	38 CSS.registerProperty({name: '--length-percentage-1', syntax: '<length-percentage >', initialValue: '0px'});

	39 CSS.registerProperty({name: '--length-percentage-2', syntax: '<length-percentage >', initialValue: '0px'});

	40 CSS.registerProperty({name: '--length-percentage-3', syntax: '<length-percentage >', initialValue: '0px'});

	41 CSS.registerProperty({name: '--list-1', syntax: '<length>+', initialValue: '0px' });

	42 CSS.registerProperty({name: '--list-2', syntax: '<length>+', initialValue: '0px' });

	43 CSS.registerProperty({name: '--list-3', syntax: '<length-percentage>+', initialV alue: '0px'});

	44 CSS.registerProperty({name: '--list-4', syntax: '<length-percentage>+', initialV alue: '0px'});

	45

	46 for (var i = 0; i < 2; i++) {

	47 // div1 has font-size explicitly set while innerDiv has font-size inherited

	48 var computedStyle = getComputedStyle([div1, innerDiv][i]);
	alancutter (OOO until 2018) 2016/09/22 07:58:41 This could be "for (var element of [outerDiv, inne This could be "for (var element of [outerDiv, innerDiv])". Timothy Loh 2016/09/22 08:18:58 Done. Show quoted text On 2016/09/22 07:58:41, alancutter wrote: > This could be "for (var element of [outerDiv, innerDiv])". Done.
	49

	50 test(function() {

	51 assert_equals(computedStyle.getPropertyValue('--length-1'), '12px');

	52 assert_equals(computedStyle.getPropertyValue('--length-2'), '104px');

	53 assert_equals(computedStyle.getPropertyValue('--length-3'), '140px');

	54 assert_equals(computedStyle.getPropertyValue('--length-4'), '90px');

	55 assert_equals(computedStyle.getPropertyValue('--length-5'), '6px');

	56 assert_equals(computedStyle.getPropertyValue('--length-6'), '140px');

	57 }, "<length> values are computed correctly");

	58

	59 test(function() {

	60 assert_equals(computedStyle.getPropertyValue('--length-percentage-1'), ' 170px');

	61 assert_equals(computedStyle.getPropertyValue('--length-percentage-2'), ' 18%');

	62 assert_equals(computedStyle.getPropertyValue('--length-percentage-3'), ' calc(190px + -2%)');

	63 }, "<length-percentage> values are computed correctly");

	64

	65 test(function() {

	66 assert_equals(computedStyle.getPropertyValue('--list-1'), '10px 30px');

	67 assert_equals(computedStyle.getPropertyValue('--list-2'), '40px 9px');

	68 }, "<length>+ values are computed correctly");

	69

	70 test(function() {

	71 assert_equals(computedStyle.getPropertyValue('--list-3'), '3% 80px 22px' );

	72 assert_equals(computedStyle.getPropertyValue('--list-4'), 'calc(10px + 5 0%) 4px');

	73 }, "<length-percentage>+ values are computed correctly");

	74 }

	75 </script>

OLD	NEW