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 Created 4 years, 3 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') | third_party/WebKit/Source/core/css/resolver/StyleBuilderConverter.cpp » ('J')
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, #div2 {

	7 font-size: 10px;

	8 }

	9 #div1, #div3 {

	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-percentage-1: 17em;

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

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

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

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

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

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

	22 }

	23 </style>

	24

	25 <div id=div1></div>

	26 <div id=div2>

	27 <div id=div3></div>
	alancutter (OOO until 2018) 2016/09/22 03:08:43 Rename as outerDiv and innerDiv and use the ids in Rename as outerDiv and innerDiv and use the ids in the test names. Timothy Loh 2016/09/22 06:00:46 Done (left the other as div1, feels a bit weird..) Show quoted text On 2016/09/22 03:08:43, alancutter wrote: > Rename as outerDiv and innerDiv and use the ids in the test names. Done (left the other as div1, feels a bit weird..) alancutter (OOO until 2018) 2016/09/22 07:58:41 My concern was the test names weren't descriptive Show quoted text On 2016/09/22 at 06:00:46, Timothy Loh wrote: > On 2016/09/22 03:08:43, alancutter wrote: > > Rename as outerDiv and innerDiv and use the ids in the test names. > > Done (left the other as div1, feels a bit weird..) My concern was the test names weren't descriptive enough and should state which element they're testing. I meant for div1 and div3 to be renamed. Feel free to pick better names than outerDiv and innerDiv. Preferably such that you don't need the comment below. Timothy Loh 2016/09/22 08:18:58 Picked better names... Show quoted text On 2016/09/22 07:58:41, alancutter wrote: > On 2016/09/22 at 06:00:46, Timothy Loh wrote: > > On 2016/09/22 03:08:43, alancutter wrote: > > > Rename as outerDiv and innerDiv and use the ids in the test names. > > > > Done (left the other as div1, feels a bit weird..) > > My concern was the test names weren't descriptive enough and should state which > element they're testing. I meant for div1 and div3 to be renamed. Feel free to > pick better names than outerDiv and innerDiv. Preferably such that you don't > need the comment below. Picked better names... alancutter (OOO until 2018) 2016/09/22 08:25:56 Tests still don't mention the element ID being tes Show quoted text On 2016/09/22 at 08:18:58, Timothy Loh wrote: > On 2016/09/22 07:58:41, alancutter wrote: > > On 2016/09/22 at 06:00:46, Timothy Loh wrote: > > > On 2016/09/22 03:08:43, alancutter wrote: > > > > Rename as outerDiv and innerDiv and use the ids in the test names. > > > > > > Done (left the other as div1, feels a bit weird..) > > > > My concern was the test names weren't descriptive enough and should state which > > element they're testing. I meant for div1 and div3 to be renamed. Feel free to > > pick better names than outerDiv and innerDiv. Preferably such that you don't > > need the comment below. > > Picked better names... Tests still don't mention the element ID being tested. D: Timothy Loh 2016/09/22 08:31:43 I fixed it now D: Show quoted text On 2016/09/22 08:25:56, alancutter wrote: > On 2016/09/22 at 08:18:58, Timothy Loh wrote: > > On 2016/09/22 07:58:41, alancutter wrote: > > > On 2016/09/22 at 06:00:46, Timothy Loh wrote: > > > > On 2016/09/22 03:08:43, alancutter wrote: > > > > > Rename as outerDiv and innerDiv and use the ids in the test names. > > > > > > > > Done (left the other as div1, feels a bit weird..) > > > > > > My concern was the test names weren't descriptive enough and should state > which > > > element they're testing. I meant for div1 and div3 to be renamed. Feel free > to > > > pick better names than outerDiv and innerDiv. Preferably such that you don't > > > need the comment below. > > > > Picked better names... > > Tests still don't mention the element ID being tested. D: I fixed it now D:
	28 </div>

	29

	30 <script>

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

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

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

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

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

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

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

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

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

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

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

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

	43

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

	45 // div1 has font-size explicitly set while div3 has font-size inherited

	46 var computedStyle = getComputedStyle([div1, div3][i]);

	47

	48 test(function() {

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

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

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

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

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

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

	55

	56 test(function() {

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

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

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

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

	61

	62 test(function() {

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

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

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

	66

	67 test(function() {

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

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

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

	71 }

	72 </script>

OLD	NEW